Skip To Content

웹사이트를 제작할 때 CSS가 깨진다거나, CSS가 반영되지 않는 환경의 브라우저로 접근할 때 사이트에
Skip To Content라는 기능을 만들어 컨텐츠 이동을 용이하게 제공할 수 있다.

[CSS]
.skipToContent { position: absolute; top: -1000px; }


[HTML]
<dl class="skipToContent">
<dt>바로가기</dt>
    <dd>
        <ul>
             <li><a href="#menu">메뉴</a></li>
             <li><a href="#content1">컨텐츠1</a></li>
             <li><a href="#content2">컨텐츠2</a></li>
             <li><a href="#footer">하단</a>
        </ul>
    </dd>
</dl>

평 소에 CSS가 반영되는 브라우저에서는 skipToContent CSS에 정의된 top: -1000px가 반영되어 브라우저 상에서 해당 바로가기 메뉴가 보이지 않지만, CSS를 반영할 수 없는 환경에서는 top: -1000px가 반영되지 않아 사용자에게 바로가기 메뉴가 보이게 된다.