HTML 레이아웃 Layout

레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소 입니다.

오늘은 레이아웃에 대해 공부하겠습니다.

레이아웃 방식에는 div요소를 이용하는 것, html5 레이웃, table 요소를 이용하는 것이 있지만

우리는 div 요소를 이용한 레이아웃에 대해서만 공부하겠습니다

이는 CSS 스타일을 손쉽게 적용할 수 있으므로 자주 사용됩니다.

예

<div id="header"><h2>header 영역 </h2></div>

<div id="section"><p>section영역 </p></div>

<div id="footer"><h2>footer 영역 </h2></div>

<head>

<title>laylout</title>

<style>

#header{ background-color:grey;height:100px;}

#nav{ background-color:#339999; color:red; width:200px; height:300px;float:left;}

#section{ width:200px; text-align:left;float:left;pedding:10px;}

#footer{ background-color:#ffcc00;height:100px;clear:both;}

#header, #nav, #section, #footer {text-align:center;}

</style>

코딩 예제를 따라가 보지만 잘 모르겠네요

ㅋ

나혼자산다 외 예능 리뷰