어서와, 개발은 처음이지?

div 가운데 정렬(feat. position absolute) 본문

CSS

div 가운데 정렬(feat. position absolute)

오지고지리고알파고포켓몬고 2019. 10. 3. 17:36
반응형



이번 글에서는 div 태그의 가로, 세로 가운데 정렬 방법에 대해 작성하겠습니다.

해당 카테고리 관련 코드는 여기에 모아두겠습니다.



1. 가운데 정렬


div를 가운데 정렬(특히 세로 가운데 정렬) 하는 방법으로, div를 flex box로 만들어서 justify-content align-items로 가운데 정렬하는 비교적 최신 방법과 table cell로 만들어서 vertical-align 속성을 사용하는 방법이 있습니다.


하지만 위 방법을 사용하면 브라우저와의 호환(IE10 11만 flex 지원), table cell로 바꿨을때 인접 혹은 자식 레이아웃이 붕괴되는 경우가 발생하곤 하는데..




2. position absolute을 사용하여 정렬해보자


그래서 다른 방법보다 호환성좋고 직관적으로 이해할 수 있는 가운데 정렬 방법을 소개해드리려고 합니다.


우선 div는 아래 그림처럼 세로로 차곡차곡 쌓이는 성질을 띄고 있습니다.


<일반적인 div의 layout>


이 div에 css 속성 중, position: absolute를 설정하면 '부모 태그로부터 절대위치'를 갖게됩니다.


여기서 absolute 속성과 함께 position 값을 지정해주면 위치를 지정할 수 있습니다.


<position 값을 명시한 위치 설정>


위 케이스 처럼 left, right, top, bottom의 위치 값에 따라 부모 태그로부터 절대 위치에 자식 태그가 위치하게 됩니다.

right: 0인 경우는 오른쪽 정렬이 된 모습이죠.


번외로 top bottom left right가 모두 0인 경우는 부모 태그의 시작과 끝점으로 자식태그가 쭈~욱 늘어나게 됩니다.


그럼 이 값을 top 50%, left 50%으로 설정하면 어떻게 될까요?


<top bottom을 50%로!>


어엇! 가운데 정렬이 되었..나? 🧐


뭔가 가운데 얼추 비슷하게 갔지만 우리가 생각한 모습은 아닙니다. 자식 태그의 시작점이 position의 근간이 되기 때문인데요. 

그럼 우리는 가운데를 맞추기 위해 48% 47% 46% .. 한 땀, 한 땀 맞춰봐야 할까요?


여기서 transform 속성을 사용하시면 쉽게 해결할 수 있습니다.


transform 속성은 위치를 변경할 수 있는 또 다른 속성인데, absolute가 부모 태그를 기준으로 움직인다면, transform은 자식 태그를 기준으로 움직입니다. 


<transform으로 위치 조정>


translate -50%가 자식 태그를 기준으로 움직이기 때문에, 자기 크기의 50%만큼 좌측으로 이동하게 됩니다.


즉 결과적으로 absolute에 의해 부모 태그의 가운데 위치에 자식태그의 시작점을 배치한 뒤, 자식 태그의 절반만큼 되돌려서 가운데 정렬을 완성 시키는것 입니다.



3. 등짝... 코드를 보자!


코드를 실행해보겠습니다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>div 가운데 정렬</title>
    <style>
        .container{
            position: relative;
            width: 500px;
            height: 400px;
            background: cyan;
        }

        .wrapContent{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: lightgoldenrodyellow;
        }

        .content{
            width: 150px;
            height: 150px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="wrapContent">
            <div class="content">
                this is content
            </div>
        </div>
    </div>
</body>
</html>


위 코드를 실행하시면 아래와 같은 화면을 보실 수 있습니다.


가운데 정렬에 대해서는 위에 설명한 바와 같고, 주의깊게 봐야할 부분은 부모 태그(.container)의 position에 relative 속성이 있는 점 입니다.


부모 태그에 relative을 설정하지 않은 채로 자식 태그에 absolute를 설정하면, 최상단 부모 태그인 body로부터 위치가 지정되기 때문입니다.


반응형 레이아웃을 작성하실 경우, 부모 태그의 width, height를 %로 바꿔주시면 그에 따라 항상 가운데에 위치하는 모습을 보실 수 있습니다.



4. 마치며


본디 css라는 것이 막 갖다 붙이면 붕괴가 일어나기 십상입니다. 때문에 원리를 올바르게 이해하는 것이 중요합니다.


항상 세로 가운데 정렬 때문에 골치 아팠던 기억이 있는데, 가운데 정렬에 대하여 한 번 정리할 수 있는 기회가 생겨서 이번 글을 작성했습니다.


부디 험난한 ui 개발길에 도움이 될 수 있길 바라며 글을 마치도록 하겠습니다.

저작자표시

'CSS' 카테고리의 다른 글

Modal 만들기(body scroll lock)  (0) 2019.10.03
'CSS' Related Articles more
Comments