CSS에서의 다중 래퍼 레이아웃 패턴

개발을 하다 보면, 블록 전체 배경은 페이지 너비에 꽉 차게 하고, 그 안의 콘텐츠는 중앙에 정렬하는 디자인 레이아웃을 자주 접하게 됩니다. 다음은 그러한 레이아웃의 예시입니다:

이러한 레이아웃에서는 하나의 래퍼(wrapper)가 아닌, 각 블록마다 여러 개의 래퍼를 만들어야 합니다. 이때 래퍼 안에는 콘텐츠를 중앙 정렬하는 또 다른 블록이 있어야 합니다. 또한, 콘텐츠에 배경색을 칠하는 역할을 하는 클래스도 있어야 합니다.

우리 레이아웃의 전체적인 구조는 다음과 같을 것입니다:

<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>
<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>

center 클래스는 블록 중앙 정렬에 사용될 것입니다:

.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}

line 클래스는 블록에 색상을 입히는 데 사용될 것입니다:

.wrapper.line {
	background-color: #008040;
	color: white;
}

wrapper 클래스는 각 블록의 부모가 될 것입니다. 이 클래스는 블록 사이의 간격을 설정하는 데 사용합니다:

.wrapper {
	margin-bottom: 30px;
}

이제 우리의 과제에 대한 전체 코드를 작성해 봅시다:

<div class="wrapper">
	<div class="center">
		<h1>Main site header</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Our company</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Our price</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Our contacts</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

* {
	box-sizing: border-box;
}
body {
	margin: 0;
}

.wrapper {
	margin-bottom: 30px;
}
.wrapper.line {
	background-color: #008040;
	color: white;
}
.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}
.wrapper h1 {
	margin: 0;
	font: 40px "Times New Roman";
}
.wrapper h2 {
	margin: 0;
	font: 25px "Times New Roman";
}
.wrapper p {
	font: 16px/1.4 Arial;
	text-align: justify;
}