Javascript & JQuery & CSS

div 요소, 즉 display가 block 속성인 애들로 레이아웃을 잡을 때는 여러 가지 요소가 쓰입니다만 그중 가장 많이 쓰이는 것은 흐름 속성인 float입니다.

float은 크게 두 가지 속성만 가지고 있습니다.


left 와 right


상단이나 하단, 중앙 정렬은 그럼 어디로 간 걸까요? vertical-align을 사용하면 해결이 될까요? 

아닙니다. display:block;(이하 block)인 아이들은 그렇게 호락호락한 아이들이 아니죠.

사실 CSS3에 실험적으로 사용되는 속성 중에 바로 float를 대신해 박스들을 정렬하고 유동적이냐 고정적이냐 하는 속성들이 만들어지고 수정되어지고 있습니다.

(display:box;가 그것인데요) 언젠가는 float 속성 대신 이 속성을 이용해 레이아웃을 짜는 날이 오겠죠. 하지만 그 전까지는? float을 주로 사용해서 레이아웃을 짜야합니다.

지난 시간에도 한 번 훑고 지나갔지만 이 block인 아이들은 width값을 지정해주나 지정해주지 않으나 가상의 마진값이 존재해 100%의 속성을 지닌다고 하였습니다.

즉, 1000px의 박스 안에 200px과 800px인 div를 만들면 나란히 정렬되는 것이 아니라 두 녀석이 각자 한 줄씩 차지하고 있죠.
 

이럴 때 float을 사용하면 두 녀석을 붙일 수 있습니다. 이 아이들에게 각각 float:left; 라는 속성을 대입해보죠. 

float 이라는 속성은 말 그대로 녀석들을 둥둥 띄워서 한쪽으로(left나 right로) 붙여주는 겁니다. 

바닥에 100%의 속성으로 딱 붙어있던 아이들을 둥둥 띄웠으니 당연히 가상의 마진값이 사라지고 직접 정해준 크기만큼의 자리만 차지하는 겁니다.

근데, 두 개의 박스 중에 하나는 오른쪽이고 하나는 왼쪽인데 왜 둘다 float에 left 값을 준 걸까요? 만약 2개이상  레이아웃인 경우에는 어떨까요?

자 차이가 보이죠? 바로 이렇게 순서가 바뀝니다. 마크업 상에 1번 박스를 먼저 작성해주었다 

하더라도 float 속성들이 right부터 시작하기 때문에 오른쪽 순서부터 시작합니다. 해서 보통 레이아웃 작업을 할 때에는 left로만 정렬을 합니다. 

right는 주로 오른쪽에 고정적으로 붙어 있어야 할 레이아웃 요소들에 한해 작성을 합니다.

아랍어처럼 어순이 오른쪽에서 왼쪽으로 간다면 아마도 float에 right를 자주 쓰겠지만요?

자 그럼 이제 레이아웃 정렬은 float만 알면 되니 간단하게 끝나는 걸까요?

그렇지 않죠. CSS 속성 중에 단 하나의 속성만 사용을 해서 완벽하게 레이아웃이 갖춰지지는 않습니다. 

보통 하나의 레이아웃을 만들기 위해 서너가지의 속성을 같이 사용하죠. float을 left로 했다고 해서 block들이 알아서 착착 제 위치에 가는 것은 아닙니다.

가령 이런 레이아웃을 구성한다고 할 때 float 요소로 작성을 하면 이렇게 해야 한다고 생각하겠죠?

일단 가장 큰 문제는 모든 속성이 left가 되었으므로 차곡차곡 줄을 서게 된겁니다. 해결방법은 간단합니다. 

이 block 전체를 감싸주는 div를 만들어서 width 값을 주면 나머지 요소들이 차례로 내려가게 됩니다. 그러나 width값이 고정이 아니라면요? 

그렇다면 당연히 아래로 내려가야 할 요소들은 내려가야지 맞는 겁니다. 그렇다면 float 요소들을 밑에부터 다시 적용시킬 순 없을까요? 

당연히 있죠. 그 얘기 할라고 여지껏 나불댄 건데요. 

바로 clear 라는 속성입니다.

clear


clear는 크게 세 가지 속성이 있습니다. left, right 그리고 both.

글자 그대로 float의 속성을 clear 해버리겠다는 뜻입니다. 앞에 있는 block 요소들의 float 속성을 다시 clear 하고 그 다음 줄부터 float 속성을 가져가겠다는 거죠.

밑으로 내려가야 할 요소에 clear:both나 clear:left를 작성해주면 보기좋게 아래로 내려갑니다. 

그럼 당연히 clear:right;는 right로 된 float 속성들만 clear 하고 다시 시작하겠다는 겁니다. 

both는 둘 다 clear하겠다는 거죠. 그래서 보통 left나 right보다는 both를 자주 사용합니다. 그리고 clear는 오직 float 속성에만 대응하는 속성이죠