overflow hidden 관련 궁금점 하나 더 적어봅니다 채택완료

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