HTML 배치(Layouts)
웹사이트는 종종 (잡지나 신문등에서 처럼) 여러 단/열(columns)으로 표시합니다.
City Gallery
London
Paris
Tokyo
Paris
Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Copyright © W3Schools.com
HTML <div> 요소를 사용한 배치
The <div> element is often used as a layout tool, because it can easily be positioned with CSS. |
다음 예는 4 <div> 요소를 사용하여 여러 단/열 배치를 만든다:
Example
<body>
<div
id="header">
<h1>City Gallery</h1>
</div>
<div
id="nav">
London<br>
Paris<br>
Tokyo
</div>
<div
id="section">
<h1>London</h1>
<p>London is the capital city of
England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London
has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named
it Londinium.</p>
</div>
<div
id="footer">
Copyright © W3Schools.com
</div>
</body>
Try
it yourself » The 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 는 웹페이지의 여러 부분을 정의하는 새로운 의미론적인(semantic) 요소들을 제공한다.:
|
다음의 예는 다중 열 배치를 생성하는데 <header>, <nav>, <section>, 과 <footer> 를 사용한다.:
Example
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo
</nav>
<section>
<h1>London</h1>
<p>London is the capital city of
England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London
has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named
it Londinium.</p>
</section>
<footer>
Copyright © W3Schools.com
</footer>
</body>
Try it yourself » The 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>
HTML Layout Using Tables
The <table> element was not designed to be a layout
tool. The purpose of the <table> element is to display tabular data. |
Layout can be achieved using the <table> element, because table elements can be styled with CSS:
Example
<body>
<table
class="lamp">
<tr>
<th>
<img
src="/images/lamp.jpg"
alt="Note"
style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a
layout tool.
</td>
</tr>
</table>
</body>
Try it yourself » The CSS:
<style>
table.lamp {
width:100%;
border:1px
solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>