인터넷 익스플로러 8의 레이아웃 모델

마이크로소프트(이하 MS)가 인터넷 익스플로러(이하 IE) 8 베타1을 공개했다는 소식을 듣고 간단한 테스트를 해봤습니다. 웹 페이지 제작자의 입장에서 이전 버전과의 가장 큰 차이점은 달라진 레이아웃 모델(정확히는 CSS의 “시각적인 서식 모델(Visual Formatting Model)”)이라고 생각하는데 이 부분에 관한 얘기를 다뤄볼까 합니다.

† 이하 글에서는 IE8 베타1을 IE8로 표현합니다. 현재 베타 버전이지만 아래 설명할 내용은 정식 버전에 그대로 적용될 것으로 생각하기 때문입니다.

IE7 이하 버전의 hasLayout 문제

먼저, 이전 버전의 IE에 적용됐던 방법을 알아봐야 하는데 이 부분에 관해서는 이전에 작성했던 hasLayout 속성과 홀리 핵이라는 글에서 다뤘기 때문에 간단히 정리하겠습니다.

hasLayout 개념이 중요하게 여겨진 까닭은 IE가 W3C의 권고안과는 전혀 다른 방식으로 레이아웃, 즉 요소 박스의 위치와 크기를 해석했기 때문입니다. 따라서 표준 방식으로 CSS를 작성해도 예상했던 것과 다르게 레이아웃이 표현되는 경우가 많았습니다. 간단한 예를 들어보지요.

<div id="wrap" style="width:300px; background-color: red;">
	<div style="width:100px; height: 50px; float:left; background-color: #666;"></div>
	<div style="width:100px; height: 50px; float:left; background-color: #ccc;"></div>
</div>

표준 레이아웃 모델에 따르면 float된 요소는 정상적인 문서의 흐름(normal flow)에서 벗어나 있기 때문에 idwrapdiv 요소는 높이가 계산되지 않습니다. 따라서 두 개의 회색 div만 표시되지요. 하지만, 독자적인 hasLayout 개념을 사용하는 IE에서는 width를 지정하는 것 만으로도 wrap 높이가 계산되기 때문에 빨간색 div까지 전부 세 개의 박스가 화면에 표현됩니다.

아래 결과를 IE7 이하 버전과 표준 레이아웃을 따르는 파이어폭스나 오페라 브라우저로 비교해보면 차이를 알 수 있습니다.


하지만, IE 8에서는 다른 주요 브라우저와 동일하게 표준 레이아웃 모델이 적용됩니다. 그러므로 두 개의 회색 박스만 표현되지요.

overflow 속성과 생성된 컨텐츠(generated content) 지원

IE 7은 이전 버전에서 Layout을 갖게 했던(hasLayout) widthheight 속성에 추가로 overflow 속성을 지원합니다. 즉, overflow 속성으로도 Layout을 갖게 만들 수 있습니다. 그런데 overflow 속성이 표준 레이아웃을 지원하는 브라우저에서 높이를 계산하도록 하는데(float 해제(clearing float)) 많이 사용되기 때문에 레이아웃 해석에 대한 실제 구현 방법은 다르지만 결과적으로는 같은 효과를 낼 수 있었지요. IE8에서의 overflow가 IE7 방식으로 해석되는지, 아니면 표준 방식을 사용하는지 확실하지는 않지만 적어도 제 생각으로는 기존 hasLayout 방식을 버리고 표준 방식을 받아들였을 것 같습니다.

또한, IE8은 생성된 컨텐츠를 만들 수 있는 가상 요소(Pseudo-element) 역시 지원합니다. 따라서 다음과 같은 class를 사용해서 float을 해제시킬 수도 있습니다.

.layoutFix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

hasLayout과 마진 겹침(margin collapsing)

† hasLayout은 CSS의 마짐 겹침 방식에 다양한 영향을 끼칩니다. 이 부분을 설명하려고 간단한 예제를 넣었는데 소스와 설명에 오류가 있었네요. ^^; 자료를 찾아 보니 간단히 다룰 문제가 아니어서 추후에 따로 포스팅을 하려고 합니다. 일단 관련 예제와 설명이 있는 웹 페이지를 알려드릴게요.

