view
html
1개인 경우
1
2
3
4
5
<div id="skipNavigation" class="skip-navigation">
<a href="#content" class="skip-navigation__anchor">본문 바로가기</a>
</div>
<section id="content">내용</section>
n개인 경우
1
2
3
4
5
6
7
<div id="skipNavigation" class="skip-navigation">
<a href="#content" class="skip-navigation__anchor">본문 바로가기</a>
<a href="#gnb" class="skip-navigation__anchor">주메뉴 바로가기</a>
</div>
<div id="gnb">주메뉴</div>
<div id="content">내용</div>
script
html, css 만으로도 가능하지만, 실제 실행하여 컨텐츠로 이동하면 포커스가 순간 보이지 않게 된다.
이를 방지하기 위해 일시적으로 이동하는 컨텐츠에 tabindex를 추가하여 outline이 보이도록 한다.
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// skip navigation
.skip-navigation {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
&__anchor {
display: block;
width: 0;
height: 0;
font-size: 1px;
opacity: 0;
&:hover,
&:focus,
&:active {
display: block;
width: 100%;
height: 40px;
background-color: #282a37;
font-size: 14px;
text-align: center;
color: #fff;
line-height: 40px;
opacity: 1;
}
}
}