Match box column height - 열의 높이를 맞추는 다양한 방법
CSS 디자인의 경우 다수의 열을 같은 높이로 맞춰야 하는 상황이 종종 발생합니다.
CSS3를 이용하면 간단히 해결되지만, 이를 지원하지 않는 브라우저를 생각한다면 많은 고민을 필요로 하기에 이에 대한 방법을 알아봅니다.
열(Column)의 높이를 자동으로 맞추는 속성 활용
CSS 속성들 중에는 같은 부모의 자식 요소들 사이에서 자동으로 열의 높이를 맞추는 속성들이 있습니다.
flex property
flex 속성을 이용하면 매우 쉽게 원하는 결과를 얻을 수 있습니다.
대상 요소를 감싸는 부모요소(플렉스 컨테이너)에 display: flex 를 설정하고 대상요소들의 순서를 정해주면 간단히 구현할 수 있습니다.
다만 지원문법이 중간에 한번 교체되었고 구형 브라우저들에서 지원이 되지 않는 문제로 크로스브라우징의 문제에 봉착하게 됩니다.
IE는 11버전 이상, 안드로이드 4.4 부터 최근의 개정된 문법에 맞게 정상 작동하고, 나머지 브라우저는 항상 최신을 유지한다는 가정하에 이 속성의 사용 여부를 결정하면 될 것입니다.
flex에 관한 추가적인 정보는 CSS Flex 속성을 참고하길 바랍니다.
See the Pen flex test demo by jaeheekim (@jaehee) on CodePen.
table property
디자인에 <table> 태그를 사용하는 시기는 지났지만 이 태그가 가지는 특징을 흉내내는 CSS 속성은 아직도 활용되고 있습니다.
실제 테이블은 아니지만 display: table 를 부모요소에 설정하고 자식 요소들에 display: table-cell을 설정하면 마치 한 행(row)의 테이블처럼 동작하게 됩니다.
table 속성은 IE8 이상의 브라우저에서 작동하므로 IE7을 고려하지 않는다면 이 방법도 권장할 만합니다.
다만 테이블이 그렇듯 테이블 속성을 가지게 된 요소 또한 CSS 디자인에 제약이 따를 수 있다는 것을 명심해야 합니다.
See the Pen table-cell 데모 by jaeheekim (@jaehee) on CodePen.
CSS trick(속임수) 이용하기
지금도 많이 사용되는 방법들 중에 몇가지 CSS 트릭을 사용해 열의 높이가 동일하게 보이게 만드는 방법에 대해 알아봅니다.
배경 이미지(image)를 활용
고정된 너비를 사용한다면 손쉽게 사용할 수 있는 방법으로 부모 요소나 <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 하기 위해 사용되었을 뿐 다른 clearfix 기법을 사용해도 상관 없습니다.
#wrapper {
width: 960px;
margin: 0 auto;
background: url("배경이미지.png") repeat-y;
overflow: hidden;
}
#content {
float: left;
width: 6200px;
}
#side {
float: right;
width: 340px;
}배경 색상(bg-color)을 활용
위의 방법과 거의 유사하지만 배경이미지 대신 부모요소의 배경 색상을 사이드 요소가 투영하는 방법으로 사용할 수 있습니다.
다만, 이는 콘텐츠가 위치하게 될 메인 요소의 높이가 항상 사이드 영역 높이보다 더 높다는 가정과 마진 요소의 사용을 자제해야 한다는 제한사항을 가지고 있습니다.
See the Pen 배경색상을 활용한 높이제어(css trick) by jaeheekim (@jaehee) on CodePen.
음수 마진과 패딩의 활용
이 방법도 목표가 되는 대상 요소가 어느 한쪽 보다 항상 작다는 가정하에 이루어집니다.
음수의 마진값을 이용해 높이를 확장하고 이를 다시 패딩값을 이용해 콘텐츠의 시야를 확보하는 방법으로 부모 요소의 overflow: hidden 설정이 중요하며, 이를 설정하지 않으면 음수 마진의 대상이 된 요소가 입력한 값에 따라 길게 확장되어진 것이 그대로 노출되게 됩니다.
See the Pen 음수마진활용한 높이값 동일하게 제어 by jaeheekim (@jaehee) on CodePen.
오프셋(offset)을 이용한 방법
부모 요소의 배경을 이용한 마지막 방법으로 조금 복잡하지만 어느 한쪽 열의 높이가 높거나 낮은 것에 상관없이 크로스브라우징과 유동적인 높이 변화를 모두 만족하는 방법입니다.
이 방법은 메인영역의 배경과 사이드영역의 배경을 분리하기 위해 자식들을 감싸는 두개의 요소들이 필요합니다.
그리고 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: #333;
}
#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 오프셋을 이용한 같은 높이값 설정 by jaeheekim (@jaehee) on CodePen.
한 가지 예시를 들었을 뿐 이와 같은 방법의 원리를 이해하는 것이 무엇보다 중요합니다.
이를 활용하여 한쪽의 열은 너비를 고정시킨체 다른 부분의 너비만 변화시킨다던지(마진이용) 등의 방법을 구상해 볼 수 있을 것입니다.
스크립트(script) 활용
matchHeight - 요소간의 높이를 일치에서 소개했듯이 열의 높이를 맞추는 플러그인을 사용하거나 직접 관련된 코드를 작성할 수도 있을 것입니다.
이는 원하는 요소들의 높이값을 얻어와 비교 후에 높이가 높은 쪽의 높이로 설정하는 방법이 될 것입니다.
다만 이렇게 스크립트를 이용할 경우, 동적으로 높이가 변하거나 삽입되는 요소가 있을 경우, 상황에 맞게 코드를 업데이트하거나 지연시간을 추가해야 할 것입니다.
관련하여 Make Sidebar Same Height as Content Div to be Equal 에 제시된 방법을 연구해 보길 바랍니다.
이외의 다른 방법들도 다수 존재하지만 대부분 위의 방법 안에서 문제를 해결할 수 있을 것으로 기대합니다.
보편적으로 사용되기까지는 다소 시간이 걸리겠지만 구형 IE에 대한 지원을 고려하지 않는 시기에는 flex 속성을 이용한 방법을 사용하게 될 것이라고 생각합니다.
[출처] WEBDIR - 흉내쟁이님
'StyleSheet > CSS' 카테고리의 다른 글
| CSS3 - Background Images (0) | 2016.01.07 |
|---|---|
| float 정렬에 이용된 트릭 사용 방법 (0) | 2016.01.07 |
| CSS 유동적인 컨테이너 너비에 따른 이미지 비율 다루기 (1) | 2016.01.06 |
| CSS3 object-fit, object-position (0) | 2016.01.06 |
| BEM(Block Element Modifier) 방법론 (5) | 2016.01.05 |
