1. Aria-label aira-label은 웹 페이지에서 스크린 리더 사용자에게 정보를 전달하는 데 사용되는 HTML 속성 요소가 시각적으로는 명확한 정보를 제공하지만 스크린 리더 사용자들이 이해하기 힘들기 때문에 aira-label을 사용해서 요소의 기능이나 목적을 설명할 수 있음 검색 span이나 div 태그에서 aria-label을 사용할 땐 role 속성을 함께 써주는 것이 좋음 2. sr-only 스크린리더에서는 읽을 수 있지만 화면에는 보이지 않게 하는 방법 (aria-label과 비슷한 역할을 함) 아래의 코드를 사용함 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hid..
Class 선택자 .클래스명 .gnb { ...... 태그 선택자 태그명 body { ..... ID 선택자 #ID명 #gnb { ..... 전체 선택자 * * { ..... 속성 선택자 [ ] a[title = "daum"] a태그에 title이 daum인 것 부모 자손 선택자 선택자1 선택자2 a .daum {.... 선택자 사이에 공백 넣기 자식 선택자 선택자 > 선택자 body > .gnb { .... 공백과 다른 점은 직계 자손만 선택 가능 인접 형제 선택자 선택자 + 선택자 a + ul { .... 선택자 바로 뒤에있는 태그가 선택됨 일반 형제 선택자 선택자 ~ 선택자 ul ~ span { .... ul 아래 있는 모든 sapn 태그 요소 선택됨 가상선택자 : a:hover 등 태그: nth-..
top: 50%; left: 50%; transform: translate(-50%, -50%); 흔히 가운데 정렬을 할 때 많이 사용한다. 뭔가 가운데 정렬이라 하면 뭔가 저 top: 50% left: 50%만으로 될 것 같아 보였다. (잘 모르는 나의 기준으로 봤을 때) 그런데 왜 가운데 정렬을 하고자 할때 매번 translate -50%, -50%가 쓰였다. 이 부분이 이해가 바로 되지 않아서 정리한 글 left: 50%를 적용하면 부모의 크기를 기준으로 적용된다. 부모 크기의 50%지점으로 사각형이 이동한 것을 볼 수 있다. transform: translate(-50%, 0);을 적용하면 -50% : 왼쪽으로 본인의 크기의 50%만큼 이동 - 50%이 아니라 50%였다면 오른쪽으로 이동 위 사진..