CSS에서 두 열 레이아웃 구성 방법

다음과 같은 형태의 두 열 레이아웃을 만들어 봅시다:

먼저 페이지의 기본 구조를 생성해 보겠습니다:

html<div id="wrapper">
  <div id="header">
    헤더
  </div>
  <div id="container">
    <div id="content">
      컨텐츠
    </div>
    <div id="sidebar">
      사이드바
    </div>
  </div>
  <div id="footer">
    푸터
  </div>
</div>

이제 wrapper에 스타일을 지정하여 화면 가운데 정렬해 보겠습니다:

css#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}

이제 header와 footer에 스타일을 지정해 보겠습니다:

css#header {
  height: 200px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  border: 1px solid black;
}

보시다시피, header와 footer에 높이를 지정합니다. 우리의 구성에서는 내용이 없기 때문에 이렇게 합니다. 내용이 있는 경우 블록에 높이를 지정해서는 안 됩니다. 높이는 내용에 따라 자동으로 형성됩니다.

또한 너비를 지정하지 않는다는 점에 유의하세요. 사실 header와 footer는 블록 요소이며 너비는 자동으로 wrapper의 너비와 같아집니다.

이제 텍스트가 경계에 달라붙지 않도록 padding을 지정해 보겠습니다:

css#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}

그러나 padding이 있으면 블록 크기에 나쁜 영향을 미칩니다. 블록이 지정된 것보다 커집니다. padding과 테두리가 블록을 확장하지 않도록 모든 블록의 동작을 변경해 보겠습니다:

css* {
  box-sizing: border-box;
}

이제 콘텐츠와 사이드바를 한 줄에 배치해야 합니다. 플렉스를 사용하여 이 작업을 수행해 보겠습니다:

css#container {
  display: flex;
}

콘텐츠와 사이드바에 너비를 지정해 보겠습니다. 이 경우 너비의 합은 wrapper의 너비와 같아야 합니다:

css#content {
  width: 800px;
}
#sidebar {
  width: 200px;
}

사이드바와 콘텐츠 사이에 여백을 만들고 싶다고 가정해 봅시다. 이 경우 사이드바에 margin을 설정해야 합니다. 이때 이 margin을 위해 누군가에게서 너비를 빼야 합니다. 콘텐츠에서 빼서 그 너비를 줄여 보겠습니다:

css#content {
  width: 780px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

이제 내용이 없으므로 높이를 추가해 보겠습니다. 한 요소에만 높이를 추가하면 충분합니다. 결국 두 번째 플렉스 요소는 높이에 맞춰질 것입니다(왜 그럴까요?). 콘텐츠에 높이를 지정해 보겠습니다:

css#content {
  width: 780px;
  height: 700px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

이제 콘텐츠와 사이드바에 나머지 스타일을 추가해 보겠습니다:

css#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}

이제 레이아웃이 완성되었습니다. 모든 코드를 함께 모아 보겠습니다:

html<div id="wrapper">
  <div id="header">
    헤더
  </div>
  <div id="container">
    <div id="sidebar">
      사이드바
    </div>
    <div id="content">
      컨텐츠
    </div>
  </div>
  <div id="footer">
    푸터
  </div>
</div>

css* {
  box-sizing: border-box;
}

#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}
#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#container {
  display: flex;
}
#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}