| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 혼자여행
- input style
- Python
- 파이썬혼공
- 비쥬얼스튜디오코드설치
- 일본 나라
- 혼공파선택미션
- 혼공단
- 파이썬공부
- 혼자공부하는파이썬
- #파이썬
- 호버스타일
- 한빛미디어
- 파이썬
- 파이썬조건문
- 일본여행
- hover style
- 혼공파
- 나라여행
- 비쥬얼스튜디오코드
- 일본나라여행
- input
- 나라 사슴
- 파이썬문자열
- 일본 사슴
- 일본 관광
- 파이썬혼자공부하기
- 조건문
- 혼공파미션
- 일본
- Today
- Total
Eveningstar
[skip navigation]스킵 네비게이션 본문
스킵네비게이션
- 웹접근성을 지키기 위해 본문에 스킵네비게이션을 작성해야한다.
- body태그 바로 다음에 오도록 만들자
[ HTML ]
<body> <!-- skip navi --> <div class="skip-navi" title="스킵 메뉴"> <a href="#container">본문 바로가기</a> /* 건너뛸 영역의 아이디값 작성 */ <a href="#header">메뉴 바로가기</a> </div> |
[ CSS ]
/* skip navigation */ .skip-navi {font-size:0;line-height:0;overflow:hidden} .skip-navi a {display:block;width:100%;padding:10px 0;color:#fff;position:absolute;left:0;top:-100px;text-align:center;z-index:200;background:#413022;border:0 none} .skip-navi a:focus, .skip-navi a:hover, .skip-navi a:active {top:0;font-weight:bold;font-size:16px;line-height:1.5; border-bottom:1px solid #fff} |
-> a의 top을 -100 px 해놓았다가 포커스(탭키이동시)될때 top:0으로 이동되게 해준다.
배경색은 원하는 색으로 바꾸면 됨
[ 적용 - 탭키시 포커스됨 ]
좀 더 다양한 사례와 예제는 접근성 인증해주는 기관사이트에 가보면, 인증에 합격한 사이트들이 게재되있으니 그 사이트들을 보면 됨!