위 그림은 container 영역보다 커진 2개의 box(contents, menu)들이 들어가기 위해 menu부분이 contents 영역 밑부분 부터 시작되게 된다.

큰 예를 들었지만 실로 조그만 box디자인을 할때도 이 문제는 자주 발생하게 된다. banner 박스디자인, 메뉴 섹션 디자인, li,ul 디자인 할때도.. 쉽게 발생되는 부분이다.

그림에서 보듯이 width가 200인 박스를 만든다고 했을경우, 일반 브라우저에서는 위의 그림처럼 margin영역을 뺀 BORDER까지만 계산한 width를 랜더링 한다. 그런데 IE5.X버전의 브라우저에선 아래 그림과 같이 margin부분까지 포함한 영역을 랜더링 함으로써 브라우저/플랫폼 간의 디자인이 조금씩 틀려지게 되는것이다.

box의 기본구조 알고가기

위 css대로 디자인 할 경우 box의 총 크기(영역)는
일반 브라우저 : 10px + 200px + 10px = 220px
IE5x 브라우저 : 20px + 10px + 200px + 10px + 20px = 260px

결과적으로 margin 값의 양쪽 부분 20px + 20px , 총 40px 이 차이나게 된다.

border 값은 없음. 그림 설명상 검정색으로 표시함.

이러한 차이때문에 많은 개발자들이 고민끝에 만들어낸것이 ie box model hack 시리즈들이다. hack방법에는 여러가지가 있는데 이중 가장 쉽고 기억하기 쉬운것은 Tan Hack이라고 명칭되는 방법.

● 방법을 알아보자.

가장 먼저 할것은 box의 정의.

css

.mybox {
width:200px;
margin:20px;
padding:10px;
}

이렇게 적어주고

그 밑에 width에 관한 정의를 한번 더 해준다.
이 부분이 Hack에 관련된 부분으로 standard browser(NN, FF, opera, ie6 ...등등)는 읽지 못하는 부분으로, ie5x/win 브라우저에서만 읽혀지는 코드다.

css

.mybox {
width:200px;
margin:20px;
padding:10px;
}

* html .mybox{
width:220px;
w\idth:200px;
}

아래 부분에 추가한 * html .mybox { } 부분이 Tan Hack의 핵심포인트!
*로 시작한 부분은 ie 버전 외에는 인식을 못하며, html(root element part)기때문에 상위에 있는 이 코드를 ie5에서 인식하여 해당 부분이 랜더링 된다.

non-ie browser는 root element라는걸 인식하지 못하기 때문에 가능한 방법이라는데.. 이부분.. 복잡하다. mysterious wrapper element surrounding "html" code... (이하생략 -_-)

* 다음에 스페이스, html 다음에 스페이스가 꼭 들어가야 된다.

위의 방법 대로 하면 브라우저/플랫폼 등에 구애받지 않고 쉽게 box 모델링을 할수 있다.

더 자세한 내용을 알고싶다면
WSG , Edwardson Tan, PIE 를 방문해보시길..