noimage

오늘의 삽질보고서 : CSS Box Model

오늘은 회사일이 한가로워서 이런 삽질을 했다.

사실 시작은;
회사일을 하면서 div를 이용해 layout을 해놓은 것들이 있는데, 개발실에 넘기고 나서 나중에 확인을 해보면 브라우저의 크기를 가로로 줄일 경우 우측에 있는 div가 자꾸 하단으로 내려가는 현상이 발생했다..
ie와 ff의 렌더링 차이로 인해서 margin 이나 padding 때문에도 그런일이 생기곤 하는데 CSS 초보인 난 아무것도 모르겠고 해서..
큰 div안에 sidebar와 contents를 넣는 방법 밖에는 모르겠어서! 그에 대한 연습을 하기로 한것이다.
(원래 넣어야 하는건데 내가 몰라서 여태 안넣고 쑈한것 같기도 하다~)

회사일이란게 워낙 1px에 목숨거는 일이라 확실하게 width에 대해 알아보려고 Grid BG까지 만들어서; 배경에 깔고..
여기저기에 CSS에 대해 공부해 보면 거의 초반에 접하는게 ie와 ff의 padding, margin에 대한 렌더링 차이 일것이다.
나도 글을 여기저기서 많이 봤고 대충 기억은 하는데, 직접 겪어보지 않으면 맨날 공부하고 까먹고가 반복 될 것 같아서 오늘 확실히 체험해보려고 한당..

자, 오늘 참고 한 곳은 [CSS] box model hack for IE. (via 5pix.com)

근데 아쉽게도 실험해보니까 나는 ie6라서 실험하나마나 였다 -_-);
그래서 렌더링 차이에 대해서는 접어두고; 기냥 고정된 width에서 padding을 넣을 경우 이것저것 어떻게 조정해야 하는 가에 대해 연습해 보기로 했다.
한마디로 그냥 초보삽질연습이당;

이런거 해볼라구 한당..

div_ex_01

위는 FireFox 1.0.4
아래는 InternetExplorer 6.0.2900.2180.xpsp_sp2_gdr.050301-1519 -_-;

우선, 모든 padding과 margin을 0으로 하고 원하는 사이즈를 적어줬다.
(body에는 기본적으로 10의 padding을 줬다.)

여기서 한가지 의문점.
젤 겉의 녀석에 padding이 없을 경우.. FF에서는 보이지 않는다. @_@;
그녀석에게 적용된 width는 분명히 적용되어 있는데 background가 보이지 않는다..
왤까?
div_ex_02

위 그림을 보면 위에 있는.. FF로 렌더링된 아이는 background가 보이지 않고 있다.

이걸 보면 FF가 얼마나 깐깐한 녀석인지 알 것 같다.
지금 상태는 전체를 싸고있는 container안에서 Sidebar와 contents부분에 float:left;를 해준 상태이다.
FF에서는 그 아래에 또다른 div에 clear:both;를 해줘야 둘러 싸고 있는 Container가 제대로 보인다.
IE에서는 clear해주지 않아도 둘러싸고 있는 container를 그냥 보여준다.

아무튼 시작해보자. 위 그림의 소스.

/* 요 마지막 div말인데 IE에선 안보이게 할 수 없는건가? 내 멋대로 height만이라도 줄여볼라고 삽질했당.. */

제일 처음의 그림과 똑같은 사이즈로 지정해줬다.

자 이제 #container 안쪽의 여백을 위해 padding: 10px을 줘보자.
div_ex_03

우측의 연두색이 조금 넓어진 것이 보일까?
원래의 width는 410px인데 padding: 10px로 인해 사방으로 10px이 더해져서 연두색의 container는 430px이 되어 버렸다.
의심이 가는 사람은 배경의 pixel을 세어보자; (한칸=5px)

원래 의도 한 것은 전체의 width가 410px이니까
현재 설정된 width에서, padding으로 추가된 양쪽의 10px씩을 빼줘야 겠다.
{width - (2 x padding)}

 

 

div_ex_04

#container의 width가 410px이 되었다.

자, 이제 좌측 sidebar에 padding을 10px줘보자.
div_ex_05

어라..
우측에 잘 있던 contents box가 옆으로 내려왔다.
sidebar의 width 90px에 padding:10px이 더해져서 sidebar전체의 width가 110px이 되었고, 더불어 sidebar와 contents의 width를 합친 값이 container의 값보다 커지면서 contents가 자리가 좁다고 옆으로 내려와 버렸다.
어차피 sidebar는 90px로 만들려고 했었으니까, 아까 container에게 해준 것 처럼 늘어난 padding값 만큼을 sidebar의 width에서 빼주자.

