Column(열)의 높이를 맞추는 방법

CSS 디자인의 경우 복수의 열을 같은 높이로 맞춰야 하는 상황이 종종 발생합니다. CSS3를 이용하면 간단히 해결될 문제이지만, 이를 지원하지 않는 브라우저를 생각한다면 많은 고민을 필요로 하기에 이에 대한 방법을 정리해 봅니다.

열의 높이를 자동으로 맞추는 속성들을 활용

CSS 속성들 중에는 같은 부모의 자식 요소들 사이에서 자동으로 열의 높이를 맞추는 속성들이 있다.

flex 속성

flex 속성을 이용하면 아주 손쉬운 작업이다. 대상 요소를 감싸는 부모요소에 display: flex 를 설정하고 대상요소들의 순서를 정해주면 간단히 완성시킬 수 있다. 다만 지원문법이 중간에 한번 교체되었고 구형 브라우저들에서 지원이 되지 않는 문제로 크로스브라우징에 문제가 발생한다.

IE는 11버전 이상, 안드로이드 4.4 부터 최근의 개정된 문법에 맞게 정상 작동하고, 나머지 브라우저는 항상 최신을 유지한다는 가정하에 이 속성의 사용 여부를 결정하면 될 터이다. flex에 관한 추가적인 정보는 CSS Flex 속성을 참고하길 바란다.

See the Pen flex test by Douglas Ham (@uzugoer) on CodePen.

table 속성

디자인에 <table> 태그를 사용하는 시기는 지났지만 이 태그가 가지는 특징을 흉내내는 CSS 속성은 아직도 활용된다. 실제 테이블은 아니지만 display: table 를 부모요소에 설정하고 자식 요소들에 display: table-cell을 설정하면 마치 한행의 테이블처럼 작동한다.

table 속성은 IE8 이상의 브라우저에서 작동하므로 IE7을 고려하지 않는다면 이 방법도 후보에 오를 수 있다. 다만 테이블이 그렇듯 테이블 속성을 가지게된 요소 또한 CSS 디자인에 제약이 따를 수 있다는 것을 명심해야 한다.

See the Pen table height by Douglas Ham (@uzugoer) on CodePen.

CSS 트릭을 이용하기

과거부터 현재까지 애용되는 몇가지 CSS 트릭을 사용해 열의 높이가 같게끔 보이게 만드는 방법이 있다.

배경 이미지를 활용

고정된 너비를 사용한다면 손쉽게 접근할 수 있는 방법이다. 부모 요소나 <body> 요소의 배경으로 단이 나눠진듯한 배경이미지를 만들어두고 이를 y축을 기준으로 반복하는 것이다. 실제로 자식 요소들은 각각의 다른 높이를 가지게 된다.

제한 사항으로는 width: 80% 처럼 유동적인 너비에 대응하기 어렵다는 것이며, 이에 비슷하게 대응하기 위해 여러개의 배경 이미지를 준비해야 할 수 있다는 것이다.

<div id="wrapper">

    <div id="content">
        <p>contentr</p>
    </div>

    <div id="side">
        <p>side</p>
    </div>
    
</div>

CSS는 간단하며 플로팅 속성을 활용하여 배경이미지에서 단을 나눈 너비에 맞게 자식 요소들의 너비를 설정하게 된다. overflow 속성은 플로팅 속성을 clear 하기 위해 사용되었을 뿐 다른 clear 기법을 사용해도 상관은 없다.

#wrapper {
    width: 960px;
    margin: 0 auto;
    background: url("배경이미지.png") repeat-y;
    overflow: hidden;
}

#content {
    float: left;
    width: 6200px;
}

#side {
    float: right;
    width: 340px;
}

배경 색상을 활용

위의 방법과 거의 유사하나 배경이미지 대신 부모요소의 배경 색상을 사이드 요소가 투영하는 방법으로 사용할 수 있다. 다만, 이는 콘텐츠가 위치하게 될 메인 요소가 항상 사이드 영역보다 높이가 더 높다는 가정과 마진 요소의 사용을 자제해야 한다는 제한사항이 있다.

See the Pen column divide by Douglas Ham (@uzugoer) on CodePen.

음수 마진과 패딩을 활용

이 방법도 목표가 되는 대상 요소가 어느 한쪽 보다 항상 작다는 가정하에 이루어진다. 음수의 마진값을 이용해 높이를 확장하고 이를 다시 패딩값을 이용해 콘텐츠를 시야에 확보하는 방법이다. 부모 요소의 overflow: hidden 설정이 중요하며, 이를 설정하지 않으면 음수 마진의 대상이 된 요소가 입력한 값에 따라 길게 확장되어진 것이 그대로 노출되게 된다.

See the Pen column margin-padding by Douglas Ham (@uzugoer) on CodePen.

오프셋을 이용한 방법

