Twitter Markup Challenge
1. 구조적인 웹 문서 설계
웹 문서를 설계한다는 거는 글의 구조를 쉽게 파악하는 것이다. 글의 전개 흐름을 파악하고 정보의 위계질서를 파악할 수 있다. 이럴 땐 사용하는 거는 Sectioning Elements이다. `<section>`, `<article>`, `<nav>`, `<aside>` , `<header>`, `<main>`, `<footer>`로 구성되어 있다.
상황에 맞는 적절한 Sectioning Elements를 올바르게 사용하는 방법으로 구조적으로 아름답게 웹 문서 설계를 작성해야 한다.
- 검색 최적화에 도움이 된다.
2. 올바른 Sectioning Element
공통적으로 지켜야할 룰
<section>
<h1> 섹션의 제목 </h1>
<p> ... </p>
</section>
<nav>
<h1> 메뉴 </h1>
<ul>
<li>
<a href="#"> 링크 </a>
</li>
</ul>
</nav>
`Sectioning Element` 내에는 반드시 `<heading>`를 작성해야 한다. 눈에 보이지 않아도 제목을 반드시 명시를 해줘야 어떤 구조인지 정보를 좀 더 명확하게 전달할 수 있다.
3. 페이지의 구조 설계
그동안은 최소한의 기능/의미를 갖는 가장 작은 단위로 쪼개는 방식으로 여전히 유효했지만 전체 웹페이지 만들려면 그 전에 구획을 나눠야한다. 논리적으로 긴밀하게 관련된 집합체이다. 문서를 작성하는 사람의 관점에 따라 다 다르다.
🎈 Header
페이지에서 도입부 시작부를 맡고 있는 부분이다. 보통 문서 페이지 또는 각 섹션의 가장 최상단 부분에는 제목 영역을 담당할 때 사용하는 태그가 `<header>`이다. 남용하지 않는 범위 내에서 도입부를 나타낸다고 판단이 되면 `<header>`를 거침없이 사용하면 된다.
🎈 Global Navigation
`<nav>`는 문서 간에 이동할 수 있는 요소를 포함하는 경우가 핵심 메뉴이다.
🎈 Main
구조상 가장 핵심적인 정보 컨텐츠를 담고 있는 거를 묶어줄 때 사용하는 `<main>`이다. 그래서 단 한 개밖에 사용을 못한다. 여기서 부터 본격적으로 컨텐츠가 시작되는 거를 알리기 위한 신호탄이다.
🎈Tweet form
논리적으로 완결된 집합체되는 부분은 `<div>`보다 `<section>`이다. 문법적으로 올바르게 `<section>`을 사용하기 위해서는 반드시 `<heading>`를 적어줘야 한다.
🎈 Timeline
🎈 Tweet
뉴스 기사나 블로그, Tweet의 피드같은 내용 정보 컨텐츠로서 완결성이 있는 독립적인 컨텐츠의 경우 `<section>`보다 `<article>`를 사용하는게 좀 더 늬앙스를 전달하기 쉽다. `<section>`랑 `<article>`는 차이가 없지만 무엇을 사용하든 간에 이 태그를 왜 사용했는지에 대해 명확하게 설명만 할 수 있으면 된다.
🎈 Aside
본문 내용과는 직접적인 관련성이 없어서 위젯이라든가 배너 광고라든가 사이드 바에서 따로 역할을 하는 늬앙스를 살릴 때 사용한다.
🎈 Footer
4. 마무리
