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

IE8은 Acid2 테스트를 통과하였다. 그러나 Acid3 테스트에서는 겨우 17점이라는 초라한 성적표를 보여주었다. 파이어폭스3 베타가 각 버전마다 4점, 8점의 향상을 보여준 것과 대조적으로 IE8은 IE7에서 겨우 3점 오른 것이 전부였다. MS 제품군이 그러하듯 IE8도 파이어폭스3 베타와 같은 계속적인 향상을 보여주기는 힘들지 않을까 생각된다.

파이어폭스3 베타 4의 Acid3 테스트 점수 67점은 오페라 9.50 베타 1의 점수 60점을 뛰어넘었다. 흐뭇한 마음으로 파이어폭스3 베타의 웹 표준 지원 노력이 어디까지 계속될지 지켜보아야겠다. 마음 속으로나마 열렬히 응원한다!