HTML 레이아웃
웹페이지 레이아웃은 웹사이트의 외관을 개선하는 데 매우 중요합니다.
웹페이지 레이아웃을 신중하게 디자인하세요.
웹사이트 레이아웃
대부분의 웹사이트는 콘텐츠를 여러 열로 배열합니다(잡지나 신문처럼).
대부분의 웹사이트는 <div> 또는 <table> 요소를 사용하여 여러 열을 만들 수 있습니다. CSS는 요소를 배치하거나 페이지의 배경과 다채로운 모양을 만드는 데 사용됩니다.
HTML 테이블 태그를 사용하여 아름다운 레이아웃을 디자인할 수 있지만 테이블 태그는 레이아웃 도구로 권장되지 않습니다. 테이블은 그렇지 않습니다. 레이아웃 도구.
HTML 레이아웃 - <div> 요소 사용
div 요소는 HTML 요소를 그룹화하는 데 사용되는 블록 수준 요소입니다.
다음 예에서는 5개의 div 요소를 사용하여 다중 열 레이아웃을 만듭니다.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#cc6666;}
div#menu {background-color:#99CCFF; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>网站头部图片，标题</h1>
</div>
<div id="menu">
<h2>菜单</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">内容</div>
<div id="footer">底部</div>
</div>
</body>
</html>HTML 레이아웃 - 테이블 사용
HTML <table> 태그를 사용하면 레이아웃을 쉽게 만들 수 있습니다.
<div> 또는 <table> 요소를 사용하여 여러 열을 만들 수 있습니다. CSS는 요소를 배치하거나 페이지의 배경과 다채로운 모양을 만드는 데 사용됩니다.
팁: HTML 테이블을 사용하여 아름다운 레이아웃을 만들 수 있더라도 테이블은 테이블 형식의 데이터를 표시하도록 설계되었습니다. 테이블은 레이아웃 도구가 아닙니다.
다음 예에서는 3개의 행과 2개의 열이 있는 테이블을 사용합니다. 첫 번째와 마지막 행은 colspan 속성을 사용하여 두 열을 확장합니다.
예
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>网站头部图片，标题</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
内容</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
标题</td>
</tr>
</table>
</body>
</html>
두 가지 방법은 다르지만 효과는 동일합니다.
HTML 레이아웃 - 유용한 팁
팁: CSS 사용의 가장 큰 이점은 CSS 코드를 외부 스타일 시트에 저장하면 사이트를 유지 관리하기가 더 쉽다는 것입니다. 단일 파일을 편집하면 모든 페이지의 레이아웃을 변경할 수 있습니다. CSS에 대해 자세히 알아보려면 CSS 튜토리얼을 방문하세요.
팁: 고급 레이아웃을 만드는 데는 시간이 많이 걸릴 수 있으므로 템플릿을 사용하는 것이 빠른 옵션입니다. 검색 엔진을 통해 사용할 수 있는 무료 웹사이트 템플릿이 많이 있습니다(이러한 사전 구축된 웹사이트 레이아웃을 사용하고 최적화할 수 있습니다).
다음 섹션