Navigation bar
GNB (Global Navication bar)
- 메인메뉴
- 어느 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴
- 최상위 메뉴
- 보통 상단에 위치
LNB (Local Navigation Bar)
- GNB를 누를 경우 소제목 형식으로 나오는 메뉴
- 네비게이션을 통해 특정 지역으로 가는 네비게이션 바
SNB(Side Navigation Bar)
- 일반적으로 왼쪽에 많이 있기 때문에 LNB(Left Navigation Bar)라고 부르기도 함
- 메인메뉴와 서브메뉴를 제외한 나머지 사이드 메뉴
FNB (Foot Navigation Bar)
- 하단 메뉴
⚒️ 예제
| index.html main.css reset.css |
웹 페이지 만들기 (HTML, CSS 만) |
Skip Navigation
- Skip Navigation 사용하는 가장 큰 이유 : 사용자 편의 및 웹 접근성
- 웹 접근성 : (우리나라에서는) 장애인에 대한 편의를 제공하는 것
본문으로 이동하기 위해서는 대 메뉴와 좌측 메뉴 등과 같이 반복적으로 제공되는 링크를 모두 거쳐야만 한다
즉, Tab키/방향키을 반복적으로 눌러야하는 불필요한 행동을 해야하는 것이다
이는 웹 접근성을 저해하는 주요인이 된다
그래서 사용자 특히 장애인이 반복적인 링크들로 인해 불편해 하지 않고,
원하는 영역 즉 ‘본문’으로 바로 이동할 수 있는 건너뛰기 링크를 반드시 제공해야 한다
하지만 더 큰 범위에서는 정상적으로 쓸 수 없는 상황에 대해서도 편의를 제공하는 것이다
가령 내가 마우스가 고장났다면? 또는 키보드를 못쓴다면?
여기서 Skip Navigation는 키보드만으로 접근을 하는 사용자를 위한 편의를 제공하는 경우도 있다
마우스로 우리가 보고자 하는 본문 내용 쪽으로 포커스를 움직인다면 편리하겠지만,
키보드만으로 쓰는 경우는 본문으로 가기까지 거쳐야 하는 메뉴들이 많다
그래서 HTML 가장 상단에 Skip Navigation를 만들어 놓는다
Skip Navigation는 <body>다음으로 나오는 것이 가장 적절하다
[본문 바로가기] [메뉴 바로가기] [하단정보 바로가기] 등의 Skip Navigation가 가장 많다
HTML
<div class="skipnav">
<ul>
<li><a href="본문 아이디값">본문으로 이동</a></li>
<li><a href="하단정보 아이디값">하단정보 바로가기</a></li>
</ul>
</div>
CSS
.skipnav a {display:none}
.skipnav a:focus, .skipnav a:active {display:block;}css 는 만들기 나름이다. js나 css3를 써서 움직임을 줄 수도 있고,
position을 이용하여 display:none이 아닌 화면에서 보이지 않게 한 후 포커스가 가면 나오게 할 수도 있다
'WEB > CSS' 카테고리의 다른 글
| Bootstrap (0) | 2024.10.12 |
|---|---|
| Dynamic (0) | 2024.08.18 |
| Shadow & Cursor (0) | 2024.08.18 |
| 리스트, 표, 폼 꾸미기 (0) | 2024.08.14 |
| Positioning (0) | 2024.08.14 |
