본문 바로가기
728x90
300x250
SMALL

프론트엔드22

웹접근성을 높이는 ARIA 속성 완벽 가이드 1. ARIA란 무엇인가?ARIA는 웹접근성을 개선하기 위한 HTML속성으로, 스크린 리더 같은 보조기기가 웹페이지를 더 쉽게 이해하도록 돕는 역할을 합니다.예를 들어, 버튼이 태그로 만들어져 있을 경우, 보조기기는 이를 버튼으로 인식하지 못하지만, role="button"을 추가하면 버튼으로 인식할 수 있다.클릭하세요   2. ARIA 속성의 주요 역할ARIA 속성은 크게 역할(Role), 속성(Properties), 상태(States)로 나뉜다.속성설명예제aria-label직접 라벨을 지정Xaria-labelledby다른 요소를 참조하여 라벨 지정aria-describedby보조 설명을 추가role요소의 역할을 명확하게 지정버튼aria-live실시간 업데이트되는 콘텐츠 설정업데이트됨aria-hidd.. 2025. 4. 6.
css애니메이션 한방에 정리하기!(transition, transform, animation) 1. css애니메이션이란?CSS애니메이션은 html 요소를 움직이게 만드는 방법이다.JavaScript없이도 가능하다.주요 방식 :transition - 요소 상태 변화 애니메이션@keyframes + animation - 복잡한 애니메이션 구현2. CSS 애니메이션 기본 사용법1) transition - 간단한 애니메이션.box { width: 100px; height: 100px; background: red; transition: background-color 0.5s ease-in-out;}.box:hover { background-color: blue;}transition 속성:속성명 지속시간 타이밍함수 지연시간ease-in-out(타이밍 함수)은 처음과 끝에서는 천천.. 2025. 4. 4.
GSAP ScrollTrigger Snap 기능 가이드 gsap의 snap 옵션은 스크롤 애니메이션에서 특정 지점에 자동으로 정렬되도록 해주는 기능이다. 주로 ScrollTrigger와 함께 사용하며 , 특정 지점(예 섹션 단위)에서 스냅이 걸려 자연스럽게 정렬된다.snap 기본 사용법scrollTrigger: { snap: [0, 0.5, 1] // 스크롤 진행 정도(0%, 50%, 100%)에서 스냅} 이 경우 스크롤 시 0%, 50%, 100%의 위치에서 자동으로 멈추게 된다.snap 사용 방식 3가지1. 배열 방식snap: [0, 0.33, 0.66, 1] // 4개 섹션이 있다면 각각 0%, 33%, 66%, 100%에서 스냅 특정 지점으로 스냅을 걸고 싶을 때 사용 2. 비율 값 방식snap: 1 / 3 // 3개의 섹션이므로 33.3% 간격.. 2025. 3. 27.
웹사이트에 스크롤 애니메이션 추가하는 가장 쉬운 방법 GSAP는 강력한 웹 애니메이션 라이브러리로, ScrollTrigger는 gsap의 플러그인중 하나이다.ScrollTrigger를 사용하면 사용자의 스크롤 위치에 따라 애니메이션을 실행하거나 컨트롤할 수 있다.특히, 웹사이트에서 스크롤을 기반으로 동적인 인터랙션을 만들 때 유용하다.  ScrollTrigger의 주요 기능스크롤 위치를 감지하여 애니메이션 실행 : 특정 요소가 화면에 나타날 때 애니메이션을 시작할 수 있다.스크롤 진행률에 따라 애니메이션 속도 조절(scrub 기능) : 사용자의 스크롤 속도에 따라 애니메이션을 부드럽게 조절할 수 있다.요소가 뷰포트에 들어올 때 트리거 : 특정 위치에서 애니메이션을 실행하도록 설정할 수 있다.고정(fixed) 애니메이션 지원(pin 기능) : 특정 요소를 스.. 2025. 3. 25.
728x90
반응형
LIST

티스토리툴바