css 관련 질문있습니다.

Question

안녕하세요! 강의를 듣던중에 궁금한 점이 생겨서 간단히 질문 남깁니다. 3D 캐러셀만드는 영상 중에 html 작성을 하면서 화면에 보여지지 않을 일부 태그들 ex : < h1 class = "util-ir" > 캐러셀 이미지 리스트 을 안보여지게 css 속성값을 지정할때 왜 "display : none " 을 사용하지 않고 .util-ir { display : block ; overflow : hidden ; width : 1px ; height : 1px ; font-size : 1px ; line-height : 0 ; text-indent : -9999px ; } 이런식으로 화면 외부로 빼는건가요? 그리고 굳이 화면에 보여지지 않을 "

캐러셀 이미지 태그

" 등과 같은 태그를 사용하고 지우지않고 살려두는 이유는 코드작성시 가독성을 높이기 위함인지, 아니면 테스트 후에 채점사항이거나 혹은 다른 이유가 있어서 남겨두는 것인지 궁금합니다.

MostOneBrush · Answer

강사님은 아니지만 몇 가지 답변을 남겨드리면, 1. 웹 접근성은 유저가 어떠한 도구나 장애를 갖더라도 똑같이 사이트를 이용하는데 지장이 없겠금 하는 것에 목적을 두고 있습니다. display:none 속성을 사용할 경우 청각 장애를 갖고 있는 사용자일 경우 스크린리더라는 보조기기를 사용하는데, display:none으로 숨김 처리를 할 경우 보조기기가 해당 컨텐츠를 읽지 않습니다. ir 기법이라 해서 이미지를 설명할 수 있는 대체텍스트를 제공함으로써 시각적으로는 보여지지 않지만 그들을 위한 보조 텍스트를 제공하기 위해 좀 더 수고롭게 스타일을 넣는거죠. https://juyeol.tistory.com/25 2. h1 태그를 굳이 남기고 스타일 처리하는 것은 코드 가독성보다는 스크린리더 사용자가 해당 컨텐츠에 대한 이해를 쉽게 할 수 있도록 하기 위한 목적이 더 큽니다. 부가적으로 검색엔진에 컨텐츠와 맞는 텍스트를 제공할 경우 그만큼의 가중치를 얻을 수 있습니다. 3. 국내에서는 널리가 접근성 관련해서 어떤 부분들이 있는지 안내를 잘해놔서 한 번 사이트 참고해보시는 것도 좋을 것 같네요. https://nax.naver.com/index