Skip Navigation
네비게이션 영역의 많은 링크들을 건너뛰고 바로 컨텐츠 정보를 탐색하기 위해 사용하는 용도
예시>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
----------------------
</head>
<body>
<div class="skipNav">
<p><a href="#content">메뉴 건너뛰기</a></p>
</div>
<div id="wrap">
<h1><img src="logo.png" alt="OOO구청"></h1>
<h2>대메뉴</h2>
<ul>
<li><a href="intro.html">구청소개</a>
<li><a href="board.html">참여마당</a>
----------------------
</ul>
----------------------
<div id="content">
----------------------
</body>
</html>- 주의사항
-
가능한 body태그 맨 처음 위치하는 것이 좋음
-
가능한 처음에 한번만 사용하는 것이 좋음
css 코드
#skipNav { position: absolute; top: 0; left: 0; z-index: 9; } #skipNav a { position: absolute; top: 0; left: 0; display: block; left: 0; width: 150px; height: 40px; background: #000; color: #fff; display: flex; justify-content: center; align-items: center; /* 처음에는 숨겨놓기 */ transform: translateY(-100%); } #skipNav a:active, #skipNav a:focus { transform: translateY(0); }
참조
https://abcdqbbq.tistory.com/94
https://jangkunblog.com/wp/skip-navigation-is-not-a-quick-link/
0개의 댓글
