우리가 보통 보는 페이지의 구조이다.
DBcut에서는 요새 트렌드를 잘 알 수 있다.
현 시점을 기준으로는
정형화된 페이지보다 이런식의 시각적이고 눈에 확들어오는 페이지들이 잘 나가는 것을 알 수 있다.
이러한 사이트들을 카피하기위해서는 그 구조들을 면밀히 관찰해야한다.
모양만 보고 구조화를 하게된다면 CSS에 속아 내용이 엉망이 된다.
내용을 잘 분석해서 구조화를 해야 한다.
오늘 배울 것은 바로 페이지의 구조화이다.
구조화
HTML문서중에 제일 중요한 작업인 구조화는 HTML문서의 뼈대를 만드는 작업이다.
구조화에 쓰이는 태그
header: 제목이나 타이틀에 쓰이는 태그, nav를 포함시킬 수 있음, h1태그를 써야한다.
nav: 네비게이션 바에 쓰이는 태그, 사이트 내의 모든 페이지가 들어있어야한다.(보통 list태그들을 사용한다.)
main: 몸체가 되는 태그, 본문 태그이다. 보통 section을 감싸준다.
section: main안에서 쓰일 수 있고 header안으로는 쓰지 못함 하지만 section안에 header, article, footer의 구조를 만들 수 있다.
article: 독립적인 요소, section과 비슷하나 독립적이라는 차이가 있다. 예로는 블로그 포스트나 일반 댓글이 있다.
footer: 저작권이나 주소 전화번호 이메일 등을 나타내기위해 사용된다.(small태그와 address태그를 사용해준다.)
aside: 광고, 빠른메뉴, 있어도 없어도 되는 태그이지만 있으면 좋다.(광고비 때문에 사실 제일 중요함)
종합해서 예시를 들어보자면 아래와 같다.
<body>
<!--머리부분-->
<header>
<h1>제목입니다.</h1>
</header>
<!--네비게이션부분 header로 넣을 수 있다.-->
<nav>
<h2>네비게이션 목록</h2>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
</nav>
<!--몸통부분-->
<main>
<section>
<h1>메인 몸통의 제목</h1>
<section>
<header>
<h2>첫 번째 본문의 머리부분(제목)</h2>
<p>첫 번째 본문의 대략적 설명</p>
</header>
<article>
<h3>세부 내용의 제목</h3>
<p>세부 내용의 설명</p>
</article>
<footer>
<p>마무리 설명</p>
</footer>
</section>
<section>
<h2>두번째 본문</h2>
<p>설명</p>
</section>
<section>
<h2>세번째 본문</h2>
<p>설명</p>
</section>
</section>
</main>
<!--사이드부분-->
<aside>
<h2>광고/홍보, 퀵메뉴</h2>
<p>광고,홍보등의 사이트와 무관한 내용이거나
관련있더라도 없어도 무방한 내용</p>
</aside>
<!--끝 부분-->
<footer>
<small>저작권 copyright ©</small>
</footer>
</body>
모든 태그들에는 heading태그로 묶어주는 제목이 필요하다.
왜냐하면 아웃라인을 잡을 때 기틀을 마련해야한다.
※main태그는 header의 하위태그가 아니기때문에 제목을 넣을 때 section을 한 번 입히고 heading태그(h1,h2...)로 제목을 넣어야한다.
아웃라인을 한눈에 검사할 수 있는 사이트는 https://gsnedders.html5.org/outliner/process.py이다.
위의 예시를 검사해보면 아래와 같은 구조가 나온다.
간과할 수 있는것이 구조화이지만 이렇게 구조화하는 것이 탄탄한 기반을 잡아주기 때문에 꼭 필요하다!!
공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)
그럼~ 앙 제바
'IT아카데미 > HTML' 카테고리의 다른 글
| 홈페이지 만들기 - HTML[5] (0) | 2020.05.01 |
|---|---|
| 홈페이지 만들기 - HTML[4] (0) | 2020.04.28 |
| 홈페이지 만들기 - HTML[3] (0) | 2020.04.28 |
| 홈페이지 만들기 - HTML[2] (0) | 2020.04.23 |
| 홈페이지 만들기 - HTML[1] (0) | 2020.04.22 |