【CSS】홈페이지의 레이아웃 / 영역 만들기<div><#id selector><float>
HTML 페이지의 레이아웃을 결정할 때 HTML 페이지에서 블록을, 상하 좌우의 위치에 <div>와 <float>가 자주 사용됩니다.
각 영역은 <div>〜</div> 태그로 둘러싸인 범위로 나타냅니다.
<div>는 특별한 의미는 가지지 않습니다만, 블록 요소로 거의 모든 다른 태그를 포함할 수 있기 때문에, 제목, 단락, 목록, 양식 등의 하나의 그룹으로써 사용됩니다.
대체로 홈페이지의 레이아웃은 아래와 같이 <header>, <left>, <middle>, <right>, <footer> 범위로 구성됩니다.
각 영역을 만들려면 일반적으로 CSS(스타일 시트)에서 "id 선택자 이름"을 지정하는 방법입니다. 선택기 이름에는 "#"을 붙입니다. <style>〜</style&에는 id선택자 이름을 결정하고, 속성과 값을 선언합니다.
▼ 아래의 경우는 상하 좌우와 중앙의 5개입니다.
<!doctype html>
<head>
<title>CSS | 레이아웃의 배치</title>
<style>
#header
{ width:480px;
height:74px;
background-color:yellow;
}
#left {
width:160px;
height:100px;
background-color:red;
float:left;
}
#middle {
width:160px;
height:100px;
background-color:blue;
float:left;
}
#right {
width:160px;
height:100px;
background-color:green;
float:left;
}
#footer{
width:480px;
height:100px;
background-color:pink;
clear:both;
}
</style>
</head>
또한 <body>〜</body>는 실제 홈페이지에 표시되는 코드를 넣습니다. <div id="id 선택자 이름">〜</div> 형태로 코딩합니다.
<div> 요소는 블록 레벨 요소이므로 전후에 줄 바꿈이 포함됩니다.
<body> <div id="header">HEADER</div> <div id="left">LEFT</div> <div id="middle">MIDDLE</div> <div id="right">RIGHT</div> <div id="footer">FOOTER</div> </body> </html>
스폰서 링크