구조적인 웹 문서 설계
올바른 Sectioning Elements 사용방법
- 종류 : section, article, nav, aside
- 사용방법 : 주제, 제목 언급이 필요함
따라서 반드시 내부에 heading tag 를 사용해야 한다.
트위터 마크업 Challange
최소한의 기능/의미를 갖는 가장 작은 단위로 쪼개기
1. 각각의 역할과 목적에 맞게 구획을 나누기
2. 적합한 sectioning 태그 배분하기
sectioning 하기
먼저 전체적인 웹사이트에서 역할과 목적에 맞게 구획을 나눈다.
크게는 3덩어리, 작게는 5-6덩어리 정도로 나눌 수 있다.
왼쪽 메뉴 바 부분
header 태그
먼저 왼쪽의 가장 윗 부분의 트위터 로고가 가장 중요한 head 라고 할 수 있으니 다음과 같이 header 태그를 이용할 수 있다.
header 태그 내부에는 반드시 heading 태그를 넣어주도록 한다.
navigation 태그
문서간 이동할 수 있는 부분을 작성할 때 사용될수 있으며 역시 마찬가지로 heading 태그를 함께 써줘야한다.
Main part
다른 태그들과 달리 하나의 html 문서에서는 단 하나의 <main> 태그를 사용할 수 있다.
따라서 본문의 가장 핵심적인 내용을 묶어줄 때만 사용하도록 한다.
header - main - footer 의 병렬적인 구조로 작성하는 것이 서론-본론-결론과 같이 좋은 방법이라 할 수 있겠다.
main 에서 header 부분
버튼을 누르면 나타나는 drop box 까지 넣어 보았다.
form 파트
<section>태그를 사용한다
sectioning element 이므로 반드시 <h> 태그를 사용한다.
오로지 트윗 작성만을 위한 공간이므로 section 을 나누기에 확실성을 띈다.
Timeline 파트
논리적으로 완결성 있는 집합체로 볼 수 있으므로 <section> 태그를 사용해 줄 수 있다.
Tweet 파트
<article>또한 내부에<h>태그를 가지고 있어야 한다.
<article>은 컨텐츠 자체가 정보로서의 완결성을 가지고 있는 경우 사용한다. ex)블로그, 뉴스, 트윗.
<header>와 반대되는 의미로 <footer>태그가 있다
Aside
본문 내용과는 동떨어진 파트.
대부분 사이드쪽에 있고 ad 가 붙어있는 경우가 많다.
반드시 <h>태그를 내부에 가지고 있어야 한다.
Footer
