[레이아웃] 레이아웃 잡기 (float)

가장 기본적인 형태인 아래와 같은 레이아웃을 잡아 보겠습니다.

상단에 Header, 왼쪽에 위치할 Left Content, 오른쪽의 Right Contnet, 하단의 Footer 입니다.

레이아웃을 잡는 방법에는 크게 세 가지가 있습니다.

정확하게 말하자면 가운에 Left Content와 Right Content를 수평으로 위치 시키는 방법이 세 가지 있다고 볼 수 있습니다.

<div class="wrapper">

  <div class="header"></div>
  <div class="contents">
    <div class="left-content"></div>
    <div class="right-content"></div>
  </div>
  <div class="footer"></div>

</div>

먼저 전체 레이아웃을 감쌀 wrapper 요소를 만들고 그 안에 header, footer, content 영역을 만듭니다. wrapper의 역할은 전체 레이아웃을 화면의 가운데 위치 시키며, 그 안의 컨텐츠가 위치할 좌표의 기준을 만들어주는데 있습니다.

.wrapper{
  margin: 0 auto;
  width:1200px;
}

margin: 0 auto; 는 상/하의 마진은 0으로, 좌/우의 마진은 자동으로 하겠다는 의미입니다. 따라서 .wrapper 요소는 좌우에 항상 동일한 마진을 주기 때문에 화면의 크기에 상관없이 자동으로 수평 정렬이 됩니다. 브라우저를 리사이징 했을 때에도 언제나 가운데 위치하게 됩니다. 너비는 임의로 1200px을 주었습니다. height는 일부러 주지 않아, 내부 컨텐츠의 height에 따라 자동으로 늘어나도록 했습니다.

.wrapper .header{
  background-color: green;
  width:100%;
  height:100px;
}

.header 요소의 너비는 100%로 height는 고정으로 100px을 할당합니다.

.wrapper .contents{
  width: 1200px;
  height: 650px;
  clear:both;
}

.wrapper .left-content{
  background-color: red;
  width: 300px;
  height: 650px;
  float:left;
}

.wrapper .right-content{
  background-color: blue;
  width: 900px;
  height: 650px;
  margin-left:300px;
}

.contents 요소에 대해서는 위와 같이 스타일링 합니다.

.contents 자체의 너비는 .wrapper 요소와 같은 1200px을 할당하고(아마 100%로 할당해도 무방할 것 같습니다) height는 650px로 고정 값을 줍니다. 주목해야 할 부분은 .left-content에 부여한 float:left 속성입니다. float 속성을 부여하는 순간 해당 요소는 공중에 뜨게 되며 자기 자신의 영역을 차지하지 않습니다. 그리고 속성값으로 left를 부여할 경우 갈 수 있는 만큼 왼쪽으로 붙게 됩니다. float 속성을 사용한다면 이 속성이 어디까지 영향을 미칠것인지를 정해주어야 합니다. 즉 영향을 받지 않기를 원하는 요소에 float 속성을 해제 해주는 속성을 적용해야 합니다. 이것이 바로 clear 속성입니다. 여기서는 clear:both; 속성을 주어서 float의 속성값이 left이던 right이던 상관없이 모두 해제해주었습니다. 예제처럼 float:left만 사용했다면 clear:left로 해제해도 상관없습니다.

.right-content 요소는 특이하게도 margin-left를 300px 주었습니다. 300px은 .left-content의 너비값인데요, 방금 말씀드렸다시피 float 속성을 부여한 .left-content는 자신의 영역을 차지하지 못하기 때문에 .right-conent 요소가 왼쪽으로 붙게 됩니다. 그래서 .left-content의 너비만큼 오른쪽으로 이동시키기 위해 margin-left 속성을 적용했습니다.

.wrapper .footer{
  width: 100%;
  height:100px;
  background-color: gold;
}

.footer는 단순합니다. width는 parent 만큼 최대로 주고 height는 100px로 고정했습니다.

지금까지 한 것은 float을 사용해서 레이아웃을 잡는 방법이었습니다. 이외에도 absolute나 display:inline-block을 사용해서 같은 결과물을 만들 수 있습니다. 또는 더욱 다양한 방법을 사용할 수도 있습니다. 이후에 올라올 포스팅에서는 absolute와 display:inline-block을 사용해서 레이아웃을 잡는 방법에 대해서 알아보겠습니다. 이런 방법들은 굳이 전체 레이아웃을 잡을 때만 사용하는 것이 아니라, 모든 곳에서 사용되기 때문에 추후에 컴포넌트를 개발 할 때에도 유용하게 사용할 수 있을 것입니다.