내용이 안 보인다면 쿠키/캐시를 지우고 새로고침 하세요!
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌4 - CSS - 2년 전 등록

CSS 정렬과 Float

세로 가운데 정렬, inline-block 간격 문제
조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

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

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

정렬

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

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

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

가장 쉬운 방법은  

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- 무단 전재 및 재배포 금지

댓글

2개의 댓글이 있습니다.
19일 전
지금까지 float는 세로정렬이 불가능한줄 알았는데 transform을 이용할줄은 상상도 못했네요 엄청난 지식에 감탄하고 갑니다!
9달 전
상황별 다 다르겠지만.. 보통? 어떤 방법을 추천하시나요?
혹은 자주 쓰이는 방법이 있을까요??
9달 전
저는 flex나 transform -50% 자주 씁니다.