HTML과 CSS로 레이아웃 실습

레이아웃을 만들고 내용으로 채우는 연습을 해보겠습니다. 예를 들어 다음과 같은 레이아웃을 만들어 보죠:

먼저 레이아웃의 기본 구조를 만들어 보겠습니다:

<div class="wrapper">
	<header>
		...
	</header>
	<div class="container">
		<aside class="left">
			left
		</aside>
		<main>
			...
		</main>
		<aside class="right">
			right
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

이제 헤더를 살펴보겠습니다. 예시에서 볼 수 있듯이, 헤더에는 사이트 이름과 메뉴가 있습니다. 이 블록들은 왼쪽 가장자리에서 동일한 거리에 위치합니다. 이런 경우에는 이 블록들을 하나의 단위로 움직이도록 공통 부모로 묶는 것이 논리적입니다:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename"></div>
			<nav></nav>
		</div>
	</header>
</div>

헤더 블록에 내용을 추가해 보겠습니다:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">home</a>
				<a href="#" class="active">blog</a>
				<a href="#">photos</a>
				<a href="#">about us</a>
				<a href="#">contacts</a>
			</nav>
		</div>
	</header>
</div>

이제 헤더 블록의 스타일을 작성해 보겠습니다. 헤더의 높이는 지정하지 마세요 - 내용에 따라 자동으로 조정되도록 합니다:

header {
	border: 1px solid black;
}
.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}

컨테이너에 세 개의 열을 만드는 코드를 작성해 보겠습니다. 콘텐츠 높이는 지정하지 마세요 - 내용에 따라 형성되도록 합니다:

.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}

이제 우리 레이아웃의 나머지 스타일을 작성하고 문제에 대한 해결책을 얻어보겠습니다:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">home</a>
				<a href="#" class="active">blog</a>
				<a href="#">photos</a>
				<a href="#">about us</a>
				<a href="#">contacts</a>
			</nav>
		</div>
	</header>
	<div class="container">
		<aside class="left">
			left
		</aside>
		<main>
			<h1>Our blog</h1>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
		</main>
		<aside class="right">
			right
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

* {
	box-sizing: border-box;
}

.wrapper {
	width: 1100px;
	margin: 30px auto;
	border: 1px solid black;
}
header {
	border: 1px solid black;
}
.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}
footer {
	padding: 30px 0;
	border: 1px solid black;
	text-align: center;
}

.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}
nav a {
	padding: 10px;
	color: blue;
	text-decoration: none;
	font: 15px Arial;
}
nav a:hover, nav a.active {
	color: red;
	text-decoration: underline;
}
main h1 {
	font: 20px "Times New Roman";
}
main p {
	margin: 10px 0;
	text-align: justify;
	font: 15px Arial;
}

실습 과제

다음 링크에서 1.zip 레이아웃을 다운로드하세요. 브라우저에서 열고 이 예시에 따라 페이지를 재현해 보세요.

다음 링크에서 2.zip 레이아웃을 다운로드하세요. 브라우저에서 열고 이 예시에 따라 페이지를 재현해 보세요.