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 튜토리얼을 방문하세요.

팁: 고급 레이아웃을 만드는 데는 시간이 많이 걸릴 수 있으므로 템플릿을 사용하는 것이 빠른 옵션입니다. 검색 엔진을 통해 사용할 수 있는 무료 웹사이트 템플릿이 많이 있습니다(이러한 사전 구축된 웹사이트 레이아웃을 사용하고 최적화할 수 있습니다).

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전