수평 레이아웃 구성
개요
아래와 같은 형태의 레이아웃을 보신 적이 있나요? ofcourse도 이와 같은 레이아웃을 따르고 있는 매우 보편적인 웹 사이트의 레이아웃이라고 할 수 있습니다. 이런 레이아웃을 짜기 위해서는 CSS를 어떻게 작성해주어야 할까요?
상하로 나뉘어지는 레이아웃은 <div> 태그를 이용하여 height를 적절히 설정하면 잘 작동할 것 같습니다. 그러면 좌우로 나뉘어지는 중앙 컨텐츠 부분과 수평으로 배치되는 글로벌 메뉴는 어떻게 처리하면 될까요?
레이아웃을 좌우, 수평방향으로 배치하기 위한 방법으로는 display: inline-block을 사용하는 방법, <table> 태그를 사용하는 방법, float 속성을 사용하는 방법, display: flex를 사용하는 방법, display: grid를 이용하는 방법 등이 있습니다.
flex나 grid를 이용하는 방법이 가장 최신 방법이지만 오래된 브라우저에서 정상적으로 작동하지 않는 문제가 있습니다. table 태그는 표를 그리기 위한 용도가 맞지, 레이아웃을 구성하는 측면에는 바람직하지 못하죠. inline-block 또한 레이아웃을 용도로 만들어진 속성이 아니라 사소한 문제가 많이 발생합니다.
좌우로 나뉘어지는 레이아웃을 구현하기 위해, 컨테이너 요소 안에 float 속성을 통해 자식을 배치하고, :after 가상선택자를 이용하여 clear를 시켜주면 가장 깔끔하게 레이아웃 구성을 할 수 있습니다.
float + clear 속성으로 수평 레이아웃 구성하기
먼저 수평으로 배치되어야 할 요소들에게 float: left를 줍니다. 만약 특정 요소만 오른쪽에 고정되어야 한다면 right를 줄 수도 있습니다. 그리고 이들을 감싸는 컨테이너 <div>를 하나 만들고, :after 가상 선택자에서 clear를 하도록 하면 됩니다.
예제
<style>
.h-container:after{ clear: both; display: block; content: '' }
.h-container .item {
float: left;
width: 100px;
text-align: center;
border-right: 1px solid #ddd;
}
.h-container .item.last {
float: right;
border-right: none;
}
</style>
<div class="h-container">
<div class="item">menu 1</div>
<div class="item">menu 2</div>
<div class="item">menu 3</div>
<div class="item last">login</div>
</div>
복잡한 레이아웃 형태도 아래처럼 만들 수 있습니다. main이 수평 컨테이너 역할을 하는 것이라 볼 수 있죠.
예제
<style>
.ex-layout{
width: 500px;
}
.ex-layout .gnb{
padding: 15px;
background-color: skyblue;
}
.ex-layout .main{
background-color: white;
}
.ex-layout .main:after{ clear: both; display: block; content: '' }
.ex-layout .main .lnb{
float: left;
width: 100px;
height: 254px;
background-color: orange;
}
.ex-layout .main .content{
float: left;
width: 400px;
}
.ex-layout .footer{
padding: 15px;
background-color: #ddd;
}
</style>
<div class="ex-layout">
<div class="gnb">Global menu</div>
<div class="main">
<div class="lnb">Left menu</div>
<div class="content">
Content area
</div>
</div>
<div class="footer">
Footer area
</div>
</div>
종합
컨테이너는 고유하지 않습니다. 컨테이너 안에 다른 컨테이너가 들어갈 수도 있고, 컨테이너가 수직으로 여러 개 배치 될 수도 있습니다. 맨 처음 보여드렸던 예제는 어떻게 그려졌는지 확인해보세요.
예제
<style>
.clearfix { clear: both; content: ''; display: block }
.my-site {
background-color: white;
}
.my-site .header {
background-color: #01579B;
height: 70px;
}
.my-site .gnb {
border-bottom: 1px solid #ddd;
}
.my-site .gnb > div {
float: left;
width: 100px;
text-align: center;
height: 30px;
border-right: 1px solid #ddd;
}
.my-site .gnb > div.selected {
background: #70acdc;
}
.my-site .main .lnb {
float: left;
width: 25%;
background-color: #f3f3f3;
height: 300px;
}
.my-site .main .article {
float: left;
width: 75%;
}
.my-site .footer {
background-color: #f0f0f0;
border-top: 1px solid #ddd;
height: 40px;
}
</style>
<div class="my-site">
<div class="header"></div>
<div class="gnb clearfix">
<div></div>
<div class="selected"></div>
<div></div>
</div>
<div class="main clearfix">
<div class="lnb"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
</div>