Margin collapsing and hasLayout
hasLayout and margins of nested boxes

IE8을 고려한 조건 주석문(conditional comment)

새로 발표된 IE8로 위 예제를 확인해보면 파이어폭스나 오페라, 사파리 등과 동일한 결과를 보여줍니다. 즉, 표준 레이아웃 모델을 지원한다는 얘기지요. 따라서 Layout을 갖게 만들기 위해서 사용되던 홀리 핵(Holly hack) 등을 적용할 필요가 없어졌고, 전체 IE에 적용되는 조건 주석문이나 핵은 오히려 문제를 일으킬 수도 있기 때문에 이런 부분은 IE7 이하에만 적용되도록 해야 합니다. 예를 들어서

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/blog_ie.css" />
<![endif]-->

blog_ie.cssheight: 1%; 같은 규칙을 지정해서 Layout을 갖게 만들었다면 주석문의 조건을 IE7 이하로 한정하고 IE8에서는 앞서 설명한 overflowlayoutFix 같은 class를 사용해서 높이가 계산되도록 해야 합니다. 아래 조건 주석문은 IE 전용 CSS를 IE7 이하에만 적용시킵니다.

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/blog_ie.css" />
<![endif]-->

마치며

현재 IE8은 베타 버전인 만큼 많은 버그가 포함되어 있을 것입니다. 완성도 면에서 평가하기는 아직 이른 시점이지만 사용해보니 확실히 이전 버전보다 W3C의 권고안(표준) 지원 면에서 큰 향상을 확인할 수 있었습니다.

충분히 테스트해보지 않아서 확실히 말씀드릴 수는 없지만 다른 브라우저에서 잘 보이는 레이아웃이 IE8에서 어긋난다면 먼저 IE8에만 별도로 적용되는 핵이나 규칙을 사용하고 있는지를 의심해봐야 합니다. 그리고 나서 IE8의 버그 때문인지를 알아봐야 겠지요. 일반 사용자들이 IE8 테스트로 다음이나 네이버 등의 포탈 사이트를 확인하는데 이런 사이트는 아주 복잡하고 정교한 마크업과 CSS로 이루어져 있습니다. 그렇기 때문에 IE8의 표준 지원 여부를 렌더링되는 결과만으로 평가하는 것은 상당히 어렵다고 생각합니다. IE에만 적용되는 코드가 섞여 있을 수 있으니까요.

개인적으로는 IE8이 acid2 테스트를 통과했다는 사실 만으로도 이전 버전보다 훨씬 표준을 잘 따른다고 평가합니다. acid2 테스트가 간단해 보이지만 실제로는 다양한 positionCSS 선택자(selector), 기타 CSS 개념들을 사용하기 때문에 제대로 표현된다는 것은 그만큼 많은 부분에서 표준을 따른다는 얘기거든요.

IE8의 등장으로 이제 모든 주요 브라우저가 표준 CSS 렌더링 방식을 지원하게 되었습니다. 향후 출시될 정식 버전과 IE8 등장으로 달궈진 브라우저 제조사들의 표준 지원 경쟁이 기대되네요.

