728x90 300x250 SMALL 전체 글1170 웹접근성을 높이는 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. ScrollTrigger 이해하기: 핵심 개념 및 기능 분석 ScrollTrigger는 사용자가 페이지를 스크롤 할때 발생하는 이벤트를 바탕으로 애니메이션을 제어할 수 있다.이 플러그인을 사용하면 스크롤 위치에 따른 다양한 트리거를 설정할 수 있으며, 효과적인 애니메이션 연출이 가능하다. ScrollTrigger 주요 속성trigger : 애니메이션을 실행할 요소를 지정한다.start, end: 애니메이션의 시작과 끝을 스크롤 위치로 설정한다.scrub : 스크롤 속도에 따라 애니메이션을 동기화한다.pin : 요소를 화면에 고정하여 스크롤 동안 화면에 유지할 수 있다.toggleActionss : 애니메이션의 상태를 제어한다.gsap.to(".box", { x: 500, duration: 2, scrollTrigger: { trigger: ".box",.. 2025. 4. 5. 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. 타입스크립트 컴파일러 설치하기 TypeScript와 ts-node를 전역(global)로 설치npm i -g typescript ts-node npm i -g typescript ts-node가 하는 일(1) typescript 패키지 설치typescript 패키지는 타입스크립트 컴파일러(tsc)를 포함하고 있다.tsc를 사용하면 .ts 파일을 .js로 변환할 수 있다.(2) ts-node 패키지 설치ts-node는 타입스크립트 파일을 바로 실행할 수 있게 해주는 도구이다.즉, tsc 없이도. ts파일을 실행할 수 있다.(3) -g 옵션을 사용하면 전역 설치가 된다.전역 설치하면, 어떤 폴더에서도 tsc와 ts-node를 사용할 수 있다. tsc -vts-node -v 이렇게 입력하면 설치된 버전이 나온다. 2025. 4. 3. 이전 1 2 3 4 ··· 293 다음 728x90 반응형 LIST
