overflow hidden 관련 궁금점 하나 더 적어봅니다 채택완료
현재 0b3 에서 본문바로가기 라든지 <h2>홈페이지 메인메뉴</h2> 같은 경우 스타일이
#gnb h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
이렇게 되어 있는데
visibility:hidden 대신 width:1px; height:1px; overflow:hidden; 을 쓰는 이유가 따로 있는지 궁금합니다.
궁금해서 검색해보니
width와 height값이 0이면 스크린리더기에서 인식을 못한다고 하던데
font-size:0; 을 빼면 인식한다는 댓글이 보이길래 질문드려봅니다.
(<a href="http://cafeblog.search.naver.com/search.naver?where=cafeblog&sm=tab_jum&ie=utf8&query=overflow+hidden+visibility+hidden)" target="_blank" rel="noopener noreferrer">http://cafeblog.search.naver.com/search.naver?where=cafeblog&sm=tab_jum&ie=utf8&query=overflow+hidden+visibility+hidden)</a> <= 4번째 결과(하코사 댓글중)
파폭 스타일해제와 텍스트브라우저에서 정상 출력되는 것까진 확인했는데 스크린리더기는 어떤건지도.. 본적도 없다 보니..;;
그래서 아래처럼 css 수정해봤습니다. 이렇게 할 경우 메뉴바의 상단1px 여백이 사라집니다.(파폭,크롬 / 참고링크에 적용되어 있습니다.)
/* #gnb h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} */
#gnb h2 {width:0px; height:0px; visibility:hidden;}
별도로 .sound_only 처럼 클래스를 따로 지정하는 것도 괜찮을 듯 합니다
#gnb h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
이렇게 되어 있는데
visibility:hidden 대신 width:1px; height:1px; overflow:hidden; 을 쓰는 이유가 따로 있는지 궁금합니다.
궁금해서 검색해보니
width와 height값이 0이면 스크린리더기에서 인식을 못한다고 하던데
font-size:0; 을 빼면 인식한다는 댓글이 보이길래 질문드려봅니다.
(<a href="http://cafeblog.search.naver.com/search.naver?where=cafeblog&sm=tab_jum&ie=utf8&query=overflow+hidden+visibility+hidden)" target="_blank" rel="noopener noreferrer">http://cafeblog.search.naver.com/search.naver?where=cafeblog&sm=tab_jum&ie=utf8&query=overflow+hidden+visibility+hidden)</a> <= 4번째 결과(하코사 댓글중)
파폭 스타일해제와 텍스트브라우저에서 정상 출력되는 것까진 확인했는데 스크린리더기는 어떤건지도.. 본적도 없다 보니..;;
그래서 아래처럼 css 수정해봤습니다. 이렇게 할 경우 메뉴바의 상단1px 여백이 사라집니다.(파폭,크롬 / 참고링크에 적용되어 있습니다.)
/* #gnb h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} */
#gnb h2 {width:0px; height:0px; visibility:hidden;}
별도로 .sound_only 처럼 클래스를 따로 지정하는 것도 괜찮을 듯 합니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
채택
채택
채택
답변대기
채택
채택
채택
답변대기
답변대기
답변대기
채택
채택
채택
채택
채택
채택
채택
답변대기