안녕하세요. 이번 시간에는 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 우선순위에 대해 알아보겠습니다!
익명
