반응형
페이지 구조 개념
잘 설계된 content는 더 효율적인 네비게이션과 프로세스를 허용한다.
HTML과 WAI-ARIA를 사용해, 네비게이션과 웹 지향성을 향상시킨다.
- 페이지 영역
- HTML 및 WAI-ARIA를 사용하여 웹 페이지에서 영역을 식별하고 마크업한다.
- 라벨 영역
- 사용자가 라벨 영역을 구분하고 액세스 할 수 있도록 라벨을 지정한다.
- 제목
- 제목을 추가하고 관계 및 중요도에 따라 웹 페이지의 섹션에 레이블을 지정하기 위해 논리적으로 중첩시킨다.
- 콘텐츠 구조
- 적절하고 의미있는 요소를 사용하는 방식으로 콘텐츠를 마크업한다.
<body>
<header>
<h1>Space Teddy Inc.</h1>
</header>
<nav aria-labelledby="mainnavheader">
<h2 id="mainnavheader">Navigation Menu</h2>
…
</nav>
<main>
<article>
<h2>An inside look at the new Space Teddy 6</h2>
<nav aria-labelledby="tocheader">
<h3 id="tocheader">Table of Contents</h3>
…
</nav>
<p>…</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>…</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
</ul>
<h3>Cotton Fur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>…</p>
<aside aria-labelledby="relatedheader">
<h3 id="relatedheader">Related Articles</h3>
<ul>
<li><a href="#">Related Article Title 1</a></li>
<li><a href="#">Related Article Title 2</a></li>
<li><a href="#">Related Article Title 3</a></li>
</ul>
</aside>
</article>
<aside aria-labelledby="latestheader">
<h3 id="latestheader">Latest Articles</h3>
<ul>
<li><a href="#">Latest Article Title 1</a></li>
<li><a href="#">Latest Article Title 2</a></li>
<li><a href="#">Latest Article Title 3</a></li>
</ul>
</aside>
</main>
<footer>
<p>© SpaceTeddy Inc.</p>
</footer>
</body>
'웹 프로그래밍' 카테고리의 다른 글
| 웹 폰트 경량화 (0) | 2019.08.19 |
|---|---|
| Critical Rendering Path (0) | 2019.08.08 |
| Contrast Ratio(색 대비) 배경과 폰트 색깔 (0) | 2019.08.06 |
| [CSS] :before, :after 사용하는 방법 (0) | 2019.07.31 |
| background-size (0) | 2019.07.25 |
댓글