인터넷에서는 어디에서나 신문과 같은 형식화된 칼럼을 볼 수 있습니다.
대부분의 웹사이트는 <div> 또는 <table> 요소를 사용하여 여러 열을 만들 수 있습니다. CSS는 요소를 배치하거나 페이지의 배경과 다채로운 모양을 만드는 데 사용됩니다.
<div> 요소를 사용하여 레이아웃
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#00FFFF;">
<h1 style="margin-bottom:0;">标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
</div>
<div id="content" style="background-color:#00FF00;height:200px;width:400px;float:left;">
内容</div>
<div id="footer" style="background-color:#FF00FF;clear:both;text-align:center;">
版权 © php.cn</div>
</div>
</body>
</html>
레이아웃에 테이블 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © php.cn</td>
</tr>
</table>
</body>
</html>
HTML 레이아웃 - 유용한 팁
팁: CSS 사용의 가장 큰 장점은 CSS 코드를 외부 스타일 시트에 저장하면 사이트 유지 관리가 더 쉬워진다는 것입니다. 단일 파일을 편집하면 모든 페이지의 레이아웃을 변경할 수 있습니다. CSS에 대해 자세히 알아보려면 CSS 튜토리얼을 방문하세요.
팁: 고급 레이아웃을 만드는 데는 시간이 많이 걸리므로 템플릿을 사용하는 것이 빠른 선택입니다. 검색 엔진을 통해 사용할 수 있는 무료 웹사이트 템플릿이 많이 있습니다(이러한 사전 구축된 웹사이트 레이아웃을 사용하고 최적화할 수 있습니다).
다음 섹션