레이아웃에서 가장 중요한 요소 1) float

레이아웃을 세울 때 가장 중요한 태그는 3가지가 있다.

(크로스브라우징을 고려한 현 시점에서의 대안을 말한다.)

1) float

2) overflow

3) position

이 장에서는 float에 대해 알아보자.

1. float의 탄생배경

웹페이지를 디자인적으로 다이나믹하게 꾸미기 전 시절, 글씨와 이미지 배치 정도가 디자인의 전부였던 시절에 이미지를 배치하면 그 옆에 글자가 나란히 오지 못하는 현상을 해결하고자 float 태그가 탄생했다.

2. float의 원리

위의 사진에서 글씨와 이미지가 서로 겹쳐셔 흐르게 하기 위해 이미지에 float 속성을 줘서 위로 뜨게(float)만든다. 뜬 상태에서 서로의 레이어가 겹치면서 서로 공존하는 것처럼 보이게 된다. 또 float의 원래 의도에 맞게 하기 위해 글씨들은 float된 요소의 높이만큼 옆으로 밀려난다.

또한, float된 요소는 부모입장에서 나간 자식이기 때문에 부모가 이 요소의 높이값을 계산하지 않는다. 이로인해 float를 주면 갑자기 부모가 사라져보이는 현상에 맞딱뜨리게 된다.

3. float의 용도변경

웹디자인 영역이 좀 더 발전하면서 사람들은 디자인적으로 웹문서를 그려내기 위해 그리드가 필요해졌다. 그러나 그 당시 기술로는 그리드를 나타낼 요소가 없었다. 그래서 어쩔 수 없이 float를 그리드 용으로 사용하기 시작했다.

4. float의 해제

float는 자기 자신만 뜨는 것으로 끝나지 않고 다른 요소들과 어우러지면서 형제요소, 부모요소에 전부 영향을 끼치는 요소다. 따라서 float는 해제방법도 매우 중요하다. 그러나 안타깝게도 해제 방법은 좀 복잡하고 모든 float에 적용되는 방법도 없다.

1) clear:both;

원래 float를 해제하는 용도로만 나온 태그다.

clear를 적용한 요소는 float 영향권에서 벗어나는 것을 의미한다.

원래 float의 용도를 생각해봤을 때, 위의 영역들을 float로 어우러져 쓰다가 다음 글을 쓸 때 해제가 이루어졌을 것이므로 clear도 float영역들과 형제요소이지만 float 이후 요소들 중 하나에 적용되야 했을 것이다.

이 점에 착안하여 편하게 클래스명으로 만들어놓고 사용하게 되었다.

.clearfix:after { 

content: ' ';

display:block;

clear:both; 

}

클리어픽스는 크로스브라우징 별로 여러 버전이 있다. 검색해보시길 ^^

2) overflow

float한 요소의 부모에게 overflow를 준다. 단, overflow:visible을 제외한 모든 것.

overflow는 해당 웹문서 안에 독립적인 새로운 문서가 생기는 개념이다. 

따라서 부모에게 overflow를 주면 float된 애들도 새로운 문서에 들어가는 애들이니까 이들까지도 포함이 되고 인지된다.

(여기서 관계없는 얘기지만 position:absolute는 overflow:hidden을 해도 포함되지 않는 무적이다 !)

Block Formatting Context의 원리로 적용한다고 한다. 이도 궁금하면 검색~

3) 부모에게 float

같이 float를 시켜 둥둥 띄우는 개념이지만 이는....전체적인 문서를 생각해봤을 때 별로 좋은 해결책 같지 않다.

4) 부모에게 inline-block;

왜 적용되는지도 모르겠지만... 그냥 이런 방법이 있다고 한다.