인터넷 익스플로러 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>

더 보기 » | 댓글 11개가 달렸습니다.

DOM 스크립트: 이미지, 텍스트 스크롤러

scrollObj는 자바스크립트의 문서 객체 모델(DOM)을 이용해서 이미지나 텍스트에 스크롤 효과를 주는 오브젝트(객체)입니다. 비슷한 효과를 내는 함수나 오브젝트들이 자바스크립트 상의 소스를 document.write 메소드로 화면상에 출력하는 것과 달리 HTML 소스를 그대로 이용하므로 자바스크립트를 사용할 수 없는 환경에서도 스크롤될 내용을 확인할 수 있고, 문서의 소스도 간단해지는 장점을 갖습니다.

그러면 scrollObj의 세부적인 사항에 대해서 하나씩 설명하도록 하겠습니다.

W3C웹 컨텐츠 접근성 지침(Web Content Accessibility Guidelines) 1.0 가이드라인 7은 화면 깜빡임을 유발하는 컨텐츠 스크롤을 사용하지 않도록 권고하고 있습니다. 가능하다면 기획이나 디자인 단계에서 아예 스크롤 효과를 배제시키는 것이 최선의 방법이라 생각합니다.

더 보기 » | 댓글 1개가 달렸습니다.

float을 제거하는 방법(clearing float)

앞서 CSS로 이미지 정렬하기라는 글에서 CSSclear 속성으로 float된 요소를 다루는 방법을 소개했습니다. 이렇게 float을 제거하는 방법(clearing float)은 그외에도 몇 가지가 더 있는데 그중에서 overflow 속성을 사용하는 방법과 CSS2에 새로 도입된 :after 가상 요소(pseudo-element)를 이용하는 방법을 알아보겠습니다.

더 보기 » | 댓글 8개가 달렸습니다.

UTF-8 인코딩에서의 BOM(Byte Order Mark) 문제

다양한 언어를 표현할 수 있도록 해주는 유니코드(Unicode) 인코딩에는 여러가지 방식이 있습니다. 최근 웹 환경에서 많이 쓰이는 UTF-8을 비롯해서 UTF-16, UTF-32 등이 이런 인코딩 방식을 나타내지요.

이렇게 비슷한 방식을 사용하는 문서는 Byte Order Mark(BOM)로 구별이 됩니다. 문서 맨 앞에 눈에 보이지 않는 특정 바이트(byte)를 넣은 다음 이것을 해석해서 정확히 어떤 인코딩 방식이 사용되었는지 알아내는 방법이지요.

그런데 UTF-8 인코딩 방식에서는 BOM이 문제를 일으킬 수 있습니다. BOM이 무엇이고 왜 문제를 일으키는지, 그리고 어떻게 해결해야 하는지 알아보겠습니다.

더 보기 » | 댓글 19개가 달렸습니다.

hasLayout 속성과 홀리 핵(Holly hack)

CSS로 이미지 정렬하기에서 소개했던 CSSclear 속성을 이용하는 float 제거(clearing float)와 동일한 효과를 내는 방법은 몇 가지가 더 있습니다.

그 중 하나인 overflow 속성을 이용하는 방법을 설명하기 전에 인터넷 익스플로러(이하 IE)만의 독자적인 속성인 hasLayout에 대해서 먼저 알아보려고 하는데, 이 속성이 HTML 요소들의 레이아웃, 특히 float된 요소가 렌더링되는 방식에 크게 영향을 끼치기 때문입니다.

그러면 hasLayout 속성이란 무엇이고, 어떤 영향을 끼치는지, 그리고 어떤 방식으로 이 속성을 이용해야 하는지를 알아보도록 하겠습니다.

† 이 글은 hasLayout 속성에 관한 정보로 꾸준히 업데이트되고 있는 On having layout이라는 글을 바탕으로 작성했습니다. 따라서 이 글은 동일한 라이센스를 적용해야만 이용할 수 있도록 규정한 원문의 CCL을 따릅니다. 원문은 Holly Bergevin, Ingo Chao, Bruno Fassino, John Gallant, Georg Sørtun, Philippe Wittenbergh가 함께 작성했습니다.

더 보기 » | 댓글 5개가 달렸습니다.