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

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

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

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

html<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 클래스는 블록 중앙 정렬에 사용될 것입니다:

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

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

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

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

css.wrapper {
  margin-bottom: 30px;
}

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

html<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>

css* {
  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;
}