skip-nav / 스킵 네비게이션 (메뉴 건너뛰고 바로 본문으로 이동/웹접근성에 필수 요소)

학원에서 배워 잘 써먹고 있는 skip 네비게이션의  마크업와 스타일.

접근성에 필수이기 때문에 무조건 넣어줘야 한다! 

(보통 메뉴바로가기, 본문바로가기, 하단정보바로가기 이렇게 3개의 메뉴를 넣는 것 같다.)

 

• 마크업

<a href="#main" id="skip-nav">본문 바로가기</a>

 

• 스타일

#skip-nav{
    position: fixed;
    left: 0;
    top: -40px;
    width: 100%;
    line-height: 40px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    font-size: 16px;
    transition: top 0.3s;
    z-index: 100000;
}