sr-only 활용 - 웹 접근성 고려하기
웹 접근성은 모든 사용자에게 동등한 사용성을 보장하기 위해 고려해야할 점이다. sr-only라는 클래스명을 사용하여 스크린리더에서 읽히지만 화면에서는 보이지 않도록 구현해보도록 하자.
form과 관련된 태그는 label 태그를 통해 화면상에 시각적으로 이름표를 붙이고 어떤 정보를 받고 있는지 알 수 있도록 한다.
ex) select 태그가 검색 분류라는 드롭다운 메뉴를 제공하고 있다는 정보를 스크린 리더 사용자에게 제공한다.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
border: 0;
clip: rect(0 0 0 0);
}
스크린 리더를 위해 숨겨진 요소를 만들 때, width와 height를 0px로 설정하면 스크린 리더에 의해 무시될 수 있으므로 1px로 설정해 해당 요소를 감지할 수 있게 만든다.
그 외 속성들을 이용해 화면상에 보이지 않도록 완전히 숨긴다. 하지만 여전히 스크린 리더는 해당 태그에 접근할 수 있으므로 스크린 리더 사용자들에게 필요한 정보를 제공해 줄 수 있게 되며 결과적으로 웹접근성을 높일 수 있다.
dropdown 버튼을 svg 이미지로 대체하기
대체 방법을 열심히 서치해 본 결과 이미지 경로를 백그라운드로 주는 방법이 가장 많이 사용되지만, 나는 svg로 html에 마크업을 해야했기 때문에 다른 방법을 사용하기로 했다.
dropdown의 외곽 설정을 다 없애고, transparent 속성을 사용해서 투명하게 만들어 준다. (관련해서 웹호환성을 위해 브라우저별로 속성을 적용해준다.)
z-index를 통해 최상위로 올려주어 주어진 width만큼 클릭했을때 선택될 수 있도록 설정해준다.
svg는 position을 이용해 적당한 위치에 배치해주면 아이콘을 눌러도 드롭다운 메뉴가 활성화 된다.
::after를 이용한 구분선 넣기
자꾸 color 속성을 주는 실수를 하는데 border를 이용하는 것이 아니라 width와 height를 이용해 공간을 만들어주고 그 공간에 배경값을 주는 것이다!!
border 속성 이용해 tooltap 말풍선 메세지 만들기
큰 삼각형을 작은 삼각형으로 덮어씌우는 방법으로 테두리만 있는 말풍선을 만들 수 있다. 완전 신박!!! position를 적절히 사용하면 예쁜 말풍선을 만들 수 있다.
아주 큐트...
.클래스명::after {
content: "";
border-top: 0px solid transparent;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid var(--color-gray-200);
position: absolute;
top: -5px;
left: 39px;
}
.클래스명::before {
content: "";
border-color: var(--color-white) transparent;
border-style: solid;
border-width: 0 5px 5px 5px;
width: 0;
display: block;
position: absolute;
top: -3.5px;
left: 39px;
z-index: 1;
}
before와 after 선택자를 이용해 꽉 찬 삼각형, 하얀 삼각형을 넣어 포지션 값을 조정하여 테두리만 있는 말풍선 박스를 만들 수 있었다.
참고 사이트
https://developer.mozilla.org/ko/docs/Web/HTML/Element/label
https://devbirdfeet.tistory.com/152
https://hyunipad.tistory.com/73
막혔던 부분 예전에 공부했던 반응형 헤더 만들기 영상 참고..(정리의 중요성 다시 느낌)
https://www.youtube.com/watch?v=X91jsJyZofw
