출처는 tcpschool.com 입니다.
오늘은 HTML 레이아웃...
블로그나 티스토리 메인화면 꾸밀 때 활용하기 좋을듯
HTML 레이아웃 (Layout)
레이아웃 : 특정 공간에 여러 구성 요소를 보기 좋게 배치하는 작업
1. div 요소를 이용한 레이아웃
CSS 스타일을 쉽게 적용할 수 있음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Layouts</title>
<style>
#header {
background-color:lightgrey;
height:100px;
}
#nav {
background-color:#339999;
color:white;
width:200px;
height:300px;
float:left;
}
#section {
background-color:lightyellow;
width:200px;
text-align:left;
float:left;
padding:10px;
}
#section2 {
background-color:lightpink;
width:200px;
text-align:left;
float:left;
padding:10px;
}
#footer {
background-color:#FFCC00;
height:100px;
clear:both;
}
#header, #nav, #section, #section2 #footer { text-align:center; }
#header, #footer { line-height:100px; }
#nav, #section, #section2 { line-height:240px; }
</style>
</head>
<body>
<h1>div 요소를 이용한 레이아웃</h1>
<div id="header">
<h2>HEADER 영역</h2>
</div>
<div id="nav">
<h2>NAV 영역</h2>
</div>
<div id="section">
<p>SECTION 영역</p>
</div>
<div id="section2">
<p>SECTION2 영역</p>
</div>
<div id="footer">
<h2>FOOTER 영역</h2>
</div>
</body>
</html>
>> 결과
section 영역이 왜 저렇게 아래가 남는지 모르겠다..ㅠ
오늘은 좀 어렵다...
2. HTML 5 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Layouts</title>
<style>
header {
background-color:lightgrey;
height:100px;
}
nav {
background-color:#339999;
color:white;
width:200px;
height:300px;
float:left;
}
section {
width:200px;
text-align:left;
float:left;
padding:10px;
}
footer {
background-color:#FFCC00;
height:100px;
clear:both;
}
header, nav, section, footer { text-align:center; }
header, footer { line-height:100px; }
nav, section { line-height:240px; }
</style>
</head>
<body>
<h1>HTML5 레이아웃</h1>
<header>
<h2>HEADER 영역</h2>
</header>
<nav>
<h2>NAV 영역</h2>
</nav>
<section>
<p>SECTION 영역</p>
</section>
<footer>
<h2>FOOTER 영역</h2>
</footer>
</body>
</html>
>> 결과
3. table 요소를 이용한 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Layouts</title>
</head>
<body>
<h1>table 요소를 이용한 레이아웃</h1>
<table width="100%" style="text-align:center; border:none">
<tr>
<td colspan="2" style="background-color:lightgrey">
<h2>HEADER 영역</h2>
</td>
</tr>
<tr>
<td style="background-color:#339999; color:white; width:20%">
<h2>NAV 영역</h2>
</td>
<td style="height:200px; text-align:left">
<p>SECTION 영역</p>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFCC00">
<h2>FOOTER 영역</h2>
</td>
</tr>
</table>
</body>
</html>
>> 결과
출처 : TCP스쿨
'[1일1코딩]' 카테고리의 다른 글
| 코딩독학 HTML form 요소 2 feat. tcpschool (2) | 2018.05.15 |
|---|---|
| 코딩독학 HTML form 요소 1 feat. tcpschool (0) | 2018.05.14 |
| 코딩독학 HTML iframe 요소 feat. tcpschool (2) | 2018.05.10 |
| 코딩독학 HTML 블록과 인라인 feat. tcpschool (0) | 2018.05.09 |
| 코딩독학 HTML 테이블 feat. tcpschool (0) | 2018.05.04 |