시각장애인의 편의를 위해 바디 태그 바로 밑에 u-skip을 넣어
빠르고 편한 검색을 도와줍니다.
<body>
<div id="u-skip">
<a href="#gnb">주메뉴 바로가기</a>
<a href="#main">본문 바로가기</a>
</div>
<div class="wrap">
<header>
<h1 class="logo">
<a href="#">The Shilla Hotel & Resotrs</a>
</h1>
<nav id="gnb" class="menu">
<h2 class="blind">주메뉴</h2>
<ul class="nav-depth1">
<li><a href="#">호텔찾기</a></li>
<li><a href="#">호텔예약</a></li>
<li><a href="#">호텔신라 소개</a></li>
<li><a href="#">고객문의</a></li>
<li><a href="#">신라리워즈</a></li>
</ul>
</nav>
<div class="nav-goto">
<h2 class="blind">중요 메뉴</h2>
<ul class="link-goto">
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
<h2 class="blind">sns 바로가기</h2>
<ul class="link-sns">
<li><a href="#">facebook</a></li>
<li><a href="#">twitter</a></li>
<li><a href="#">instargram</a></li>
</ul>
</div>
</header>
<div id="main" class="container">
<article>
<strong>Jeju Island</strong>
</article>
<article>
<a href="#">
<h2>REWARDS Basic Edition</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</a>
</article>
<article>
<a href="#">
<h2>Reservation</h2>
<i class="las la-sync-alt"></i>
</a>
</article>
<article></article>
<article></article>
<article>
<a href="#">
<h2>REWARDS WINTER DAY DELIGHTS</h2>
<p>Lorem ipsum dolor sit amet consectetur</p>
</a>
</article>
<article></article>
<article>
<a href="#">
<h2>REWARDS PLAY IN THE ROOM</h2>
<p>adipisicing elit. At recusandae sed quis distinctio</p>
</a>
</article>
<article></article>
<article></article>
<article>
<a href="">
<h2>Rewards Stay Sweet for Honeymoon</h2>
<p>Necessitatibus facere, aliquam expedita.</p>
</a>
</article>
<article></article>
</div>
</div>
</body>/* skipnavigation */
#u-skip a {
position: absolute;left: -3000%;
}
#u-skip a:focus {
display: block;left: 0;top: 0;z-index: 10000000000;
width: 100%;height: 30px;
line-height: 30px;
background: #f1e3c4;color: #222;
text-align: center;
}
탭으로 이동하였을때 상단에 유스킵으로 바로 넘아가면 적용이 된 것입니다.
'반응형 웹사이트 > Shilla Hotel' 카테고리의 다른 글
| line-awesome을 이용한 SNS 아이콘 넣기 (0) | 2021.01.27 |
|---|---|
| flex-direction으로 헤더 세로 정렬하기 (0) | 2021.01.27 |
| 애니메이션으로 텍스트가 순서대로 올라오는 효과내기 (0) | 2021.01.27 |
| 가상클래스로 마우스오버시 불켜지는 효과 내기 (0) | 2021.01.27 |
| width≤639px (0) | 2021.01.26 |
댓글