게시글

강좌4 - CSS - 3년 전 등록 / 6달 전 수정

CSS 정렬과 Float

세로 가운데 정렬, inline-block 간격 문제
조회수:
0

안녕하세요. 이번 시간에는 CSS의 정렬 방법과 float에 대해서 배워보겠습니다.

CSS 배우시는 분들이 가장 어려워하는 것 중 하나이기 때문에 알아두시면 많은 도움이 될 겁니다.

정렬

정렬이란 텍스트나 태그를 왼쪽, 가운데 또는 오른쪽에 배치하는 작업을 말합니다. 보통 가운데 정렬이나 오른쪽 정렬같은 특수한 형태를 많이 사용합니다.

위와 같이 부모 태그에 text-align을 사용하면 자식 태그들이 정렬됩니다. 가로 정렬은 참 쉬운데요. 문제는 세로 정렬입니다. 보통 가운데 정렬을 할 때, 세로로도 가운데 정렬을 원하시는 분들이 많습니다.

보통 vertical-align: middle 속성을 시도하는데요. 뜻대로 되지 않습니다. vertical-align이 세로 정렬이고, middle이 가운데인데 왜 안 돼! 라고 생각하시는데요. vertical-align의 특징은 다른 태그를 기준으로 vertical-align이 된다는 것입니다. 즉 옆의 다른 태그가 있어야 그 태그에 맞춰서 세로 정렬이 되는 거죠.

가장 쉬운 방법은  

@css
display: flex;
align-items: center;

를 주는 건데요. IE에서만 문제가 있습니다. ㅠㅠ

다음은 모든 브라우저에서 가능한 몇 가지 방법을 소개합니다. 먼저 헬퍼를 쓰는 방법입니다. 위에서 vertical-align이 옆의 태그를 기준으로 정렬된다고 했죠? 그래서 옆에 width가 0이고 높이가 100%인 보이지 않는 헬퍼 태그를 하나 만들어줍니다. 이제 다른 태그들이 이 헬퍼를 기준으로 정렬됩니다.

이 방법의 문제점은 child 태그들에 margin: 0, padding: 0을 줬음에도 서로간에 간격이 발생한다는 겁니다. display: inline-block의 문제점이기도 합니다. 이것을 해결하려면 아래 float을 참고하세요.

다른 방법은 테이블 효과를 주는 겁니다. display: table과 display: table-cell을 이용하는 건데요.

이렇게 하면 div가 테이블처럼 동작해 손쉽게 가운데 정렬을 할 수 있습니다. 하지만 table-cell들의 width와 height를 조절하기 어려워집니다.

다음은 tranform이라는 css 속성을 사용하는 방법입니다. 일단 position: relative; top: 50%로 위에서 50%정도 내립니다. 50% 내렸으니 가운데 정렬이 된 거 아니냐고요?아닙니다. 확인해보시면 원하는 것보다 살짝(child 태그 높이의 반만큼) 더 아래로 내려갔다는 것을 알 수 있습니다.

여기에 transform: translateY(-50%); 해서 child 태그 높이의 반만큼 다시 올려줍니다.

깔끔하게 세로 가운데 정렬 됐습니다. 하지만 여기에서도 display: inline-block의 간격 문제가 발생합니다.

float

float도 정렬 방법 중의 하나입니다. 하지만 float만의 특성이 있기 때문에 조심해서 사용해야 합니다. float을 주면 더는 width가 100%가 아닙니다.

float은 이름 그대로 떠있다는 의미입니다. 위에서 아래로, 왼쪽에서 오른쪽으로 태그들이 순서대로 배치되다가 그 중에 한 태그가 공중에 붕 뜨는 거죠. 그렇다면 그 뒤의 태그들은 어떻게 될까요?그 자리를 메우려합니다.

원래라면 normal 태그는 block 태그이니까 한 줄을 통째로 차지해야 하지만 float때문에 위로 올라왔습니다. 이 특성을 사용해서 문단에 이미지를 왼쪽에 넣는다든가(float문자 대신 이미지를 넣으면 됩니다) 할 수 있습니다.

만약 normal 태그처럼 올라가는 것을 방지하고 싶다면 어떻게 해야 할까요?clear: left 또는 clear: right; 해주면 됩니다. float을 제거해주는 역할을 합니다. left right 구분 없이 clear: both 해도 됩니다. 위에 clear 태그를 보시면 더 이상 겹치지 않는 걸 볼 수 있습니다.

float의 문제점은 부모 태그가 float 속성의 자식 태그를 인식하지 못한다는 겁니다. 따라서 높이가 0이 되어버리는 문제가 발생합니다.

위의 예시를 보면 #parent는 배경이 노란색이 되어야 함에도 자식인 .float 태그를 인식하지 못해 height가 0이 되어 배경색이 나타나지 않습니다. float 속성의 자식을 인식하게 하려면 overflow: auto나 overflow: hidden을 주어야 부모 태그가 정상적으로 자식 태그의 높이를 인식합니다. 

display: inline-block의 간격 문제를 해결하는 데도 float: left가 사용됩니다. 아까 transform 예제에서 display: inline-block 대신 float: left를 사용한 겁니다.

간격 문제가 해결되었죠?

다음 시간에는 CSS 우선순위에 대해 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.

댓글

3개의 댓글이 있습니다.
6달 전
제로초님 항상 블로그 잘 보고 있습니다!. 혹시 codepen 세로 사이즈 좀 늘려주실 수 있을까요?.. 사이즈가 너무 작아서 코드보기가 힘든 것 같아요 ㅠㅠ..
일 년 전
지금까지 float는 세로정렬이 불가능한줄 알았는데 transform을 이용할줄은 상상도 못했네요 엄청난 지식에 감탄하고 갑니다!
2년 전
상황별 다 다르겠지만.. 보통? 어떤 방법을 추천하시나요?
혹은 자주 쓰이는 방법이 있을까요??
2년 전
저는 flex나 transform -50% 자주 씁니다.