댓글 11개가 달렸습니다. 태그: , , ,

  1. 이태임 | 2008-03-07 14:43

    좋은 글 감사합니다.

  2. dohoons | 2008-03-07 18:35

    새로운 IE 의 기능도 중요하지만 구버전의 IE 가 빨리 사라지는게 더 중요할 것 같네요
    IE6 이 존재하는한 한계가 많이 생기니까요 ㅠㅠ 사람들이 IE6 좀 하루빨리 안쓰게 되었으면 좀 좋겠습니다.

  3. wystan | 2008-03-07 22:48

    저 역시 IE6가 빨리 다른 브라우저로 대체되었으면 하는 바램입니다.
    그런데 워낙 사용자가 많아서 언제쯤 그런 날이 올 지 모르겠네요~ ^^;

  4. seevaa | 2008-03-07 23:39

    올블로 들어와서 봤는데, hanrss에는 이제서야 새글이 뜨네요.. 그동안 Wystan's tales [-] 요렇게 ([-]=휴먼상태)되어있었거든요.

    IE8 베타, 저도 깔아서 봤는데 역시나 제 블로그는 문제가 있더라구요. ㅡㅡ;
    저도 잘모르겠지만,

    h1 a { display:block; width:250px; height:78px; background:url("./images/title-seevaa.gif") left top no-repeat;}
    h1 a:hover { background:url("./images/title-seevaa-on.gif") left top no-repeat;}
    

    요게 안먹히더라구요, 해서 position:absolute; 추가해보니 먹히고...
    pre { overflow:auto;} 이거도 wystan님은 되는 것 같은데, 제 블로그에선 안되더라구요.
    몇번 수정해보다 지쳐서 일단은 '버전타게팅' 요걸로 때워놨습니다.

    방금 FF2에서 FF3베타로 깔아서 보니 이건 거의 같게 나와서 그나마 다행입니다만, 정말 관련종사자분들은 브라우저 종류가 많다는게 오히려 고통일거란 생각이 듭니다. 게다가 제 주위만 보더라도 100이면 100 IE6입니다. 아직 우리나라 일반인들에겐 다른 브라우저가 있다는 것조차 모르는 분이 많은 것 같아요. (저처럼 약간 알아도 골치네요~ ^^) IE7에 IE8까지 준비중인데, 대부분의 사람들은 아직 IE6인게...

  5. wystan | 2008-03-08 11:16

    그동안 포스팅을 너무 오래 안했었네요. 거의 반 년 만에 쓴 글이네요~ ^^;

    IE8 베타에 여러 문제가 있다는 것은 확실합니다. 일단 베타 버전이니까요. 시간이 지나면서 하나씩 그 비밀이 밝혀질 겁니다. 그 결과가 MS에 리포팅되면 최종 버전은 더 나은 모습으로 등장하겠지요.

    쎄바님 블로그에 어떤 문제가 발생하는지 정확히 모르겠지만 IE8 베타에 레이아웃을 맞추는 것은 이르다고 생각해요. 현재는 테스트와 그 결과에 대한 피드백 단계니까요. 지속적으로 관심을 갖고 지켜보면 어떤 방향을 찾을 수 있을 것이라 기대하고 있습니다.

    아직 FF3 베타는 테스트를 안해봤지만 현재의 FF2보다 훨씬 나은 모습을 보여줄 것이라 믿습니다. FF의 선전 탓에(오페라와 사파리 역시) 브라우저의 웹 표준 지원이 한층 강화된 점을 생각하면 FF가 참 고맙네요.

    하지만, 문제는 역시 구형 브라우저입니다. IE5.X 브라우저는 이제 거의 은퇴했는데.. IE6는 여전히 너무 막강하네요^^; 그래도 언젠가는 IE 핵을 사용하지 않고 완전한 표준 기반으로 페이지를 제작할 수 있을 때가 오겠지요.

  6. seevaa | 2008-03-17 23:15

    몇일동안 블로그가 안떠서 놀랬어요~ 없어지는 줄 알고… wystan님 블로그 계속 들어오게 되더군요~

  7. 김군우 | 2008-03-17 23:53

    감사히 잘 읽었습니다. 위스턴님 정말 꼼꼼하신 것 같아요. 이 글 덕분에 IE8에 대한 이해도에 많이 도움이 되었습니다. ^^

    nightly build를 통해 점점 발전하는 다른 브라우저들과 달리 IE은 언제나 그렇지만 답답하고 느려터진 것 같습니다. 어떤 게 버그고 어떤 게 구현이 안된건지 파악하기도 어렵네요.;;

  8. wystan | 2008-03-18 12:37

    며칠 전에 텍스트패턴을 새 버전으로 업데이트 했는데 스타일 전환에 사용되는 쿠키 관련 플러그인에 문제가 있었더라고요.

    제 PC에서는 잘 보여서 늦게 알았습니다. 일단 수정은 했습니다.
    자주 찾아주셔서 고맙습니다. 저도 쎄바님 블로그 자주 들르는데 댓글을 잘 안남기게 되네요~ ^^;

  9. wystan | 2008-03-18 12:43

    김군우님. 찾아주셔서 고맙습니다.
    IE8의 표준 지원이 왜곡되는 것 같아서 급히 쓰느라 테스트를 많이 못해봤는데 도움이 되신다니 기쁘네요.

    IE가 타 오픈소스 브라우저보다 개발 측면에서 더디긴 합니다. 그래도 시간이 흘러 정식 버전이 나오면 웹 제작자로서 참 기쁠 것 같아요. 모든 주요 브라우저가 웹 표준을 지원하게 되니까요. 이번에는 기대해도 될 것 같다는 예감이 듭니다.

  10. mari | 2008-03-18 18:15

    안녕하세요. 글 잘 읽었습니다.
    다른 글을 보다가 링크로 들어오게 됐습니다.

    wystan님의 글을 읽고 저도 테스트를 해 봤는데요. 위에서 회색 박스에서 제시하셨던 소스로 파이어폭스, 오페라, IE8로 테스트를 해 봤습니다.
    파이어폭스와 오페라, IE8의 테스트 결과가 조금 다릅니다.

    오페라와 IE8의 경우는 html문서 상단에 DOCTYPE이 XHTML 1.0일 경우 회색박스 두개만 나오는군요.
    DOCTYPE을 제거하거나 HTML 4.01로 선언하면 빨간색 박스도 나옵니다.
    파이어폭스는 아주 잘 지키는군요. 선언 여부에 상관없이 회색만 나오네요..
    뭐 다른 설정이 있을 수도 있지만(있으면 곤란하지 않을까요? ㅡㅡ;;) 아무런 설정없이 기본 설치 상태로 테스트를 해봤습니다.
    wystan의 글을 오페라나 IE8에서 보면 블로그가 XHTML 1.0으로 선언되서 회색박스만 나오구요.

    테스트로 인한 결과가 헷갈리네요.. DOCTYPE에 상관없이 표현하는 파이어폭스가 옳은건지 DOCTYPE에 따라 표현 방식이 다른 오페라, IE8이 옳은건지요..
    글에서 표준 레이아웃 모델에 대해서 언급하신 걸로 봐서는 파이어폭스가 옳은 듯 하기도 하구요.
    참고로 네이버 메인을 IE8에서 보면 실시간 검색부분이 투명하게 펼쳐져 나오네요. ㅋ

    wystan 글을 통해 좋은 지식 하나 얻고 갑니다. ^^;

  11. wystan | 2008-03-18 18:52

    글 남겨주셔서 고맙습니다. ^^

    브라우저는 문서의 DOCTYPE에 따라 Standards 모드나 Quirks 모드로 동작합니다.
    그런데 Quirks 모드는 표준 권고안을 따르지 않는(혹은 권고안 발표 이전에 만들어진) 구형 브라우저의 렌더링을 애뮬레이션하는 방식이라서 명확한 표준이 없습니다.

    그렇기 때문에 Quirks 모드에 대한 구현 방식이 브라우저마다 다릅니다.
    자료를 찾아보니 오페라와 IE는 비슷한 점이 많네요. 예를 들어서 패딩과 보더가 width에 포함되는 IE의 박스 모델이 오페라 Quirks 모드에도 적용됩니다. 반면에 파이어폭스는 Quirks 모드에서도 표준 방식으로 width를 계산합니다.

    이렇게 Quirks 모드에서의 렌더링에는 기본적으로 표준이 아니라는 전제가 깔려 있기 때문에 우열을 가늠할 수 있는 문제가 아닌 것 같습니다.

    관련 자료를 링크하니 참고하시기 바래요~
    IE DOCTYPE 스위칭 문서
    파이어폭스 DOCTYPE 스위칭 문서
    오페라 DOCTYPE 스위칭 문서

댓글이 닫혔습니다.