'div layout'에 해당되는 글 1

  1. 2009.12.10 CSS : Float 흐름끊기 (2)
2009.12.10 07:30 | 개발이야기

앞서 flow에 따른 float을 살펴 보았습니다.
실제로 float을 사용하다 보면 이리저리 예상치 못한 난관에 부딧히면서 머엉~ 해질때가 많은데요
그런 케이스를 몇개 추려서 한번 보도록 하겠습니다.

위 화면을 보면 뭔가 레이아웃이 깨져 있다는 것을 느낄 수 있을겁니다.
이 화면의 html 구조는 다음과 같습니다.

또한, CSS를 보도록 하겠습니다.

티스토리 스킨을 조금 만져봤던 분이라면 익숙한 구조일 것입니다 ^^;
레이아웃이 블로그 2단 스킨의 그것과 흡사합니다.
근데, 화면을 보면 뭔가 조금 이상해 보일겁니다.. 

넵. 화면에 회색배경으로 된 div 요소..
즉 container 부분의 높이가 자식 요소의 높이를 반영하지 않는 문제점이 보이네요.
이는 floating된 자식의 요소가 부모요소에게 자신의 크기를 전해주지 못해서 생기는 문제입니다.
위의 레이아웃인 경우 보통의 블로그 스킨을 생각하면 footer부분은 화면의 하단에 위치하기때문에
footer부분에서 float을 없애주면 됩니다. 

위의 스타일처럼 clear:both; 를 지정해주면 float이 사라져 아래와 같이 left 요소의 하단에 길게 위치함을
확인 할 수 있습니다.

자, 그렇다면 만약에 이전의 화면처럼 원래 footer가 right 아래 위치해야 한다면 어떻게 해결을 할까요?

방법은 :after[각주:1] 가상선택자를 이용하여 float을 clear 할 수 있습니다.
즉, 아래처럼 container에다 :after 가상선택자를 이용하여 clear:both를 주고 새로운 스타일을 주면 됩니다.

그러면 결과는 이렇게 변합니다.

또한, float은 각각의 크기에 민감합니다. 
위의 상태에서 left 요소의 너비를 400px로 늘려서 확인을 해 보면 right 요소가 아래로 떨어지는것을
확인 할 수 있습니다.

부모 요소(container)의 너비가 700px인데,
자식 요소들이 각각 400px로 합이 800px가 되니 right 요소가 공간이 없어 아래로 떨어지는 현상입니다.
footer는 우리가 너비를 주지 않았기 때문에 유연하게 줄어든거죠 ^^;

특히 이러한 경우는 블로그 스킨에서 종종 나타나는 문제인데요, container가 고정 크기가 아닌 가변적인 크기거나
크기지정을 해 주지 않아서 브라우저의 너비가 충분히 넓을때는 문제없이 보이다가
브라우저의 너비가 좁아지면 해당 부모요소의 너비가 좁아지면서 내부의 자식 요소들의 레이아웃이 깨지기도 합니다.

해결법은 부모요소의 크기를 자식요소들 너비의 합과 같거나 더 큰 고정크기로 바꿔주면 해결됩니다 ^^

적다보니 float을 clear 하는 방법에서 글이 길어지네요..^^;
float에 대한 부분은 이걸로 마치도록 하고,
이후에 float에 관한 유용한 팁이 생각나면 다시 새로운 글로 적어보도록 하겠습니다. ^^



  1. 해당 요소의 뒷부분을 의미합니다. [본문으로]

'개발이야기' 카테고리의 다른 글

HTML  (4) 2009.12.14
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
CSS Position 이야기  (9) 2009.12.08
CSS Sprite 를 이용한 간단한 롤오버 메뉴  (2) 2009.12.07
  1. Favicon of http://www.jlife.or.kr BlogIcon JLIFE (2010.04.12 15:50)
    아 완전 감사해요. footer이 계속 본문과 겹쳐 보여서 한참을 고생했는데 clear:both 한방에 해결했네요..;