접 접근성이란?
장애여부와 상관없이 모든 사람이 사이트를 동일한 경험을 하는 것 (정보를 얻을 수 있게 얻는 것)
가이드 바로가기 https://accessibility.naver.com/accessibility
ol, li - 순서가 있는 목록
ul, li- 순서가 없는 목록
dl,dt,dd - 설명 목록을 만듦
대체로 li나 dl을 사용하는데, dl을 사용하면 하위 요소를 dt, dd로 두 개로 구분할 수 있다.
dt는 이름, dl은 값이라서 gnb2를 특정하는데도 의미와 의도에 문제가 없다. (시멘틱 마크업 OK)
키보드로 이동할 때, dl> dt> dd로 올바르게 움직인다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/layout.css" type="text/css">
</head>
<body>
<header>
<div>
<h1><a href="/">로고</a></h1>
<nav id="top-menu">a
<dl>
<dt><a href="/info/intro" title="센터소개">센터소개</a></dt>
<dd>
<a href="/info/intro" title="센터소개">센터소개</a>
<a href="/info/history" title="센터소개">연혁 및 조직</a>
<a href="/info/map" title="찾아오시는 길">찾아오시는 길</a>
</dd>
</dl>
<dl>
<dt><a href="/guide/price" title="이용안내">이용안내</a></dt>
<dd>
<a href="/guide/car" title="운영현황">운영현황</a>
<a href="/guide/price" title="이용안내">이용안내</a>
<a href="/guide/app" title="어플리케이션안내">어플리케이션안내</a>
<a href="/guide/web" title="홈페이지접수안내">홈페이지접수안내</a>
</dd>
</dl>
<dl>
<dt><a href="/reserv/booking">인터넷접수</a></dt>
<dd>
<a href="/reserv/booking">예약 즉시콜</a>
<a href="/reserv/list">이용내역</a>
<a href="/reserv/bookmark">즐겨찾기</a>
</dd>
</dl>
<dl>
<dt><a href="/cs/sub01">고객센터</a></dt>
<dd>
<a href="/cs/sub01">공지사항</a>
</dd>
</dl>
<ul>
<li><a href="/my/sub02">로그인</a></li>
<li><a href="/my/join">회원가입</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
css는 아래와 같다. 중요한 부분은 주석에 적었다.
@charset "utf-8";
body {font-size: 16px}
header {position:sticky; width:100%; height: 80px; top: 0; background: rgba(28,28,30,.8); z-index: 100}
header div {position: relative; width: 1200px; margin: 0 auto; font-family: 'NanumSquare', sans-serif}
header div h1 {position: absolute; top: 5px; left: 10px; width: 210px; height: 70px; text-indent: -9000px; background-image: url("../images/logo_gunpo.png")}
header div h1 a {display: block; width: inherit; height: inherit}
header div nav {position:absolute; top: 25px; left: 25%; width: 70%; display: flex; justify-content: flex-start; z-index: 50}
header div nav dl {position: relative; min-width: 160px; line-height: 30px; text-align: center}
header div nav dl dt {font-size: 1.2em; height: 55px; line-height: 35px;}
header div nav dl dt a { color: #fff}
header div nav dl dt a:hover {color: #33d7de}
/* 1. 초기화면에서 dd는 안 보임 */
header div nav dl dd {display: none; padding:10px 0; border-radius:0 0 10px 10px; border-top: none; background: rgba(28,28,30,.8)}
header div nav dl dd a {display: block; margin-bottom: 10px; white-space: nowrap; color: #fff;}
header div nav dl dd a:hover {color: #33d7de}
header div nav dl:hover dt {color: #33d7de}
/* 2. dl hover시, dd 보임 */
header div nav dl:hover dd{display: block}
/* 3. dl의 하위요소(dt, dd)에 fouce되었을때, dd 보임 */
header div nav dl:focus-within dd{display: block}
header div nav > ul {position: relative; display: flex; align-items:flex-start; padding-left: 50px}
header div nav > ul li {margin-right: 30px; line-height: 30px}
header div nav > ul li a {display:block; padding:0 5px; white-space: nowrap; color: #fff; background: #2f2f32}
header div nav > ul li a:hover {color: #fff}:foucus-within이 아주 요긴했다.
728x90
반응형