HTML 레이아웃
- 이전 페이지 HTML 헤더
- 다음 페이지 HTML 반응형 디자인
웹사이트는 종종 다중 열로 내용을 표시합니다(예: 잡지와 신문처럼).
<div> 요소를 사용하는 HTML 레이아웃
주의:<div> 요소는 레이아웃 도구로 자주 사용되며, CSS를 통해 쉽게 위치를 설정할 수 있습니다.
이 예제는 네 개의 <div> 요소를 사용하여 다중 열 레이아웃을 생성합니다:
예제
<body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> 런던<br> 파리<br> 도쿄<br> </div> <div id="section"> <h1>London</h1> <p> 런던은 영국의 수도이자, 영국에서 인구가 가장 많은 도시입니다. 13백만 명 이상의 인구를 보유한 대도시 지역으로 구성되어 있습니다. </p> <p> 테임즈 강 위에 서 있는 런던은 2000년 동안 주요 도시로 성장했습니다. 이곳의 역사는 로마인이 랭디니움이라고 명명한 창립부터 시작됩니다. </p> </div> <div id="footer"> Copyright codew3c.com </div> </body>
CSS：
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
HTML5를 사용한 웹 레이아웃
HTML5가 제공하는 새로운 의미적 요소는 웹 페이지의 다른 부분을 정의합니다:
HTML5 의미 요소
| header | 문서나 섹션의 页眉를 정의합니다 |
| nav | 导航链接의 컨테이너를 정의합니다 |
| section | 문서 내의 섹션을 정의합니다 |
| article | 독립적인 자체 포함된 기사를 정의합니다 |
| aside | 내용 외의 내용(예:サイ드바)을 정의합니다 |
| footer | 문서나 섹션의 页脚을 정의합니다 |
| details | 추가적인 상세정보를 정의합니다 |
| summary | details 요소의 제목을 정의합니다 |
이 예제는 <header>, <nav>, <section>, 및 <footer>를 사용하여 다중 열 레이아웃을 생성합니다:
예제
<body> <header> <h1>City Gallery</h1> </header> <nav> 런던<br> 파리<br> 도쿄<br> </nav> <section> <h1>London</h1> <p> 런던은 영국의 수도이자, 영국에서 인구가 가장 많은 도시입니다. 13백만 명 이상의 인구를 보유한 대도시 지역으로 구성되어 있습니다. </p> <p> 테임즈 강 위에 서 있는 런던은 2000년 동안 주요 도시로 성장했습니다. 이곳의 역사는 로마인이 랭디니움이라고 명명한 창립부터 시작됩니다. </p> </section> <footer> Copyright codew3c.com </footer> </body>
CSS
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
테이블을 사용한 HTML 레이아웃
주의:<table> 요소는 레이아웃 도구로 설계되지 않았습니다.
<table> 요소는 테이블화된 데이터를 표시하는 데 사용됩니다.
<table> 요소를 사용하면 레이아웃 효과를 얻을 수 있습니다. 이는 CSS를 통해 테이블 요소의 스타일을 설정할 수 있기 때문입니다:
예제
<body>
<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
테이블 요소는 레이아웃 도구로 설계되지 않았습니다.
</td>
</tr>
</table>
</body>
CSS
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp td {
width:40px;
}
</style>
- 이전 페이지 HTML 헤더
- 다음 페이지 HTML 반응형 디자인
