웹 퍼블리셔 일을 하면서 가장 짜증나고 마음 아픈 작업이 디자인을 위해 의미 없는 마크업을 넣는 것과 텍스트를 대체한 이미지를 자르고 <img> 태그를 붙이는 일입니다. 어느 웹 퍼블리셔든지 시맨틱한 마크업을 만들고 싶은 마음이 간절하지만 앞서 언급한 문제들로 인해 마크업은 복잡해지고 지저분해집니다. 이미 W3C는 이 문제를 해결할 표준을 만들었는데 그것이 Multiple Backgrounds와 Web Fonts입니다.

Multiple Backgrounds

라운딩된 가로와 세로 길이가 유동적인 박스 제작해보신 경험이 있으신가요? 이 박스를 CSS2의 Background 속성만으로 제작하려면 많은 고통이 따릅니다. 예를 들어 어떤 <div> 태그로 마크업한 박스를 앞에 쓴 것과 같이 만들려면 추가로 의미없는 마크업을 잔뜩 집어넣거나 자바스크립트를 사용해야 합니다. – 이 경우에도 자바스크립트가 의미없는 마크업을 집어넣는 것은 마찬가지입니다. 대체로 다음과 같은 형식의 마크업이 필요합니다.

<style type="text/css">
div { background: url("left-top.png") no-repeat left top; }
div div { background: url("right-top.png") no-repeat right top; }
div div div { background: url("left-bottom.png") no-repeat left bottom; }
div div div div { background: url("right-bottom.png") no-repeat right bottom; }
</style>

<div>
    <div>
        <div>
            <div>내용</div>
        </div>
    </div>
</div>

이게 뭡니까? (ㅠㅠ)

Multiple Backgrounds가 지원되면 하나의 <div> 태그만으로도 이것을 지원할 수 있습니다. 아무리 복잡한 박스라도 말이죠. 배경 이미지를 몇 십개도 깔 수 있으니까요(실제로 몇 십개를 만들면 안되겠지만요.;;).

<style type="text/css">
div {
    background:
        url("left-top.png") no-repeat left top,
        url("right-top.png") no-repeat right top,
        url("left-bottom.png") no-repeat left bottom,
        url("right-bottom.png") no-repeat right bottom;
}
</style>

<div>내용</div>

아, 얼마나 간결하고 아름다운 코드입니까?

그럼 현재 브라우저들의 Multiple Backgrounds 지원 현황을 알아볼까요?

IE (인터넷 익스플로러)

IE8의 CSS3 지원은 다른 최신 브라우저들에 비해 상당히 열악합니다. CSS Improvements in Internet Explorer 8에서도, IEBlog에서도 언제 지원하겠다는 내용은 찾을 수 없었습니다.

파이어폭스

파이어폭스 개발의 핵심 인물 중 하나인 David Baron은 Multiple Backgrounds에 관해 다른 견해를 가지고 있는 것 같습니다. 좀 난감하지요.

처음 글 쓸 때에서 상당히 많은 변화가 있었습니다. 결국 David Baron이 Multiple Backgrounds를 지원하기로 결정하였고 현재의 Nightly Build인 3.2pre1에서는 실제로 동작합니다.

오페라

오페라는 아마 곧 Multiple Backgrounds를 지원하리라 생각합니다. 오페라의 개발자 David Storey의 글 Selectors complete, what next?에서 짐작해볼 수 있었습니다.

사파리

이미 지원합니다. 2005년부터요. :D

슬픈 얘기지만 아마도 IE8에 추가되지는 못할 것 같습니다. 파이어폭스의 경우 David Baron의 결정이 나면 바로 추가되지 않을까 하고요. 결국 IE9일까요? IE9라면 4~5년 정도만 삽질하면 되는 걸까요? 하하하;; 그래도 IE9에서라도 추가된다면 3년쯤 후에는 기본적으로 Multiple Backgrounds를 사용하여 마크업을 구성하고 IE8 같은 하위 브라우저를 위해 자바스크립트로 의미없는 마크업을 추가하는 라이브러리를 사용할 수 있겠네요. 이거 뭐 기뻐해야 하는건지 슬퍼해야 하는건지 모르겠습니다.

다음 글에 Web Fonts에 관한 내용이 이어집니다. 기대해주세요. :D