noimage

div로 레이아웃을 구성 할 때 발생하는 문제점 해결

부제: CSS 초보가 당황할 만한 것 #1

문제 :

두개의 div를 좌우로 배치할 경우, 브라우저를 작게 줄이면 우측의 div가 아래로 내려간다.

해결법 :

  1. 의미 없는 DIV로 감싼다
  2. Absolute positioning한다
  3. width를 fluid로 한다

설명보러 바로가기

상황 :

좌우로 두개의 column을 가진 layout.. 다시말해 contents와 sidebar가 있는 layout의 경우.
(* presentation을 위한 css는 포함하지 않았음, id, class도 지정하지 않음)

“(table로 한다면) td 두개로 떨렁 나누고, 옆에 녀석이 내려가지도 않고 얼마나 편하고 좋냐” 라고 말하실 분도 있을 지 모르겠지만,
위와 같은 layout에서 table과 div의 차이점에 대해 기술한 문서는 정말정말 많으니 궁금하신 분은 찾아보시길 바랍니다.
“굳이 div로 할 필요는 없잖아”라고 생각하시는 분은 table을 고수하셔도 할말없습니다.

해결법 설명

해결법 #1 : 의미 없는 DIV로 감싼다

contents와 sidebar를 의미 없는 div로 한번 더 깜싸주는 것입니다.
밖을 감싸는 녀석을 container라고 했을 때, container의 width가 안에 있는 두 div의 width를 합친 width로 고정되어 있어야 하겠지요.
이 방법은 의미상 바른 마크업(Semantic correct markup)에는 위배되겠지만..
감싸지 않은 녀석들이 움직이는 것을 보고 개발자가 table로 감싸버리는 것을 내버려 두는 것 보다는 나을 것 같습니다.

제가 얼마전에 양쪽으로 두개의 div를 배치한 코딩파일을 개발자분에게 드렸더니 “브라우저를 줄이면 내려가길래 table로 감쌌다”고 말씀해주시더라구요.
table 소스는 table width=”750” 이었습니다. 나중에 제가 width를 빼고 id를 지정하는 걸로 바꾸긴 했지만요..

해결법 #2 : Absolute positioning 한다

position은 기본적으로 static 속성을 가지고 있습니다. (position: static, relative, absolute, fixed, inherit)
위에 제시한 layout에도 기본적인 static속성을 가지고 있는 것인데요.
그 position을 absolute로 하면 말그대로 absolute-절대값을 가진 위치를 지니기 때문에 내려갈 일은 없지요.
헌데 가장 큰 의미의 겉 녀석이 absolute일 경우는 상관이 없을텐데, 어딘가의 안에 들어가는 컨텐츠가 될 경우에는 absolute position이 문제가 될 수도 있습니다.
(흔히 말하는 layer라는 개념입니다.)

해결법 #3 : width를 fluid로 한다 (%, em등)

  1. Fix :
    http://www.thenoodleincident.com/…/basic2_fixed.html
  2. Fluid :
    http://www.thenoodleincident.com/…/basic2_fluid_touch3.html

위의 두 경우를 비교해 보면, float나 position은 동일하고, 1번은 고정폭(fix) 2번은 가변폭(fluid)이라는 차이점이 있습니다.
고정폭일 경우는 브라우저의 크기가 두 div를 합친 width보다 작아질때 우측 div가 좌측 div의 하단으로 내려가게 되는데, 가변폭일 경우는 두 div에 지정한 각각의 %를 유지하기 때문에 브라우저를 아무리 줄여도 줄어든 브라우저 크기의 일정 %만큼을 유지하게 됩니다.
그래서 내려가지 않게 되지요.

초반에 굉장히 당황했던 것이 떠올라서 적어봤습니다. 제가 생각하는 해결법일 뿐이니, 더욱 효과적이고 효율적인 방법이 더 있다면 많은 분들이 더 알려주실 거라고 생각합니다.

  • tux

    3번의 fluid도 갠찮아 보이지만 사이즈를 줄이게되면 내용이 먹히는 경우가 생겨서 전 개인적으로 ‘의미없는 div로…’ 감싸줍니다. 이런 역할을 하기때문에 의미 없다고도 할순 없지요 ^^
    (container 역할을 충분히 합니다.)

  • tux

    3번의 fluid도 갠찮아 보이지만 사이즈를 줄이게되면 내용이 먹히는 경우가 생겨서 전 개인적으로 ‘의미없는 div로…’ 감싸줍니다. 이런 역할을 하기때문에 의미 없다고도 할순 없지요 ^^
    (container 역할을 충분히 합니다.)

  • 저도 개인적으로 의미없는 div로 감싸는 걸로 선택하고 있습니당 그냥 div두개로 해결 할 수 있으면 좋겠지만.. T_T
    개인작업이면 몰라도 회사일은 거의 fix된 width를 가진 것이 훨씬 많지요~
    괜히 골머리 썩느니 div로 감싸겠어요~! 키키~

  • 저도 개인적으로 의미없는 div로 감싸는 걸로 선택하고 있습니당 그냥 div두개로 해결 할 수 있으면 좋겠지만.. T_T
    개인작업이면 몰라도 회사일은 거의 fix된 width를 가진 것이 훨씬 많지요~
    괜히 골머리 썩느니 div로 감싸겠어요~! 키키~

  • ㅎㅎㅎ 골머리 썩느니 ie 를 없에 버리겠어 라고 외치고 싶군요..

  • ㅎㅎㅎ 골머리 썩느니 ie 를 없에 버리겠어 라고 외치고 싶군요..

  • 없애는건 너무 잔인하고…IE7에 기대를 잔뜩 걸어봅니당 -_-)+

  • 없애는건 너무 잔인하고…IE7에 기대를 잔뜩 걸어봅니당 -_-)+