웹의 CSS를 이용해 가로에 대한 가운데 정렬은 그럭저럭 쉽게 지정할 수 있지만, 세로 정렬은 왠지 트릭같은 방식으로 지정하는 느낌을 받는다. 그렇다보니, 세로 정렬이 필요한 레이아웃을 구성할때마다 고충이 생기는데.. 이럴때 flex라는 비교적 최신의 CSS 방식을 활용해 이러한 고충을 제거하고자 이 글을 정리한다. 사실 flex 방식은 그 내용이 제법 방대하다. 하지만 체계적인지라 여러번 살펴보면 충분이 이해하고 실제 업무에 활용할 수 있다.
일단 앞서 언급한 가로와 세로에 대한 가운데 정렬을 위한 flex 방식을 이 글을 통해 간단이 언급해 둔다. 가운데 정렬이 필요할때마다 flex를 사용하다보면.. flex의 그밖의 요소들이 하나씩 접근하게 될 것이기 때문이다. 기술이란 그 필요에 의해 사용되고, 자연스럽게 사용되어질때 사용자가 보다 쉽게 이해할 수 있기 때문이다.
아래의 dom 구성에 대한 코드가 있다.
|
1 2 3 4 |
<div class="container"> <div class="item">DIP2K</div> <div class="item">김형준</div> </div> |
.container 안에 .item 항목을 가로와 세로로 가운데 정렬하고자 한다면 아래와 같은 스타일을 지정하면 된다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> .container { border: 1px dotted red; width: 100%; height: 500px; display: flex; justify-content: center; align-items: center; } .item:first-child { border: 1px dotted blue; } .item:last-child { border: 1px dotted green; } </style> |
실제 결과는 아래와 화면처럼 가로와 세로에 대해 가운데로 정렬된 것을 볼 수 있다.
DIP2K
김형준
DIV 요소는 display가 block이다. 그러나 flex의 내부의 항목으로 들어가게 되면 inline-block으로 변경된다는 점을 알 수 있다. 끝으로 이 글을 작성하기 위해 읽었던 문서는 “flexbox의 기본 개념”이다.