[CSS] 수평/수직 레이아웃 구성

웹 화면을 구성하다보면 수평, 수직으로 자료를 나란히 배치해야 하는 일이 자주 발생한다.

이를 위해 주로 사용되는 방법들을 한 곳에 정리해보기로 한다.

 

컨테이너에 부여하는 속성(자식 노드들을 위해 부여되는 속성)은 빨간색으로 표시하였다.

이 속성들은 레이아웃 배치를 위해 사용된다.

 

1. 수평 레이아웃 구성 (float + clear)

float를 이용하면 요소를 수평으로 배치할 수 있으며, clear 속성을 명시해 줌으로써 다음 요소들은 지정한 컨테이너 아래에 쌓이도록 할 수 있다.

clear 속성을 명시할 때에는 :after 가상 선택자를 이용하는 방법이 가장 깔끔하다.

 

<style>
    .h_container::after {
        clear: both;
        display: block;
        content: '';
    }
    .h_container {
        border: 1px solid gray;
    }
    .h_container .item {
        float: left;
        padding: 0px 1rem;
        border-right: 1px solid gray;
        text-align: center;
    }
    .h_container .last_item {
        float: right;
    }
</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>
<div>hello</div>

결과

넘칠 시 아래로 내려간다.

브라우저 크기에 따라 가운데 영역이 변화한다. (왼쪽 오른쪽 배치를 고정)

 

2. 수평 가운데 정렬 (컨테이너를 가운데에)

컨테이너에 다음 속성을 부여한다.

container { margin: 0 auto; }

이는 상하 여백은 사용하지 않고 좌우 여백은 auto(절반씩 부여됨)로 지정하겠다는 의미이다.

 

컨테이너의 position 프로퍼티가 absolute로 선언되어 있을 때에는 다음과 같은 방법을 사용한다. (주: 모달)

수평 가운데
.absolute_container {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

완전 가운데
.absolute_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

아래쪽, 오른쪽으로 반씩 밀고 자기 크기의 절반만큼 다시 당기겠다는 의미이다.

 

3. 수직 가운데 정렬

line-height 값을 height와 동일하게 설정해주면 된다.