아래와 같이 a와 b라는 ID를 갖는 디비전이 같은 클래스명을 갖는 하위요소를 포함하고 있다고 칩시다.

<div id="a">
    <div class="content">…</div>
</div>

<div id="b"> <div class="content">…</div> </div>

그런데 문제는 각각 다른 사람 – 혹은 같은 사람이더라도… – 이 작업한 a와 b가 부모, 자식간이 되는 경우입니다. (물론 이미 부모, 자식간인 걸 알고 있어도 문제는 있습니다.)

<div id="a">
    <div class="content">…</div>
    <div id="b">
        <div class="content">…</div>
    </div>
</div>

a에 포함된 content에 스타일을 입히려고 쓴 CSS가 b의 그것에도 영향을 미치게 됩니다. 서로에 대해서 염두해두고 작업을 해야만 하는 것이죠. 프로젝트 규모가 커지고 요구사항이 빈번하게 바뀐다면 작업 시간은 그에 비례해서 더 커지게 됩니다.

IE6만 아니었으면 #a div.content라는 선택자 대신 #a > div.content라는 선택자를 썼으면 해결될 일이겠죠. 그래서 저희 팀에서는 아래와 같이 항상 prefix를 달아주기로 결정했답니다.;;

<div id="a">
    <div class="a_content">…</div>
    <div id="b">
        <div class="b_content">…</div>
    </div>
</div>

괜찮은 해결책이라고 생각합니다만 클래스명이 쓸데없이 길어지고 마크업만 놓고 보면 “a_”와 같은 의미없는 접두어가 생겨버렸습니다. 마이크로포맷 같은 걸 적용하려고 할 때도 귀찮은 일이죠. 웹 개발자가 살아나지 못하는 한 울며 겨자먹기로 이 방법을 쓸 것 같습니다.

IE7 자바스크립트 라이브러리

IE7(브라우저가 아닙니다.)이라는 라이브러리는 IE6의 CSS 지원 정도를 IE7처럼 만들어주는 마법같은 라이브러리입니다. 그런데! 열라 느립니다. -_-

IE7 라이브러리의 구동원리는 CSS 파일을 XML HTTP 요청으로 다시 받아 그 텍스트를 자바스크립트로 파싱하여 적용해주는 것입니다. 그 이유는 cssText로 읽을 수 있는 텍스트가 있지만 IE6의 경우 지원하지 않는 선택자 부분이 “UNKNOWN”이라는 문자열로 치환되어 버리기 때문입니다.

UNKNOWN이라는 문자열로 바뀌어버린 Child Selector와 마지막 밖에 인식하지 못하는 Multuple Class Selector

따라서 일단 쓸데없는 요청이 한 번 늘어나는 데다가 안 그래도 굼벵이 자바스크립트 엔진을 가진 IE6에서 그 큰 CSS 파일을 파싱한다는 것 자체가 느릴 수 밖에 없는 원인입니다.

IE7 라이브러리 중 Multiple Selector 부분과 Child Selector 부분만 사용해보고자 하였었는데 XML HTTP 요청이라는 제약(CSS 파일의 도메인을 문서와 항상 같게 해야한다는 제약)과 그래도 부담될 IE6의 굼벵이 자바스크립트 엔진 때문에 포기하였습니다. 혹시 시도해보고자 하는 분이 계시면 연락주세요. 그간 IE7 라이브러리를 뜯어보았던 자세한 소감을 말씀드리지요. -_-;;

| View | Upload your own

IE6의 역사

• Windows와 함께 버전 업.
• Windows 98과 함께 IE5가 거의 쓰이지 않게 됨.
• Windows XP가 쓰이지 않게 되는 시점에 IE6에 대한 지원을 없애게 될 것
• Windows 7의 기본 탑재 브라우저에 귀추가 주목됨

웹 표준의 현재

• 최신 브라우저들에 비해 IE6은 웹 표준의 구현 정도가 상당히 뒤쳐짐.
  • CSS 2.1 지원 부족
  • CSS 3 지원 거의 없음
  • DOM 2, 3 지원 부족
  • HTML 4.01 일부 지원하지 못함(abbr 등)

산 넘어 산, IE7

• 최신 브라우저들에 비해 부족하지만 IE6보다는 나은 IE7
• IE6이 거의 쓰이지 않았을 때 지원해야 할 최고(最古) 브라우저
• Windows Vista에 기본 탑재

우아한 성능저하

• 최신 웹 표준 기술은 현재 자바스크립트로 구현 가능한 것들을 더 짧은 코드로 가볍게 지원할 수 있다.
• 이런 기술들을 지원하지 않는 구 브라우저(IE6, 7 등)는 정보를 얻는데는 불편함이 없지만 디자인은 일부 요소가 표현되지 않는 우아한 성능저하를 도입할 수 있다.
• 전체 사용자들의 사이트 이용비용을 계산했을 때 최소가 되도록 고려.
• IE6 사용자가 과반수인 현재는 아직 무리
• 우리나라 웹 업계의 인식 전환 필요

끊임없는 웹 표준 기술의 발전

• IE6, IE7은 지원하지 않는 SVG, CSS3, HTML5
• 웹 제작자들은 현재 실제로 적용하는 웹 표준 기술 이외에 새로운 기술들을 미리 익혀 시장 변화에 대비해야 한다.

웹 표현 기술의 다음, CSS3

• Firefox, Opera, Safari 등이 점점 지원의 폭을 넓혀가고 있는 CSS3
• 모듈이 세부화되어 W3C에서 표준화를 계속하여 진행중이다.
• IE8은 아직 지원 부족

CSS3, 뭐가 좋을까?

• 표현을 위한 마크업을 걷어낼 수 있다.
• 자바스크립트 등의 외부기술에 의존하지 않은 자체 표현(Native expression) 가능
• RIA의 무분별한 이용 감소

IE6은 아직 살아있지만…

• 곧 시장에서 사라지게 될 것
• IE6에서 사용할 수 없었지만 IE7 등의 브라우저에서는 사용할 수 있는 기술들에 대한 선학습 필요