HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법

HTML

HTML5 CSS 이용해 페이지 레이아웃 만드는 방법

 

환경: Eclipse Mars

 

HTML5 는 문서 구조를 위한 마크업으로 header, footer, nav, article, section, aside 를 제공합니다. 이것들을 CSS 와 함께 이용하면 HTML 문서 레이아웃을 쉽게 잡을 수 있습니다. 태그는 단순히 구분을 위한 용도로 사용합니다. 이전에는 CSS id class 로 만들어서 배치를 했지만 HTML5 부터는 태그를 지원하기 때문에 훨씬 소스의 가독성은 높아졌습니다.

 

각 태그별로 어떤 내용들을 배치할지 간략하게 설명을 드리겠습니다. 반드시 내용대로 배치를 해야 되는 것은 아닙니다. 일반적인 사용 패턴을 이야기 하는 것이며 아래 처럼 구분해서 적용해 놓으면 편집할 때 용의합니다.

 

l  <header> : 문서의 서론이나 섹션의 목차, 검색, 로고 등이 들어가는 곳이다.

l  <hgroup> : 제목을 정의하며 다른 섹션에서 서브 제목으로 이용된다.

l  <section> : 글을 구분하는데 사용한다. 단락의 개념으로 보면 된다.

l  <article> : 컨텐츠의 내용이 들어가는 부분이다.

l  <nav> : 네비게이션 영역이며 페이지 이동을 위한 메뉴들이 모여 있는 곳이다.

l  <aside> : 보조 메뉴나 광고를 배치하는 곳이다.

l  <footer> : 저작자의 이름이나 문서의 날짜, 연락처 등이 들어간다.

 

각 태그를 CSS 로 화면에 배치한 결과 입니다. 양 사이드에 바를 위치 시키고 상단과 하단에 header, footer 를 배치했습니다. 일반적으로 사용하는 패턴이죠. 이 위치는 사용자가 필요에 따라 변경하면 됩니다. 그럼 아래 그림과 같이 CSS 로 배치해 볼까요.

HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법

 

먼저 태그들을 사용해서 화면을 꾸며 보겠습니다. CSS 를 적용하지 않으면 자동 줄 바꿈이 되어서 아래 그림처럼 배치가 될 것입니다. 이것을 위의 그림처럼 배치해 보려고 합니다

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title>HTML5</title>
</head>
<body>
	<div id="wapper">
		<!--헤더시작-->
		<header>
			<p>header</p>
		</header>
		<!--네비게이션-->
		<nav>
			<p>nav</p>
			<ul>
				<li><a href="">link</a></li>
				<li><a href="">link</a></li>
				<li><a href="">link</a></li>
			</ul>
		</nav>
		<!--콘텐츠부분-->
		<section>
			<p>section</p>
			<article>
				<p>article</p>
			</article>
		</section>
		<!--사이드바-->
		<aside>
			<p>aside</p>
		</aside>
		<!--풋터-->
		<footer>footer</footer>
	</div>
</body>
</html>

HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법

 

header 바로 아래 3개의 요소, navigation, section, aside 를 가로로 배치하기 위해 float: left 를 주었습니다. 그럼 결과 화면에서처럼 전체 길이가 넘어가지 않는다면 가로로 배치가 됩니다. 두 번째는 footer 에서 줄 바꿈이 되어야 하기 때문에 clear: both 를 해 주었습니다. 이 두 개의 속성값이 주요 포인트입니다. 나머지는 넓이와 margin, padding 값을 준 것뿐입니다. 이런 식으로 CSS 값만 변경하시면 다양한 위치의 레이아웃을 만들 수 있습니다

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title>HTML5</title>
<style type="text/css">
	body {
		text-align: center;
		color: #FFF;
		width: 900px;
	}
	div#wapper {
		width: 100%;
		text-align: left;
		min-height: 300px;
		margin: 0 auto;
	}
	header, footer, nav, aside, section {
		border: 1px solid #999;
		margin: 5px;
		padding: 10px;
	}
	header {
		height: 50px;
		background-color: red;
	}
	nav, section, aside {
		float: left;
		height: 200px;
	}
	nav {
		background-color: goldenrod;
		width: 100px;
	}
	section {
		background-color: green;	
		width: 604px; 
	}
	aside {
		background-color: goldenrod;
		width: 100px; 
	}
	footer {
		height: 50px;
		background-color: blue;
		position: relatiev;
		clear: both;
	}
	article {
		width: 90%;
		margin: 20px;
		background-color: #999;
	}
</style>

</head>
<body>
	<div id="wapper">
		<!--헤더시작-->
		<header>
			<p>header</p>
		</header>
		<!--네비게이션-->
		<nav>
			<p>nav</p>
			<ul>
				<li><a href="">link</a></li>
				<li><a href="">link</a></li>
				<li><a href="">link</a></li>
			</ul>
		</nav>
		<!--콘텐츠부분-->
		<section>
			<p>section</p>
			<article>
				<p>article</p>
			</article>
		</section>
		<!--사이드바-->
		<aside>
			<p>aside</p>
		</aside>
		<!--풋터-->
		<footer>footer</footer>
	</div>
</body>
</html>

HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법


저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군