HTML 기본 가이드

HTML 미디어

HTML 참조 매뉴얼

HTML5 기본 가이드

HTML5 API

HTML5 미디어

HTML 레이아웃

적절한 페이지 레이아웃은 매우 중요하며, 단순히 페이지가 아름다운지 여부를 결정하는 것만이 아닌, 사용자의 경험에도 영향을 미칩니다. 나쁜 페이지 레이아웃은 사용자의 경험을 매우 나쁘게 만들고, 사용자를 유지하기 어려울 것입니다.

HTML布局的实现方式

1、可以利用Html table表格的方式，构建页面的布局，再进行内容的填充。
2、使用div，配合float或者flex对页面进行布局。

简单的table布局示例

예제

!DOCTYPE　html>
<html>
<head>
　　　　<meta　charset="UTF-8">
　　　　<title>表格</title>
</head>
<body>
　　<table　border="1"　cellspacing="1"　cellpadding="1"　align="center">
　　　　　　<tr>
　　　　　　　　　　<td　colspan="2"　align="center"　　style="background:　#0395e1">顶部导航</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　style="background:　#f25807"　align="center"　height="300px"　width="100px">
　　　　　　　　　　　　　　内<br>容<br> <br>侧<br>栏
　　　　　　　　　　</td>
　　　　　　　　　　<td　style="background:　red"　align="center"　width="400px">
　　　　　　　　　　　　　　主要内容
　　　　　　　　　　</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　colspan="2"　style="background:　darkorchid"　align="center">底部</td>
　　　　　　</tr>
　　</table>
</body>
</html>

테스트를 보세요 ‹/›

在线更多示例

使用 <div> 元素的网页布局
如何使用 <div> 元素添加布局。

使用 <table> 元素的网页布局
如何使用 <table> 元素添加布局。

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

HTML 레이아웃 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

下面的示例使用五个 div 元素来创建多列布局：

예제

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
</head>
<body>
　
<div　id="container"　style="width:520px">
　
<div　id="header"　style="background-color:#FFA300;">
<h1　style="margin-bottom:0;">主要的网页H1제목</h1></div>
　
<div　id="menu"　style="background-color:#FF9a00;height:200px;width:120px;float:left;">
<b>메뉴</b><br>
HTML<br>
CSS<br>
JavaScript</div>
　
<div　id="content"　style="background-color:#dddddd;height:200px;width:400px;float:left;">
내용이 여기에 있습니다</div>
　
<div　id="footer"　style="background-color:#FFA300;clear:both;text-align:center;">
저작권 © 기본 강의(oldtoolbag.com)</div>
　
</div>
　
</body>
</html>

테스트를 보세요 ‹/›

위의 HTML 코드는 다음과 같은 결과를 생성합니다：

HTML 레이아웃 - 테이블 사용

HTML <table> 태그를 사용하여 레이아웃을 생성하는 것은 간단한 방법입니다。

대부분의 사이트는 <div> 또는 <table> 요소를 사용하여 다중 열을 생성할 수 있습니다. CSS는 요소를 정위치시키거나 페이지에 배경 및 다양한 색상을 만들기 위해 사용됩니다。

HTML 테이블을 사용하여 아름다운 레이아웃을 만들 수 있지만, 테이블을 설계하는 목적은 표시된 데이터를 표시하는 것입니다 - 테이블은 레이아웃 도구가 아닙니다！

아래의 예제는 세 행 두 열의 테이블을 사용합니다 - 첫 번째와 마지막 행은 colspan 속성을 사용하여 두 열을 가로로 횡단합니다：

예제

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
</head>
<body>
　
<table　width="520"　border="0">
<tr>
<td　colspan="2"　style="background-color:#FFB500;">
<h1>주요 웹 페이지 H1제목</h1>
</td>
</tr>
　
<tr>
<td　style="background-color:#FFB700;width:120px;">
<b>메뉴</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td　style="background-color:#DDDDDD;height:200px;width:400px;">
내용이 여기에 있습니다</td>
</tr>
　
<tr>
<td　colspan="2"　style="background-color:#FFB500;text-align:center;">
저작권 © 기본 강의(oldtoolbag.com)</td>
</tr>
</table>
　
</body>
</html>

테스트를 보세요 ‹/›

HTML 레이아웃 - 필수 CSS

CSS를 사용하는 가장 큰 장점은, CSS 코드를 외부 스타일 시트에 저장하면 사이트가 유지보수가 더 쉬워지고, 스타일 정의의 유연성이 높아집니다. CSS 스타일 시트 파일을 수정하면 모든 페이지의 레이아웃을 변경할 수 있습니다. CSS에 대한 더 많은 지식을 배우기 위해 우리의CSS 강의。

HTML 레이아웃 태그

태그	설명
<div>	문서 블록을 정의합니다. 블록급(block-level)
<span>	span을 정의하여 문서 내의 인라인 요소를 조합합니다.

HTML 비디오(Video) 재생 HTML 블록