블록요소 DIV 가로 정렬하는 세가지 방법

HTML의 각 태그는 기본적인 속성이 있다고 말씀드린 바 있습니다. 바로 블록, 인라인, 블록-인라인 요소가 그것입니다. 혹시 이 개념에 대해 잘 모르신다면 먼저 아래의 글을 반드시 꼭 정독하시어 이해를 먼저 해주시기 바랍니다. 정말 중요한 부분이거든요. 개인적으로 이 개념이 확실히 머릿속에 적립된 시점부터 웹언어에 대한 이해도가 부쩍 향상되었습니다. 기초는 정말 정말 너무 중요하다고 생각합니다.

HTML 태그 기본 분류 - 블록요소 인라인요소

티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니

rgy0409.tistory.com

블록 요소는 무조건 세로로 층층히 쌓이는 성격을 가지고 있습니다. 가로가 100% 풀사이즈이므로 가로 사이즈에 대해서도 조절을 해줘야 할 것입니다. 물론 가로가 50%여도 무조건 세로로 쌓입니다. 그러니 선행 조건은 다음과 같습니다.

1. 블록 요소를 인라인-블록 요소로 만들 것!

2. 가로 사이즈를 줄일 것

이 두가지가 진행되어야 비로소 div같은 블록 요소를 가로로 정렬시킬 수 있게 됩니다.

CSS3 - display : block;을 inline-block으로 변경하기

기본적으로 div같은 블록요소는 display : block; 이라는 속성을 기본 포함하고 있습니다. 그러므로 이 속성을 변경해줘야 합니다. 간단한 예시를 들어보겠습니다.

See the Pen div 가로 정렬 - display: inline-block; by rgy0409 (@rgy0409) on CodePen.

이렇게 CSS3에서 가로로 정렬하고자 하는 태그를 선택하여 display 속성을 inline-block으로 변경 후 가로 및 세로 사이즈를 정의하면 완벽하게 가로로 정렬이 됩니다. 그러면 여기에서 한가지 궁금증이 생길수도 있을겁니다. inline으로 변경하면 안 되는 것인가에 대한 부분이죠. inline은 블록요소의 성격이 빠져버리기 때문에 div에 입력한 텍스트에 대한 영역만 적용이 됩니다. 물론 가로 정렬은 되긴 합니다. 이 부분은 직접 바꿔서 해보시면 금방 아실 겁니다. 단 inline-block으로 변경하게되면 약 4px 정도의 여백이 생성됩니다. 이 부분은 위의 예시에 나온대로 초기화를 하면 해결됩니다. 자세한 내용은 아래의 글을 참고해주시기 바랍니다.

CSS3 - float : left; 사용하기

다음으로는 float: left; 속성을 사용하여 가로로 정렬시키는 방법입니다. 아래의 예시를 봐주시기 바랍니다.

See the Pen Untitled by rgy0409 (@rgy0409) on CodePen.

처음에 보여드렸던 예시에 같은 HTML 구조의 div 태그를 추가했습니다. div가 크게 두 그룹이 있습니다. 하나는 wrap1이라고 하는 id값을 가진 그룹이고 다른 하나는 wrap2입니다. 지금 wrap1에 float: left가 적용이 되어있기 때문에 가로로 정렬이 되어 있는 모습을 확인할 수 있습니다.

그러나 float 속성을 사용할 때 주의사항이 있습니다. 해당 속성이 적용된 요소의 인접 태그에도 영향을 주게 됩니다. 위의 예시에서 CSS 탭을 클릭해서 아래의 속성을 확인합니다.

#wrap1::after {
    content: "";
    display: block;
    clear: both;
}

이 속성이 적용되어 있을겁니다. float은 뒤따라오는 태그에도 영향을 주게 됩니다. 만약 이 속성이 없다면 어떻게 될까요? 직접 한번 테스트해 보시면 금방 아실겁니다. 그렇습니다. 바로 뒤따라오는 wrap2 id값을 가진 div가 wrap1 그룹과 겹치게 됩니다. 따라서 wrap1의 div 태그가 끝나는 부분에 가상 요소인 ::after를 만들어서 float 초기화를 해줘야 합니다. float 초기화는 그냥 공식입니다. 그게 위의 방법이구요. 이건 그냥 사실상 외워두시는게 마음 편합니다.