동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
HTML 레이아웃 요소
웹사이트는 종종 잡지나 신무과 같이 여러 열에 내용을 표시합니다.
HTML5는 웹페이지의 다른 부분을 정의하는 새로운 의미 요소를 제공합니다.
<header> |
|
<nav> |
|
<section> |
<aside> |
<article> |
|
<footer> |
|
HTML 레이아웃 기법
여러 열 레이아웃을 만드는 방법에는 네가지가 있습니다. 각 방법마다 장단점이 있습니다.
어느 것을 선택할 것인가?
HTML 표
<table>요소는 레이아웃 도구로 설계되지 않았습니다. <table>요소의 목적은 표형식의 데이타를 표시하는 것입니다. 따라서 페이지 레이아웃에 <table>요소를 사용하면 안됩니다. 후에 사이트를 재설계하는 것을 어렵게 합니다.
CSS 프레임웍
레이아웃을 빠르게 만들려면 부트스트랩(Bootstrap)같은 프레임웍을 사용할 수 있습니다.
CSS float
CSS float속성을 사용하여 전체 웹 레이아웃을 수행하는 것이 일반적입니다. 플로트는 배우기 쉽습니다.
단점 : float속성은 문서 흐름에 묶여 있어 유연성에 해를 미칠 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>도시갤러리</h1>
</header>
<nav>
<ul>
<li><a href="#">런던</a></li>
<li><a href="#">파리</a></li>
<li><a href="#">서울</a></li>
</ul>
</nav>
<article>
<h1>서울</h1>
<p>서울특별시(서울特別市, Seoul)는 대한민국의 수도이자 최대 도시이다. </p>
<p>동서 간의 거리는 36.78 km, 남북 간의 거리는 30.3 km이며, 넓이는 605.25 km²이다.</p>
</article>
<footer>Copyright © 365ok.co.kr</footer>
</div>
</body>
</html>
CSS Flexbox
flexbox는 CSS3의 새로운 레이아웃 모드입니다.
flexbox를 사용하면 페이지 레이아웃이 다른 화면 크기와 다른 디스플레이 장치를 수용해야 할 때 요소가 예상대로 작동합니다.
단점 : IE10이하에서는 작동하지 않습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
}
header {background: black;color:white;}
footer {background: #aaa;color:white;}
.nav {background:#eee;}
.nav ul {
list-style-type: none;
padding: 0;
}
.nav ul a {
text-decoration: none;
}
@media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>
<div class="flex-container">
<header>
<h1>도시 갤러리</h1>
</header>
<nav class="nav">
<ul>
<li><a href="#">런던</a></li>
<li><a href="#">파리</a></li>
<li><a href="#">서울</a></li>
</ul>
</nav>
<article class="article">
<h1>서울</h1>
<p>서울특별시(서울特別市, Seoul)는 대한민국의 수도이자 최대 도시이다.</p>
<p>면적은 대한민국 국토의 0.6%에 불과하지만, 대한민국 전체 인구의 5분의 1에 육박하는 주민이 살고 있어서 인구밀도가 매우 높다. </p>
<p>1986년 아시안 게임, 1988년 하계 올림픽, 2002년 FIFA 월드컵, 2010년 서울 G20 정상회의를 개최한 국제적인 도시이다.</p>
</article>
<footer>Copyright © 365ok.co.kr</footer>
</div>
</body>
</html>
등록된 댓글이 없습니다.