#contents에도 똑같은 방식으로 padding을 주고 width값을 조정해주면 내가 원했던 결과물을 얻을 수 있다.
margin을 적용할때도 뭐 마찬가진것 같다. -_-)

얼렁뚱땅 실험 끝.

이쯤에서 알게된 것 한가지
sidebar에 float:left를 주고 contents에는 float값을 지정해주지 않으면 둘 사이에 여백이 생긴다.
일몰님이 포스팅 한 걸 보니 3px의 여백이 생긴다고 하던데, 내가 본게 이게 아닌가 싶다.
일몰님 말대로 margin-left:-3px;을 해주던지
우측의 div에 float값을 지정해 주면 괜찮아진다. (left, right 둘다 여백은 없어진다. 물론 right는 크기가 정확하게 맞아야만 여백이 없겠지 )

이쯤에서 알게된 것 또 한가지
container안에 있는 sidebar에게 margin을 주면 left margin은 2배로 적용이 된다.
해결법은 display:inline; The IE Doubled Float-Margin Bug 참고
아래 그림을 보자

div_ex_06

둘다 sidebar에 margin:10px;을 해준 상태인데 , 둘중에 위에건 좌측에 연두색이 20px로 나타난다. 아랫건 문제를 해결한 후 좌측 10px이 된 상태.
이렇게 해결하자.↓

* 회사에서 삽질보고서 준비해뒀는데, 집에 와서 봤더니 일몰님이 거의 똑같은 내용의 글을 쓰셔서 깜짝 놀랬닷.. ㅎㅎ 일몰님은 깔끔한 정리고, 난 삽질 한 내용 적은거 .. 키키

