728x90 300x250 SMALL HTML5 웹접근성을 높이는 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. html 제목태그의 필요성 제목태그(h태그) h1, h2, h3, h4, h5, h6 이렇게 html의 제목 태그가 존재하지만 제목태그를 사용하지 않아도 같은 결과를 줄 수 있습니다. 시맨틱 태그등을 사용하지 않아도 div나 sapn만으로도 코딩이 가능합니다. 실제로 div만으로 코딩하신분도 몇번 본적이 있습니다. 결과로 보면 비슷해 보이지만 html에 의미에 맞게 사용해야 합니다. 오늘은 그이유에 대해서 알아보겠습니다. 아래와 같은 코드가 있을때 title title 위에처럼 의 제목태그로 감싼 코딩과 아래와 같이 strong과 sapn으로 깜싸고 스타일을 준 코딩은 결과만 보면 차이가 없어 보입니다. 하지만 여러가지 이유로 제목태그를 사용할 것을 권장합니다. 제목태그의 필요성 1. 간결함 위에 예시 코드만 봐도 알겠지만 제목 .. 2021. 6. 12. HTML 기본 회원가입 폼 form 태그 이름 이메일 비밀번호 메세지 성별 남성 여성 Other 나이 생년월일 멤버쉽 심플 스탠다드 슈퍼 I Like 오토바이 자동차 보트 리셋 이메일은 이메일 타입형식으로 들어가야 한다. @ 들어가야함 2021. 6. 10. 이전 1 2 다음 728x90 반응형 LIST