HTML 한바퀴 ④레이아웃

●레이아웃

tcp에서는 레이아웃을 잡는 법을 3가지로 나눴다. div로 나누는 법, html5 태그로 쓰는 법, table로 짜는법. 결과부터 말하자면 이 세개 중 제일 최신의 방법은 html5 태그를 쓰는법이다. div로 나누는 법은 각각의 div에 id, class를 부여한 제작자는 이 부분이 상단인지 컨텐츠인지 주소 정보인지 등등을 말하지 않아도 알지만 읽는 컴퓨터는 이게 뭔지 모르는 상태에서 페이지 읽기 때문에 의미 파악에 어렵다. 쉽게 말해 컴퓨터도 파악을 해야 검색 시 잘 보여줄 수 있다. 그래서 레이아웃만을 위한 태그를 만든게 html5이다. 웹상에는 곡선이 없다. 모든걸 네모로 수치화?하는데 table은 이 네모네모의 세상에서 참 짜기 쉽게 되어있는 판이다. 페이지 전체를 table로 보고 중간중간 확장시킬 부분만 해주면 별 문제가 없어보인다. 하지만 이 table로 만든 판은 수정이 매우 어렵고 table태그는 레이아웃 용이 아니다. 아 그럼 HTML5만 알면되고 배우면 되지 않나? 싶겠지만 옛날에는 이렇게 작업했었으니 알아두는게 좋겠지??? 혹시 마주할 수도 있으니까 말이다.

 

 

 

●html5의 레이아웃을 위한 요소.

<header>	html 문서나 섹션에 대한 헤더를 정의함. 제일 상단이나 메인 쪽을 보여줄 때 주로 이용.
<nav>	탐색 링크
<section>	문서를 큼직하게 나눌때 이용.
<article>	독립적인 하나의 글. 페이지에 이미지+글. 이렇게 나눌때 쓴다.
<aside>	페이지 부분 외의 콘텐츠. 사이드배너나 사이드 에 넣는 뭔가 쓸때?
<footer>	푸터엔 문서 정보가 주로 들어감.

얘네들을 잘 사용해서 레이아웃을 잡는게 페이지 만드는데 있어서 기초공사가 된다.