ps. 이거 다 읽은 사람 박수 쳐준다;;;;;

  • 박수 쳐라 빨랑;;
    언능 언능~ 다 읽었다! ㅋㅋ

  • 오어~ 박수 ㅎㅎㅎ 내가 써놓고 내가 읽기 승질나 ㅎㅎ

  • ^^ 박수쳐주세요 ㅎㅎㅎ

    헌데 모든경우를 충족시키려면, 다시말해서 모든 브라우저에 정확하게 똑같이 보여주고 싶다면 css hack 방법을쓸수밖에 없어요,, 그렇지 않으면 약간의 조정을 해주면서 디자인의 차이를 감수하면서 할수는 있겠습니다. ㅡㅜ

    margin 이 2배로 되는건 제 포스팅에도 링크를 걸어놓았지만 신현석님께서 잘 설명해 주셨더군요 ^^
    http://hyeonseok.com/home/archive_css.php

  • 블로그라인에서 RSS를 제대로 읽어오고 있네요~ 먼가 대책을 세웠나요? 어쨓든 축하~!

  • 일모리/ 흐흐 일몰님 박수 ㅎㅎㅎ 넹~ double margin에 대해 서 예전에 글을 읽었었는데, 역시나 겪어보지 않으니 까맣게 잊고 있다가 직접 겪으니 또 새롭더라구요 ㅎㅎ

    hooney/ 후니님 말씀듣고 bloglines에 다시 등록(?)해 봤는데 되긴 되네용 ^^ 히힛 (안되길래 열받아서 삭제해놨었어요; )
    근데 아직도 sub with bloglines로 확인해 보면 rss 0.92/rss 2.0/ atom0.3 / Comment rss는 뜨지 않아용
    index.php/feed/ 요거 하나만 딱 뜨는..이상한…ㅠ.ㅠ
    그래두 되니깐 다행이네용 ㅠ.ㅠ

  • 와 대단합니다. 이렇게 꼼꼼하게 정리해 놓으시다니…
    똑같은 걸로 고민하는 분들 덜 고생하겠네요.
    사실 자신이 삽질한 경험을 막상 어떻게 해결하고 나면, 나중에는 생각하기도 끔찍해서 정리는 커녕 엄두도 못내는데…

    저도 이걸로 고민한 적 있습니다. 오른쪽 사이드 바가 계속 내려가는데, 파폭은 이상이 없는 겁니다. -_-;; 결국 파폭은, float 된 게 브라우저 폭 보다 길어도 밑으로 내려가지 않고, 박스를 뚫어버리고, 익스는 내려가더군요.. 직관적으로는 파폭이 맞아 보이는데, 어떤 게 표준에 더 부합하는 건지는 모르겠습니다.

  • 하핫..오늘 비슷한 float layout 에 관한 글을 두분이나 올리셨군요! ^^

    float 는 스펙에 따르면 공간을 차지하지 않기 때문에 parent block 의 height 가 0이 됩니다. 이것을 해결해 주는 방법은 여러가지가 있는데 하신 것 처럼 dummy 를 넣어도 되지만 이것은 semantic markup 으로 볼때 별로 좋지 않죠.

    최근에 사람들이 overflow: auto 로 clearing 을 할 수 있다는 것을 발견했지요. 문제가 좀 있긴 하지만 child 에 overflow: hidden 을 주는 식으로 하면 해결이 되기는 합니다. float layout 을 쓸때 IE 에 *알 수 없는* 버그 때문에 overflow: hidden 을 쓰는 것을 추천 드립니다. img 로딩때 넘쳐서 줄이 바뀌는 경우가 있거든요!

  • yser/ 꼼꼼하다기 보다는… 몰라서 쓸말 안쓸말 다 써놓는 것이죠 T^T) 제가 봐도 FF는 내려가는 일이 참 드문데, 역시나 IE에서 문제가 많이 발생해요.. 미워 죽겠어요 ㅠ.ㅠ (가끔은 FF가 너무 깐깐하게 굴어서 미울때도 있어요 ㅎㅎ)

    신현석/ 회사에서 할일없어서 삽질하다 보니 이런글을 쓰게 됐는데 ^^; 어쩌다보니 일몰님하고 같은날 쓰게 되었네용
    child에 overflow:hidden;을 써보라는 말씀이시죠?
    또 직접 체험해보겠습니당;; 겪지 않으면 기억하지 못해요 ㅠ0ㅠ)

  • yser/ 꼼꼼하다기 보다는… 몰라서 쓸말 안쓸말 다 써놓는 것이죠 T^T) 제가 봐도 FF는 내려가는 일이 참 드문데, 역시나 IE에서 문제가 많이 발생해요.. 미워 죽겠어요 ㅠ.ㅠ (가끔은 FF가 너무 깐깐하게 굴어서 미울때도 있어요 ㅎㅎ)

    신현석/ 회사에서 할일없어서 삽질하다 보니 이런글을 쓰게 됐는데 ^^; 어쩌다보니 일몰님하고 같은날 쓰게 되었네용
    child에 overflow:hidden;을 써보라는 말씀이시죠?
    또 직접 체험해보겠습니당;; 겪지 않으면 기억하지 못해요 ㅠ0ㅠ)

  • yser님께 도움이 될런지는 모르지만,
    표준에 따르면,

    div2를 담고 있는 div1 이 있습니다.
    float left 한 후 div 2가 height 이 더 높아 있다면
    원래는 div2가 자신을 담고 있는 div1을 뚫고 나와서 밖으로 늘어져 있어야 하는게 표준입니다. IE는 div1이 늘어나서 div2를 담으려고 하죠.
    이상한듯 하지만 원래 일어나야 하는 반응입니다. ㅎ

  • 일모리/ 어떨땐 알아서 같이 늘어나 주는 IE가 고마울때도 있어요 ㅎㅎ -0-);

  • 일모리/ 어떨땐 알아서 같이 늘어나 주는 IE가 고마울때도 있어요 ㅎㅎ -0-);


  • 요 마지막 div말인데
    IE에선 안보이게 할 수 없는건가?
    내 멋대로 height만이라도 줄여볼라고 삽질했당..

    그 div 를 안보이게 하는법을 알려드릴께요 ^^

    예를들어서
    div id=abc 라고 하면

    css 에서 * html #abc {display:none;} 해주면
    * html 이 붙어서 ie 만 인식을 하므로 보이지 않게 됩니다. 🙂


  • 요 마지막 div말인데
    IE에선 안보이게 할 수 없는건가?
    내 멋대로 height만이라도 줄여볼라고 삽질했당..

    그 div 를 안보이게 하는법을 알려드릴께요 ^^

    예를들어서
    div id=abc 라고 하면

    css 에서 * html #abc {display:none;} 해주면
    * html 이 붙어서 ie 만 인식을 하므로 보이지 않게 됩니다. 🙂

  • 아 그런 꽁수도 있네요.. 흐흐흐..
    위에 현석님이 말씀하신 overflow도 있던데.. 둘다 써봐야 겠군요 -_)+

  • 수고했다;

  • 수고했다;

  • 오빠 다 안읽었죠! 박수 안쳐줄테야;

  • 오빠 다 안읽었죠! 박수 안쳐줄테야;

  • 아하하 이거 css 버그가 사람 여럿 잡는군요..;
    정말 언제 이런거 다 한데 모아서 css 버그 파티라도 해야 할지도 모르겠군요. -_-;

    으휴 정말 여태껏 다들 이렇게 겪어왔다는 얘기잖아요. 앞으로도 미지의 버그; 를 발견해야 할테고…

  • 아하하 이거 css 버그가 사람 여럿 잡는군요..;
    정말 언제 이런거 다 한데 모아서 css 버그 파티라도 해야 할지도 모르겠군요. -_-;

    으휴 정말 여태껏 다들 이렇게 겪어왔다는 얘기잖아요. 앞으로도 미지의 버그; 를 발견해야 할테고…

  • .. 다 읽긴 했는데 무슨 말인지 몇개는 못 알아들었달까 ( ..)

  • .. 다 읽긴 했는데 무슨 말인지 몇개는 못 알아들었달까 ( ..)

  • yser / 버그미워용 ㅎㅎ
    나니 / 언젠간 알아듣겠지 ㅎㅎ

  • Headvoy

    음. 보니까 쿠키님도 아직 익숙하지 않으신 부분이 있는거 같네요.

    에.. 테이블로 하면 쉽게 하실 수 있는거죠? 그러시죠?

    음.. 근데 정말 더듬더듬 다시 배워가면서 꼭 CSS로 해야될까요? 정말 그럴까요 ㅇㅅㅇ?
    그쪽이 관리하기 편할까요? 정말일까요? (솟구치는 의구심;;)

  • Headvoy

    음. 보니까 쿠키님도 아직 익숙하지 않으신 부분이 있는거 같네요.

    에.. 테이블로 하면 쉽게 하실 수 있는거죠? 그러시죠?

    음.. 근데 정말 더듬더듬 다시 배워가면서 꼭 CSS로 해야될까요? 정말 그럴까요 ㅇㅅㅇ?
    그쪽이 관리하기 편할까요? 정말일까요? (솟구치는 의구심;;)

  • 익숙하지 않다기 보다는 확실하게 인지해보려고 삽질해본거예요 ㅎㅎ
    맨날 삽질하면 오타내고, 가로 안닫고 padding빠지는거 깜박하고 .. 이런식으로 삽질을 하도 많이해서.. 기록이라도 좀 남겨볼까 해서..
    그래두 완전 200% 익숙한건 아니겠죠 @_@
    테이블로 해도 전 삽질 많이 해요 ㅎㅎ
    젤 많이 하는 게 가로 안닫고선 어디서 안닫았는지 못찾아서 삽질하기;
    글구 ie가 버그가 워낙 많아서.. hack같은 것들 써주려면 뭐가 잘못된건지 많이 알아야겠죠 뭐
    버그로 치면 div보다는 table이 훨씬 많을 겁니다 @_@

    배우기 싫으면 배우지 마세요;;;
    주변에서 강요하는 사람 없잖아요 ㅎㅎ
    나중에 손해보는 것은 자기자신이 될지도..

  • drumlove

    http://miniwini.com/miniwinis/bbs/index.php?bid=share&m=search&mode=read&id=4499&p=1&keyword=버전&scale=1&op=and&idx=1 여기 보니 버전별로 IE다운받을 수 있네요… 바이너리버전으로 받으면 되구요…
    써본 결과로는 두개의 다른버전을 같이 띄우면 익스플로러가 죽는 현상이 가끔 발생합니다만…
    전 이걸로 IE 버전별 보기 해결했구요…
    Opera가 free로 풀렸습니다. 혹시나 해서…
    그럼 내용 잘봤습니다.

  • drumlove

    http://miniwini.com/miniwinis/bbs/index.php?bid=share&m=search&mode=read&id=4499&p=1&keyword=버전&scale=1&op=and&idx=1 여기 보니 버전별로 IE다운받을 수 있네요… 바이너리버전으로 받으면 되구요…
    써본 결과로는 두개의 다른버전을 같이 띄우면 익스플로러가 죽는 현상이 가끔 발생합니다만…
    전 이걸로 IE 버전별 보기 해결했구요…
    Opera가 free로 풀렸습니다. 혹시나 해서…
    그럼 내용 잘봤습니다.

  • 으흐~ 3개월이나 지난 글이되었네용..ㅎㅎ
    전 저번에 여러 버전 한꺼번에 다 띄워봤는데.. IE가 죽는다기 보다는 서로 환경설정이 꼬여가지고 IE6의 설정이 변하더라구요.
    그래서 딱 한번 써보고 안쓰고 있어요
    IE7도 써봤는데, 대충 써봐서 그런지 아직은 기능상으로 뭐가 바뀐지 잘 모르겠네요.