HTML 레이아웃(HTML Layout)

HTML Layout Elements

웹페이지는 신문이나 잡지처럼 화면이 여러 부분으로 나뉜다.

HTML5는 여러 부분으로 나뉘어진 화면 각 부분을 element로 제공한다.

<header> - 웹 페이지의 가장 윗 부분을 정의 <nav> - 네비게이션 링크(메뉴)를 정의한다. <section> - 문서의 부분이 되는 문단을 정의 <article> - 문서의 독립적인 내용을 담는 문단을 정의 <aside> - 사이드 바처럼 내용에서 옆으로 빠진 부분 <footer> - 웹 페이지의 가장 아랫 부분을 정의 <details> - 추가적인 세부사항을 정의 <summary> - <detail>요소의 제목(요약)을 정의

HTML Layout Techniques

멀티컬럼 레이아웃을 만들기 위한 4가지 방법이 있다. 각각 장단점이 있다.

HTML Tables

<table> element는 본래 레이아웃으로 사용하기 위한 element는 아니다.

<table>은 데이터를 표로 정리하기 위해 사용하려고 만들어진 태그이다.

레이아웃으로 쓰일 수도 있으나, 수정이 쉽지 않아 코드만 복잡하게 만들 뿐이다.

레이아웃으로 절대 사용하지 않는다.

CSS Frameworks

레이아웃을 빨리 만들기 위해 프레임워크를 이용할 수 있다.

W3.CSS나 Bootstrap 등이 있다.

CSS Floats

일반적으로 CSS Float 속성을 사용해서 전체 레이아웃을 만든다. Float는 배우기 쉽다.

하지만 Floating element는 document 종속적이라, 유연성을 해친다.

CSS Flexbox

Flexbox는 CSS3의 새로운 레이아웃 모드이다.

flexbox를 사용하면 모니터 크기나 스크린 사이즈에 맞게끔 페이지가 조절되게 만들 수 있다.

하지만 IE10 이하의 버전에서는 잘 작동하지 않는다는게 단점이다.

아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_layout.asp