CSS에서 입문자에게 가장 헷갈리는 부분은 정렬과 배치라고 생각한다. 오죽하면 "How to center a div"라는 밈이 있을 정도다. 그래서 정리해 본 CSS 정렬 및 배치 방법이다.
본 글에서는 .outer와 .inner라는 클래스를 이용해 코드를 설명한다.
가로만 중앙 정렬
auto margin
.outer { width: 100% }
.inner { margin: 0 auto }margin은 (상하, 좌우) 마진 값을 받는다. 이때 좌우 margin을 auto로 주었다. 이렇게 하면 div의 양쪽 공간이 auto로 채워지게 된다. 그리고 auto가 같은 크기의 공간을 차지하기 때문에 중앙 정렬한 효과를 낸다.
text-align: center
.outer { text-align: center }
.inner { display: inline-block }text-align은 텍스트를 정렬할 때 사용하는 기능이다. 그래서 div에 inline-block 속성을 입혀 텍스트처럼 작동하도록 했다. 문서 편집기에서 도형을 [글자처럼 취급]한 다음 중앙 정렬한 거랑 같은 원리다.
vertical-align에 대한 오해
.outer {
height: 120px;
line-height: 120px; /* height와 동일하게 */
vertical-align: middle;
}vertical-align은 수직 중앙 정렬을 지원한다. 하지만 inline이나 table-cell에만 적용된다. block 요소에는 적용되지 않는다. 따라서 vertical-align은 여러 조건이 따른다. vertical-align이란 이름에 속아 함부러 사용하면 안 된다.
inline이 아닌 요소의 중앙 정렬은 아래에서 다루겠다.
가로 & 세로 중앙 정렬
flex
.outer {
display: flex;
justify-content: center; /* 가로 */
align-items: center; /* 세로 */
}
.inner {}flex 속성은 개체를 유연하게 배치할 수 있도록 도와준다. justify-content는 가로 정렬, align-items는 세로 정렬을 결정한다.
absolute
.outer { position: relative }
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}top, left를 50%로 설정하면 개체 좌측 상단 모서리가 정중앙에 위치하게 된다. 따라서 개체를 위쪽으로 세로의 50%, 좌측으로 가로의 50%를 움직여야 중앙 정렬된다.
여기서 absolute는 부모 요소를 기준으로 위치를 잡는다. 하지만 부모 요소에 position이 명시되어 있지 않으면 <body>를 기준으로 위치를 찾는다. 따라서 상대적인 위치를 설정하고 싶다면 부모 요소에 반드시 relative를 명시해줘야 한다.
개체 가로로 배치
가장 기본이 되는 display: block은 개체를 세로로 정렬한다.
따라서 가로로 개체를 줄 세우기 위해서는 아래 방법을 사용한다.
flex
.outer {
display: flex;
/* flex-direction: row */
/* flex-direction: row-reverse */
}
.inner {}flex는 기본으로 flex-direction: row를 사용한다. 즉, flex만 적용해도 개체들이 좌측부터 가로로 배치된다. flex-direction: row-reverse는 우측부터 값을 순서대로 배치한다.
inline-block
.inner { display: inline-block }inline-block은 텍스트(inline)처럼 줄바꿈이 일어나지 않는다. 대신 inline과 달리 width나 height를 지정할 수 있다.
float
.inner {
float: left
/* float: right */
}float는 특정 방향으로 개체를 정렬해준다. left는 좌측부터, right는 우측부터 차례대로 배치한다.
그런데 float를 사용하면 다음에 오는 div까지 줄바꿈이 되지 않는 현상이 발생한다. 이때 clear: both를 선언해 float 특성을 지워야 한다. 다음은 .outer:after에 clear를 지정하는 예시다.
.inner {
float: left
/* float: right */
}
.outer:after {
display: block;
content: '';
clear: both;
}물론 .outer 밖에 빈 div를 생성해 style="clear:both"를 줘도 동일하게 작동한다.
<div class="outer">
...
</div>
<div style="clear:both"></div>