부모 요소의 배경을 이용한 마지막 방법으로 좀 더 복잡하지만 어느 한쪽 열의 높이가 높거나 낮은 것에 상관없이 크로스브라우징과 유동적인 높이 변화를 모두 만족하는 방법에 대하여 알아보자.

이 방법은 메인영역의 배경과 사이드영역의 배경을 분리하기 위해 자식들을 감싸는 두개의 요소들이 필요하다. 물론 body 요소의 배경을 활용한다면 굳이 두개의 컨테이너 요소가 필요친 않다.

<div id="wrapper">
  <div id="inner">

    <div id="content">메인</div>

    <div id="side">사이드</div>

  </div>
</div>

1. 컨테이너 요소(부모 요소)들 및 열(자식 요소)들을 float 시킨다.

#wrapper { float: left; }
#inner { float: left; }
#content {float: left; width: 80%; }
#side {float: left; width: 20%;  }

float 의 방향은 중요치 않으며, 단지 플로팅된 컨테이너와 콘텐츠들은 항상 같은 높이를 가진다는 것을 이용하기 위한 것이다. 즉, 플로팅된 #wrapper 컨테이너와 그 내부의 자식들이 플로팅된다면 이들은 모두 같은 높이를 가지게 되는 것이다.

2. 두 개의 컨테이너에 각각 배경색을 지정한다.

#wrapper { 
  float: left;
  background: pink; 
}
#inner { 
  float: left;
  background: silver; 
}

사이드 열이 가질 배경색은 #inner 에 설정하고 메인에 나타날 콘텐츠의 배경색은 #wrapper 에 설정한다(생각하는 방식에 따라 배경이 나타나는 위치는 어떻게든 변할 수 있다).

3. 메인과 사이드가 위치할 표시를 잡아주기 위해 내부 컨테이너를 조정한다.

#inner {
  float: left;
  background: silver;
  position: relative;
  left: 80%; 
}

스택상으로 외곽의 컨테이너인 #wrapper 는 #inner 컨테이너에 가려지게 되어 content 배경색은 보이지 않는다. 이 문제를 해결하기 위해 inner 컨테이너에 position: relative 를 부여하고 사이드열의 너비가 보일만큼만 이동시킨다. 이 예제에서는 사이드 열의 너비를 20% 잡았기 때문에 80%만큼 이동시켜 화면에서 제외시켰다.

4. 메인과 사이드열의 위치를 원상 복구 시킨다.

내부 컨테이너를 이동시켜 치우쳐버린 영역을 복구 시키기 위해 이동시킨 만큼 다시 돌려 놓는다.

#content {
  float: left; 
  width: 80%; 
  position: relative;
  right: 80%;
}
#side {
  float: left; 
  width: 20%;  
  position: relative;
  right: 80%;
}

마찬가지로 position: relative 를 부여하고 내부 컨테이너가 이동한 거리만큼 다시 이동시킨다. 이로써 화면은 정상적인 위치에 위치한다.

See the Pen Column by Douglas Ham (@uzugoer) on CodePen.

한가지 예시를 보여 줬을뿐 이와 같은 방법의 원리를 이해하는 것이 중요하다. 이를 활용하여 한쪽의 열은 너비를 고정시킨체 다른 부분의 너비만 변화시킨다던지(마진이용) 등의 방법을 구상해 볼 수 있다.

스크립트를 활용

matchHeight - 요소간의 높이 통일화에서 다뤘듯이 열의 높이를 맞추는 플러그인을 사용하거나 직접 관련된 코드를 작성할 수도 있다. 원하는 요소들의 높이값을 얻어와 비교 후에 높이가 높은 쪽의 높이로 설정하는 방법이 될 것이다. 다만 이렇게 스크립트를 이용할 경우, 동적으로 높이가 변하거나 삽입되는 요소가 있을 경우, 상황에 맞게 코드를 업데이트하거나 지연시간을 추가해야 할 것이다.

관련하여 Make Sidebar Same Height as Content Div to be Equal 에 제시된 방법을 연구해 보길 바란다.

위에서 거론한 방법말고도 다른 방법들은 존재하지만 대부분 위의 방법안에서 문제를 해결하곤 한다. 시간이 조금 더 지나고 구형 IE에 대한 지원을 고려하지 않는 시기에는 flex 속성을 이용한 간단한 방법으로 통일될 것으로 보인다.

'웹코딩 > CSS' 카테고리의 다른 글

CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성 (7)	2015.11.20
CSS로 글자 자르기 - 한 줄, 여러 줄 (15)	2015.10.30
아이콘 폰트(IconFont)의 모든 것 (8)	2015.10.05
트위터의 fave 애니메이션 - 즐겨찾기 버튼 (3)	2015.09.03
Normalize.css - CSS 초기화 (6)	2015.08.24

WEBDIR