전체보기829

728x90
[CSS]transition 와 animation 차이 CSS에서 transition과 animation은 모두 애니메이션을 만들기 위한 속성들이지만, 각각의 목적과 사용 방식에 있어서 다소 차이가 있습니다.Transition (트랜지션)목적: 요소의 상태 변화를 부드럽게 처리하는 것이 주된 목적입니다. 주로 상호작용에 반응하여 요소의 상태가 변경될 때 효과적으로 사용됩니다. 주요 속성:transition-property: 어떤 CSS 속성에 트랜지션을 적용할지 지정합니다.transition-duration: 트랜지션이 일어나는 시간을 설정합니다.transition-timing-function: 트랜지션의 속도 곡선을 정의합니다.transition-delay: 트랜지션이 시작하기 전에 기다리는 시간을 설정합니다.사용 예시:.box { width: 100..
[CSS]CSS 주요 애니메이션 속성들과 설명 CSS 애니메이션을 구성하는 여러 속성이 있습니다. 각각의 속성은 애니메이션의 동작을 세밀하게 조정하는 데 사용됩니다. 여기서는 주요 애니메이션 관련 속성을 설명합니다. 주요 애니메이션 속성들@keyframes애니메이션의 중간 상태를 정의하는 데 사용됩니다.@keyframes는 애니메이션의 이름과, 각 프레임(0%에서 100%까지)의 스타일을 정의합니다.@keyframes animationName { 0% { /* 시작 상태 */ } 100% { /* 끝 상태 */ }}animation애니메이션을 한 줄로 정의할 수 있는 단축 속성입니다. 여러 개의 개별 애니메이션 속성을 포함할 수 있습니다.예: animation: animationName 2s linear 1s infinite alterna..
[Git]프로젝트 Git 사용시 .gitignore 에 제외할 파일,패턴,폴더 추가하기 Git 사용시 형상관리 저장소에 올리지 말아야 할 패턴이나 폴더, 파일들이 있습니다..gitignore 에 제외 목록을 추가하는 방법입니다.  .gitignore 파일은 일반적으로 Git 저장소의 루트 디렉토리에 위치합니다.이 위치에 두면 프로젝트 전체에 적용됩니다. 그러나 특정 하위 디렉토리에 .gitignore 파일을 두어 해당 디렉토리와 그 하위 디렉토리에만 적용되도록 할 수도 있습니다. 위치에 따른 적용 범위루트 디렉토리에 위치:프로젝트 전체에 적용됩니다.프로젝트의 최상위 디렉토리에 .gitignore 파일을 생성합니다.예: project/.gitignore하위 디렉토리에 위치:해당 디렉토리와 그 하위 디렉토리에만 적용됩니다.특정 폴더 내에 .gitignore 파일을 생성합니다.예: project..
[Vue.js]Vue 프로젝트 설치, 생성 및 파일 구조와 디렉토리 설명 1. Vue 프로젝트 생성Vue CLI를 사용하여 새로운 프로젝트를 생성합니다.# Vue CLI가 설치되어 있지 않다면 먼저 설치합니다.npm install -g @vue/cli# 새로운 Vue 프로젝트를 생성합니다.vue create my-vue-app 프로젝트 생성 시, 기본 설정을 선택하거나 커스텀 설정을 사용할 수 있습니다. 여기서는 기본 설정을 선택한다고 가정하겠습니다.cd my-vue-appnpm run serve npm run serve 명령을 실행하면, 로컬 개발 서버가 시작되고 기본적으로 http://localhost:8080에서 애플리케이션을 확인할 수 있습니다. 2. 프로젝트 구조프로젝트 폴더 구조는 다음과 같습니다.my-vue-app/├── node_modules/├── public..
[사이트]사이트 제작시 필요한 도구 모음 제공 사이트 'sitero' 사이트 제작시나 편리한 도구 모음을 제공해주는 곳이 있어 소개하고자 합니다.https://sitero.co.kr/ 사이트로(SITERO)필요한 도구를 가장 편리하게 개발하여 사이트로 만들었습니다.sitero.co.kr  서비스되고 있는 도구백분율 계산기 색상 코드 변환 폰트 단위 변환 웹접근성 명도 대비 검사 CSS로 삼각형 만들기 CSS 애니메이션 만들기 퇴직금 계산기 연차 계산기 사이트 제작시 자주 사용하는 것들과 회사생활에 궁금한 (퇴직금계산,연차계산기)등을 제공하는데 UI도 편리하게 정리되어있습니다.
[CSS]CSS에서 사용되는 용어들 기본 용어속성 (Property)스타일링에 사용되는 구체적인 스타일 옵션입니다.예: color, font-size, margin, padding값 (Value)속성에 적용되는 실제 스타일 값입니다.예: red, 16px, 10px, auto선택자 (Selector)스타일을 적용할 HTML 요소를 선택하는 구문입니다.예: div, .class, #id, *고급 선택자속성 선택자 (Attribute Selector)특정 속성을 가진 요소를 선택합니다.예: [type="text"], [href*="example"]가상 클래스 (Pseudo-class)요소의 특정 상태를 스타일링합니다.예: :hover, :focus, :nth-child(2)가상 요소 (Pseudo-element)요소의 특정 부분을 스타일링합니..
[CSS]속성 선택자[class*="string"] 종류 및 예제 속성 선택자(attribute selector)는 HTML 요소의 속성 값을 기준으로 요소를 선택하는 방법을 제공합니다. [class*="string"] 선택자는 이러한 속성 선택자 중 하나로, 특정 부분 문자열을 포함하는 클래스 속성을 가진 요소를 선택합니다. 속성 선택자의 종류와 예제를 좀 더 자세히 설명하겠습니다.속성 선택자 종류 및 예제부분 문자열 포함 선택자 ([attr*="value"])속성 값에 특정 문자열이 포함된 요소를 선택합니다.구문: [attr*="value"]예제:div class="intro-heading">div>div class="main-heading">div>div class="footer-heading">div>div class="content">div>style> [c..
[운영일지]웹미니 블로그 Ver10.0 코드 및 CSS정리 웹미니 블로그 Ver10.0로 업데이트 완료. 업데이트 내역1. 사용하지 않는 코드 정리 및 수정 (접근성 일부추가)2. CSS (float -> display:flex) 형태로 변경3. 기본폰트스타일 변경('Noto Sans DemiLight' --> Pretendard)4. 전체적인 스타일 미세하게 변경(색상,여백등..)  레이아웃 코드 변경- float로 되어있던 속성을 display:flex;로 변경
[CSS]@media쿼리와 @container container-type의 차이점 container-type와 @media는 각각 CSS에서 반응형 디자인을 구현하는 데 사용되는 방법들이지만, 이 둘은 서로 다른 용도로 사용됩니다. 아래에서 두 가지의 차이점과 사용 예시를 설명하겠습니다.@media@media는 미디어 쿼리로, 뷰포트(브라우저 창)의 크기나 기기의 특성에 따라 스타일을 적용하는 데 사용됩니다. 뷰포트 너비, 높이, 해상도, 방향 등의 특성에 따라 다른 스타일을 적용할 수 있습니다.주요 특징:뷰포트나 기기의 특성을 기준으로 스타일을 적용합니다.전체 페이지 또는 특정 요소의 스타일을 변경할 수 있습니다.예시:/* 기본 스타일 */body { background-color: white;}/* 뷰포트 너비가 600px 이상일 때 스타일 */@media (min-width..
[CSS]:is와 :where 가상클래스 알아보기 :is() 및 :where() 가상 클래스는 CSS Selectors Level 4 사양의 일부로 도입되었습니다. 이들 가상 클래스는 셀렉터를 보다 간결하게 작성하고, 특정성(특이성) 문제를 해결하는 데 유용합니다.도입 시기:is() 및 :where() 가상 클래스는 2019년경 W3C에 의해 CSS Selectors Level 4 사양의 일부로 처음 제안되었고, 이후 다양한 브라우저에 점진적으로 지원되었습니다.브라우저 호환성이 가상 클래스는 현대 웹 브라우저 대부분에서 지원됩니다. 다음은 주요 브라우저의 지원 정보입니다.Chrome: 88 이상Firefox: 78 이상Safari: 14 이상Edge: 88 이상Opera: 74 이상사용 예시이 가상 클래스는 현대 웹 브라우저 대부분에서 지원됩니다. 다음..
[웹접근성]table 웹접근성 예시와 설명(scope) 웹 접근성은 다양한 사용자, 특히 장애가 있는 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 하는 것을 의미합니다. 표(table)를 사용할 때 웹 접근성을 높이기 위해 다음과 같은 예시와 지침을 따를 수 있습니다.다음 표는 2024년 각 분기별 매출 현황을 보여줍니다. 매출액과 성장률이 포함되어 있습니다. /* 표 설명 */ 2024년도 분기별 매출 현황 /* 표 제목 */ 분기 매출액 (백만 달러) 성장률 (%) 1분기 10 5% 2분기 12 20% 3분기 15 25% 4분기 20 33% ..
[웹접근성]html 기본태그에도 역할 속성 (role)을 사용해야할까? role 속성을 명시적으로 추가해야 하는 경우를 살펴보겠습니다. 기본적으로 HTML 요소들은 자신의 태그에 따라 적절한 역할(role)을 가지고 있기 때문에 대부분의 경우에는 별도로 role 속성을 지정할 필요가 없습니다. 하지만 몇 가지 상황에서는 추가적인 role 속성을 사용하여 요소의 역할을 명확히 할 수 있습니다. 결론을 먼저 말하자면, 기본적인 태그에 똑같이 role 을 지정할 필요는 없습니다.1. button 요소사용 예시: 확인추가 고려 사항: 요소는 기본적으로 버튼 역할을 가지므로 일반적으로 별도의 role="button"을 지정할 필요는 없습니다. 단, 특정 상황에서 role 속성을 사용하여 추가적인 의미를 전달할 필요가 있을 수 있습니다 (예: 사용자 정의 버튼 디자인).2. inpu..
[웹접근성]웹 접근성을 높이기 위한 주요 HTML 속성과 ARIA 속성 주요 HTML 속성alt: 이미지의 대체 텍스트를 제공합니다.title: 요소에 대한 추가 정보나 설명을 제공합니다 (툴팁으로 표시될 수 있음).href: 링크의 목적지 URL을 지정합니다.src: 이미지, 오디오, 비디오 등의 자원의 경로를 지정합니다.id: 요소의 고유 식별자를 제공합니다.class: 요소를 스타일링하기 위한 클래스 이름을 지정합니다.style: 요소에 인라인 스타일을 지정합니다.tabindex: 요소의 탭 순서를 명시적으로 지정합니다.type: input 요소의 타입을 지정합니다 (예: text, checkbox, radio 등).name: input 요소의 이름을 지정합니다.ARIA 속성ARIA (Accessible Rich Internet Applications)는 웹 콘텐츠와 ..
[웹접근성]슬라이더, 프로그레스바에 'aria-valuenow' 속성을 사용하자 aria-valuenow는 ARIA(Accessible Rich Internet Applications) 속성 중 하나로, 접근성 향상을 위해 사용됩니다. 이 속성은 주로 슬라이더, 프로그레스바, 스핀버튼 같은 위젯에서 현재 값을 나타내는 데 사용됩니다. 이는 시각 장애가 있는 사용자들이 화면 읽기 소프트웨어(screen reader)를 통해 위젯의 현재 상태를 이해할 수 있도록 돕습니다. 사용 예제슬라이더 (Slider):프로그레스바 (Progress Bar): 60%관련 ARIA 속성aria-valuemin: 위젯에서 가질 수 있는 최소값을 나타냅니다.aria-valuemax: 위젯에서 가질 수 있는 최대값을 나타냅니다.aria-valuetext: 시각적으로는 값이 아닌 텍스트로 상태를 설명할 ..
[CSS]display:flex; 일때 자식 요소들에 'order'로 좌우측 위치 변경하기 display:flex; 로 감싼 레이아웃에서 좌측(컨텐츠영역), 우측(사이드영역)이 존재할때 CSS만으로 위치를 바꾸는 방법입니다.float 를 사용했을때는 float:left 혹은 float:right 만 변경하면 가능했지만, display:flex; 로 할경우는 다음과 같이 작성해줘야합니다. 레이아웃 예시HTML 사이드메뉴 내용 레이아웃은 위와 같다고 가정했을때입니다. CSS.container { display: flex;}.contents { width: calc(100% - 30%);}.aside { position: sticky; top: 0; right: 0; align-self: flex-start; ..
[CSS]부모요소가 display:flex; 일때 사이드 메뉴에 position:sticky; 를 적용해보자 부모요소가 display:flex; 일때 사이드 메뉴가 sticky 로 동작하게 하는 방법입니다.구조는 다음과 같습니다.HTML 컨텐츠 내용 사이드 메뉴(이부분이 position: sticky; 가 동작할 영역) 스크롤 하면 aside 영역이 sticky 가 될 부분입니다. CSS.container{ display:flex;}.contents{ width:calc(100% - 30%); /* aside 영역 만큼 빼줌 */}.aside{ align-self: flex-start; /* 이부분 추가 */ position: sticky; top: 45px; right: 0; width: 30%;} flex 컨테이너 내에서 자식 요소들은 기본..
[CSS]반응형 사이트 calc() 함수와 예제 및 계산 방법에 대해 알아보기 calc()는 CSS에서 동적인 계산을 가능하게 하는 함수입니다. 이를 통해 길이, 백분율, 수치 등을 혼합하여 스타일을 동적으로 설정할 수 있습니다. calc() 함수는 CSS에서 다양한 상황에 유용하게 사용됩니다.calc() 함수의 사용법calc() 함수의 기본 구문은 다음과 같습니다:property: calc(expression);여기서 expression은 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 등의 산술 연산을 포함할 수 있습니다. 사용 예제1. 너비 계산부모 요소의 너비에서 특정 픽셀 값을 뺀 너비를 설정하고 싶을 때 사용합니다..container { width: 100%;}.content { width: calc(100% - 20px);}이 예제에서 .content 요소..
[SCSS]SCSS 기본 문법과 예시 calc 포함 SCSS(Sass)는 CSS를 더 쉽게 작성하고 관리할 수 있도록 돕는 CSS 전처리기입니다. SCSS는 Sass의 구문 중 하나로, CSS와 매우 유사한 구문을 사용합니다. SCSS의 기본 문법을 몇 가지 예시로 설명하겠습니다.1. 변수 (Variables)변수를 사용하여 재사용 가능한 값을 정의할 수 있습니다.$primary-color: #3498db;$font-stack: Helvetica, sans-serif;body { font-family: $font-stack; color: $primary-color;}2. 중첩 (Nesting)중첩을 사용하여 CSS 선택자를 계층적으로 작성할 수 있습니다.nav { ul { margin: 0; padding: 0; list-style:..
[CSS]input 입력 필드가 자동완성될 때의 스타일을 정의 입력 필드 자동완성이 안나오게 하는 방법과 해당 요소에 스타일 정의하는 방법과 설명입니다. 자동완성 기능을 해제하는 방법 autocomplete='off' 를 넣게 되면, 자동완성 기능이 해제되며, 삭제하면 기본 활성화 됩니다.  자동완성 기능 스타일 정의input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 1000s ease-in-out 0s; -webkit-box-shadow: 0 0 0 30px inset transparent; -webkit-text-fill-color: #00..
[Accessibility]웹접근성 "한국형 웹 콘텐츠 접근성 지침 2.1"과 "한국형 웹 콘텐츠 접근성 지침 2.2" 강화된 항목 한국형 웹 콘텐츠 접근성 지침인 KWCAG (Korean Web Content Accessibility Guidelines)는 시간이 지남에 따라 업데이트되어 개정판이 발표되었습니다. 여기서 "한국형 웹 콘텐츠 접근성 지침 2.1"과 "한국형 웹 콘텐츠 접근성 지침 2.2"의 차이를 요약하면 다음과 같습니다: 최신 웹 표준 및 기술 대응: KWCAG 2.1은 초기 버전으로, 주로 HTML, CSS, JavaScript 등의 기술을 기반으로 합니다. 반면 KWCAG 2.2는 보다 최신의 웹 표준 및 기술에 대응하도록 업데이트되어 있습니다. 예를 들어, 미디어 콘텐츠의 접근성, 동적 콘텐츠의 관리, 사용자 경험의 향상 등에 대한 추가적인 지침이 포함되어 있습니다.기술적 요구사항의 확대: KWCAG 2.2는 ..
반응형