웹 브라우저마다 각각 default CSS가 존재합니다. cascade한 CSS의 특성상, 제작자가 작성한 CSS도 브라우저의 디폴트 CSS의 영향을 받습니다. 웹 사이트가 브라우저마다 조금씩 다르게(경우에 따라 심각하게) 표현되는 이유가 바로 default CSS 때문입니다.

W3C에서 예제로 보여준 default CSS와 파이어폭스(FireFox)의 default CSS, 그리고 Quirks 모드에서 default CSS를 비교함으로써, 다양한 브라우저들의 default CSS를 보다 쉽게 이해할 수 있습니다. 아쉽게도 windows 환경에서 IE와 Opera, Safari는 dll 파일 형식으로 작성되어 확인하기 어렵네요.

default CSS의 위치/경로

• W3C의 default CSS – http://www.w3.org/TR/CSS21/sample.html
• 파이어폭스의 default CSS – C:\Program Files\Mozilla Firefox\res\HTML.css (windows xp)
• 파이어폭스의 Quirks 모드에서 default CSS – C:\Program Files\Mozilla Firefox\res\quirks.css (windows xp)

W3C의 default CSS

HTML, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em, var, address { font-style: italic }
pre, tt, code, kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea, input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir, menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A" }
:before, :after { white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
 @media print {
h1 { page-break-before: always }
h1, h2, h3,  h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}

파이어폭스(FireFox)의 default CSS (windows xp)

*|:-moz-any-link img, img[usemap], object[usemap] {
border:2px solid;
}
[dir=ltr] {
direction:ltr;
unicode-bidi:embed;
}
[dir=rtl] {
direction:rtl;
unicode-bidi:embed;
}
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus, base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus, center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus, del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus, fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus, kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus, object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus, small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus, table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus, tr:focus, tt:focus, u:focus, ul:focus, var:focus { outline:1px dotted invert; }
abbr[title], acronym[title] { border-bottom:dotted 1px; }
address { display:block; font-style:italic; }
area, base, basefont, head, meta, script, style, title, noembed, param { display:none; }
b, strong { font-weight:bolder; }
bdo[dir] { unicode-bidi:bidi-override; }
big { font-size:larger; }
blink { text-decoration:blink; }
blockquote { display:block; margin:1em 40px; }
blockquote[type=cite] { border-color:blue; border-left:solid; border-width:thin; display:block; margin:1em 0; padding-left:1em; }
body { display:block; margin:8px; }
canvas { -moz-user-select:none; }
caption { -moz-box-sizing:border-box; display:table-caption; text-align:center; }
center { display:block; text-align:0; }
col { display:table-column; }
colgroup { display:table-column-group; }
dd { -moz-margin-start:40px; display:block; }
frame { border:none!important; }
frameset { border:none!important; display:block!important; float:none!important; overflow:0; position:static!important; }
h1 { display:block; font-size:2em; font-weight:bold; margin:.67em 0; }
h2 { display:block; font-size:1.5em; font-weight:bold; margin:.83em 0; }
h3 { display:block; font-size:1.17em; font-weight:bold; margin:1em 0; }
h4 { display:block; font-weight:bold; margin:1.33em 0; }
h5 { display:block; font-size:.83em; font-weight:bold; margin:1.67em 0; }
h6 { display:block; font-size:.67em; font-weight:bold; margin:2.33em 0; }
hr { -moz-box-sizing:border-box; -moz-float-edge:margin-box; border:1px 0; display:block; height:2px; margin:.5em auto; }
 hr[size=1] {
border-style:0 none none;
}
html, div, map, dt, isindex, form { display:block; }
i, cite, em, var, dfn { font-style:italic; }
iframe { border:2px inset; }
img[usemap], object[usemap] { color:blue; }
li { -moz-float-edge:margin-box; display:list-item; }
listing { display:block; font-family:0; font-size:medium; margin:1em 0; white-space:pre; }
marquee { -moz-binding:url(chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal); display:block; }
marquee[direction=up], marquee[direction=down] { -moz-binding:url(chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical); height:200px; }
nobr { white-space:nowrap; }
noframes { display:none; }
ol { -moz-padding-start:40px; display:block; list-style-type:decimal; margin:1em 0; }
ol ol ul, ol ul ul, ol menu ul, ol dir ul, ol ol menu, ol ul menu, ol menu menu, ol dir menu, ol ol dir, ol ul dir, ol menu dir, ol dir dir, ul ol ul, ul ul ul, ul menu ul, ul dir ul, ul ol menu, ul ul menu, ul menu menu, ul dir menu, ul ol dir, ul ul dir, ul menu dir, ul dir dir, menu ol ul, menu ul ul, menu menu ul, menu dir ul, menu ol menu, menu ul menu, menu menu menu, menu dir menu, menu ol dir, menu ul dir, menu menu dir, menu dir dir, dir ol ul, dir ul ul, dir menu ul, dir dir ul, dir ol menu, dir ul menu, dir menu menu, dir dir menu, dir ol dir, dir ul dir, dir menu dir, dir dir dir { list-style-type:square; }
ol ul, ul ul, menu ul, dir ul, ol menu, ul menu, menu menu, dir menu, ol dir, ul dir, menu dir, dir dir { list-style-type:circle; }
p, dl, multicol { display:block; margin:1em 0; }
pre[_moz_quote=true] { color:blue; }
q:after { content:close-quote; }
q:before { content:open-quote; }
s, strike, del { text-decoration:line-through; }
small { font-size:smaller; }
spacer { float:none!important; position:static!important; }
span[_moz_quote=true] { color:blue; }
sub { font-size:smaller; line-height:normal; vertical-align:sub; }
sup { font-size:smaller; line-height:normal; vertical-align:super; }
table { -moz-box-sizing:border-box; border-collapse:separate; border-spacing:2px; display:table; margin-bottom:0; margin-top:0; text-indent:0; }
table > tr { vertical-align:middle; }
table[align=center] > caption { margin-left:auto; margin-right:auto; }
table[align=center] > caption[align=left] { margin-right:0; }
table[align=center] > caption[align=right] { margin-left:0; }
table[align=left] { float:left; }
table[align=right] { float:right; text-align:start; }
 table[rules]:not([rules=none]) {
border-collapse:collapse;
}
tbody { display:table-row-group; vertical-align:middle; }
td { display:table-cell; padding:1px; text-align:inherit; vertical-align:inherit; }
tfoot { display:table-footer-group; vertical-align:middle; }
th { display:table-cell; font-weight:bold; padding:1px; vertical-align:inherit; }
thead { display:table-header-group; vertical-align:middle; }
tr { display:table-row; vertical-align:inherit; }
 tr > form:-moz-is-html, tbody > form:-moz-is-html, thead > form:-moz-is-html, tfoot > form:-moz-is-html, table > form:-moz-is-HTML {
display:none!important;
}
tt, code, kbd, samp { font-family:0; }
u, ins { text-decoration:underline; }
ul ul, ul ol, ul dir, ul menu, ul dl, ol ul, ol ol, ol dir, ol menu, ol dl, dir ul, dir ol, dir dir, dir menu, dir dl, menu ul, menu ol, menu dir, menu menu, menu dl, dl ul, dl ol, dl dir, dl menu, dl dl { margin-bottom:0; margin-top:0; }
ul, menu, dir { -moz-padding-start:40px; display:block; list-style-type:disc; margin:1em 0; }
xmp, pre, plaintext { display:block; font-family:0; margin:1em 0; white-space:pre; }
 @media print {
blink { text-decoration:none; }
marquee { -moz-binding:none; }
}

파이어폭스(FireFox)의 quirks default CSS (windows xp)

:not(dl) > dd { display:inline; margin:0; }
:not(dl) > dd:before { -moz-margin-end:40px; content:"\A  "; display:inline; font-size:1px; line-height:0; white-space:pre; }
 [_moz-rs-heading] { font-size:inherit!important; }
 body > form:-moz-first-node, td > form:-moz-first-node, th > form:-moz-first-node, body > p:-moz-first-node, td > p:-moz-first-node, th > p:-moz-first-node, body > dl:-moz-first-node, td > dl:-moz-first-node, th > dl:-moz-first-node, body > multicol:-moz-first-node, td > multicol:-moz-first-node, th > multicol:-moz-first-node, body > blockquote:-moz-first-node, td > blockquote:-moz-first-node, th > blockquote:-moz-first-node, body > h1:-moz-first-node, td > h1:-moz-first-node, th > h1:-moz-first-node, body > h2:-moz-first-node, td > h2:-moz-first-node, th > h2:-moz-first-node, body > h3:-moz-first-node, td > h3:-moz-first-node, th > h3:-moz-first-node, body > h4:-moz-first-node, td > h4:-moz-first-node, th > h4:-moz-first-node, body > h5:-moz-first-node, td > h5:-moz-first-node, th > h5:-moz-first-node, body > h6:-moz-first-node, td > h6:-moz-first-node, th > h6:-moz-first-node, body > listing:-moz-first-node, td > listing:-moz-first-node, th > listing:-moz-first-node, body > plaintext:-moz-first-node, td > plaintext:-moz-first-node, th > plaintext:-moz-first-node, body > xmp:-moz-first-node, td > xmp:-moz-first-node, th > xmp:-moz-first-node, body > pre:-moz-first-node, td > pre:-moz-first-node, th > pre:-moz-first-node, body > ul:-moz-first-node, td > ul:-moz-first-node, th > ul:-moz-first-node, body > menu:-moz-first-node, td > menu:-moz-first-node, th > menu:-moz-first-node, body > dir:-moz-first-node, td > dir:-moz-first-node, th > dir:-moz-first-node, body > ol:-moz-first-node, td > ol:-moz-first-node, th > ol:-moz-first-node {
margin-top:0;
}
 body > form:-moz-only-whitespace:-moz-first-node, td > form:-moz-only-whitespace:-moz-first-node, th > form:-moz-only-whitespace:-moz-first-node, body > p:-moz-only-whitespace:-moz-first-node, td > p:-moz-only-whitespace:-moz-first-node, th > p:-moz-only-whitespace:-moz-first-node, body > dl:-moz-only-whitespace:-moz-first-node, td > dl:-moz-only-whitespace:-moz-first-node, th > dl:-moz-only-whitespace:-moz-first-node, body > multicol:-moz-only-whitespace:-moz-first-node, td > multicol:-moz-only-whitespace:-moz-first-node, th > multicol:-moz-only-whitespace:-moz-first-node, body > blockquote:-moz-only-whitespace:-moz-first-node, td > blockquote:-moz-only-whitespace:-moz-first-node, th > blockquote:-moz-only-whitespace:-moz-first-node, body > h1:-moz-only-whitespace:-moz-first-node, td > h1:-moz-only-whitespace:-moz-first-node, th > h1:-moz-only-whitespace:-moz-first-node, body > h2:-moz-only-whitespace:-moz-first-node, td > h2:-moz-only-whitespace:-moz-first-node, th > h2:-moz-only-whitespace:-moz-first-node, body > h3:-moz-only-whitespace:-moz-first-node, td > h3:-moz-only-whitespace:-moz-first-node, th > h3:-moz-only-whitespace:-moz-first-node, body > h4:-moz-only-whitespace:-moz-first-node, td > h4:-moz-only-whitespace:-moz-first-node, th > h4:-moz-only-whitespace:-moz-first-node, body > h5:-moz-only-whitespace:-moz-first-node, td > h5:-moz-only-whitespace:-moz-first-node, th > h5:-moz-only-whitespace:-moz-first-node, body > h6:-moz-only-whitespace:-moz-first-node, td > h6:-moz-only-whitespace:-moz-first-node, th > h6:-moz-only-whitespace:-moz-first-node, body > listing:-moz-only-whitespace:-moz-first-node, td > listing:-moz-only-whitespace:-moz-first-node, th > listing:-moz-only-whitespace:-moz-first-node, body > plaintext:-moz-only-whitespace:-moz-first-node, td > plaintext:-moz-only-whitespace:-moz-first-node, th > plaintext:-moz-only-whitespace:-moz-first-node, body > xmp:-moz-only-whitespace:-moz-first-node, td > xmp:-moz-only-whitespace:-moz-first-node, th > xmp:-moz-only-whitespace:-moz-first-node, body > pre:-moz-only-whitespace:-moz-first-node, td > pre:-moz-only-whitespace:-moz-first-node, th > pre:-moz-only-whitespace:-moz-first-node, body > ul:-moz-only-whitespace:-moz-first-node, td > ul:-moz-only-whitespace:-moz-first-node, th > ul:-moz-only-whitespace:-moz-first-node, body > menu:-moz-only-whitespace:-moz-first-node, td > menu:-moz-only-whitespace:-moz-first-node, th > menu:-moz-only-whitespace:-moz-first-node, body > dir:-moz-only-whitespace:-moz-first-node, td > dir:-moz-only-whitespace:-moz-first-node, th > dir:-moz-only-whitespace:-moz-first-node, body > ol:-moz-only-whitespace:-moz-first-node, td > ol:-moz-only-whitespace:-moz-first-node, th > ol:-moz-only-whitespace:-moz-first-node {
margin-bottom:0;
}
dl > dl { -moz-margin-start:40px; display:block; }
form { margin:0 0 1em; }
img[align=left] { margin-right:3px; }
img[align=right] { margin-left:3px; }
 input:not([type=image]), textarea { -moz-box-sizing:border-box; }
input[type=image] { border:2px solid blue; }
input[type=image][disabled] { border-color:GrayText; }
li { list-style-position:inside; }
 li > ul:-moz-first-node, li > ol:-moz-first-node { padding-top:1em; }
li ul, li ol, li dir, li menu { list-style-position:outside; }
 li::-moz-list-bullet { font-size:0; }
map { display:inline; }
pre[wrap], pre[cols], pre[width] { white-space:0; }
table { font-size:0; font-style:0; font-variant:0; font-weight:0; line-height:normal; text-align:start; white-space:normal; }
 td > form:-moz-only-whitespace:-moz-last-node, th > form:-moz-only-whitespace:-moz-last-node, td > p:-moz-only-whitespace:-moz-last-node, th > p:-moz-only-whitespace:-moz-last-node, td > dl:-moz-only-whitespace:-moz-last-node, th > dl:-moz-only-whitespace:-moz-last-node, td > multicol:-moz-only-whitespace:-moz-last-node, th > multicol:-moz-only-whitespace:-moz-last-node, td > blockquote:-moz-only-whitespace:-moz-last-node, th > blockquote:-moz-only-whitespace:-moz-last-node, td > h1:-moz-only-whitespace:-moz-last-node, th > h1:-moz-only-whitespace:-moz-last-node, td > h2:-moz-only-whitespace:-moz-last-node, th > h2:-moz-only-whitespace:-moz-last-node, td > h3:-moz-only-whitespace:-moz-last-node, th > h3:-moz-only-whitespace:-moz-last-node, td > h4:-moz-only-whitespace:-moz-last-node, th > h4:-moz-only-whitespace:-moz-last-node, td > h5:-moz-only-whitespace:-moz-last-node, th > h5:-moz-only-whitespace:-moz-last-node, td > h6:-moz-only-whitespace:-moz-last-node, th > h6:-moz-only-whitespace:-moz-last-node, td > listing:-moz-only-whitespace:-moz-last-node, th > listing:-moz-only-whitespace:-moz-last-node, td > plaintext:-moz-only-whitespace:-moz-last-node, th > plaintext:-moz-only-whitespace:-moz-last-node, td > xmp:-moz-only-whitespace:-moz-last-node, th > xmp:-moz-only-whitespace:-moz-last-node, td > pre:-moz-only-whitespace:-moz-last-node, th > pre:-moz-only-whitespace:-moz-last-node, td > ul:-moz-only-whitespace:-moz-last-node, th > ul:-moz-only-whitespace:-moz-last-node, td > menu:-moz-only-whitespace:-moz-last-node, th > menu:-moz-only-whitespace:-moz-last-node, td > dir:-moz-only-whitespace:-moz-last-node, th > dir:-moz-only-whitespace:-moz-last-node, td > ol:-moz-only-whitespace:-moz-last-node, th > ol:-moz-only-whitespace:-moz-last-node {
margin-top:0;
}
 td > p:-moz-last-node, th > p:-moz-last-node { margin-bottom:0; }
ul ul, ul ol, ul dir, ul menu, ul li, ol ul, ol ol, ol dir, ol menu, ol li, dir ul, dir ol, dir dir, dir menu, dir li, menu ul, menu ol, menu dir, menu menu, menu li { list-style-position:inherit; }

위의 CSS 코드는 Code Beautifier와 드림위버 CS3에서 제공하는 “코드 포맷 정리” 기능을 이용해서 정리했습니다.

W3C의 규격에 의거하여 CSS 코드를 작성하더라도, 각각의 웹 브라우저마다 웹 페이지가 다르게 출력되는 문제가 있습니다. 이러한 문제는 브라우저들이 CSS 규격을 조금씩 서로 다르게 해석하고 출력할 뿐더러, 몇몇 규격은 전혀 출력하지 못하기 때문에 발생합니다.

이처럼 브라우저가 CSS를 W3C 규격과 다르게 출력하거나, 전혀 출력하지 못하는 문제를 CSS 출력 버그(CSS Rendering Bug)라고 합니다. CSS 출력 버그는 표준을 준수하여 웹 페이지를 제작할 때 가장 큰 걸림돌이 됩니다. W3C 규격 외에도 각각의 웹 브라우저들의 CSS 출력 현황에 대해서도 이해해야 하며, 이러한 버그들을 잡는 방법까지 파악해야 하기 때문입니다.

IE7, FF1~2, Opera9, Safari처럼 최근에 출시된(morden) 웹 브라우저들은 W3C 규격에 맞춰서 CSS를 출력합니다. 문제는 IE6, NN7 이하의 오래된 브라우저들이죠. 특히 높은 브라우저 시장 점유율을 기록중인 IE6 브라우저의 CSS 출력 버그들이 큰 문제입니다.

이러한 CSS 출력 버그들을 CSS Hack과 Filtering으로 대처할 수 있습니다. 예전에는 CSS Hack을 많이 사용했으나, IE7이 출시된 이후로는 CSS Filtering을 주로 사용합니다. 특히 사용이 간단하고 MS에서 추천하는 방법인 IE Conditional Comments Filtering(IE CC-필터링)을 가장 많이 사용합니다.

IE CC-필터링 소개

IE Conditional Comments은 MS에서 제시한 방법으로 MS IE5 이상의 브라우저에서 사용할 수 있습니다. 이 방법을 이용하면 IE 버전에 따라 HTML 코드를 숨기거나 보일 수 있습니다. 사용자의 IE 버전 별 조건(Condition)을 HTML의 주석(comments)의 구조로 필터링하는 방법기에 IE-CC 필터링이라고 하며, 간단하게 IE-CCF라고 합니다.

아래의 코드를 이용하면 ie7only.css를 IE7에서만 사용할 수 있습니다.

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

IE CC-필터링을 사용하는 이유

IE6 이하의 브라우저는 CSS 선택자(selector)에 접근하지 못하는 문제가 있습니다. 이 점을 이용해서 IE6 이하의 브라우저에 특정한 CSS를 추가하거나 숨기는 방법이 바로 CSS Hack입니다. 하지만 CSS2 규격에 정의된 대부분의 선택자를 이용할 수 있는 IE7이 출시되면서, 기존에 사용해왔던 대부분의 CSS Hack들 사용할 수 없게 됐습니다. 이 때문에 최근엔 대부분 웹 개발자와 디자이너들이 브라우저의 CSS 출력 버그를 대처하기 위해서 CSS Filer를 사용합니다.

물론, IE CC-필터링은 HTML에 문법에 맞지 않고 불필요한 코드를 추가하는 문제점이 있습니다. 이에 어떤 개발자는 JS를 이용해서 브라우저의 종류와 버전을 판별하는 방법을 이용하기도 합니다. 하지만 JS를 이용한 방법은 IE CC-필터링보다 코드가 길고 복잡할 뿐더러, DOM으로 접근하기엔 브라우저 파싱 순서가 늦어서 출력되는데 문제가 발생합니다. 즉, CSS 출력 버그를 처리하는데 IE CC-필터링이 최선은 아니지만, 현재로써 가장 확실한 차선책입니다.

IE CC-필터링 사용법

IE Conditional Comments은 HTML 주석 구조에, IE의 조건문을 포함합니다. IE 조건문은 IE의 버전과 상하관계, 부정조건 등을 사용할 수 있습니다.

<!--[if 조건]>HTML 코드<![endif]-->

조건문에 사용할 수 있는 요소

IE CC-필터링 예제

IE7일 경우 ie7only.css를 사용

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

IE이 아닐 경우 non-IE.css를 사용

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

IE7 이하일 경우 ieOld.css를 사용

<!--[if lt IE7]>
  <link rel="stylesheet" type="text/css" href="ieOld.css">
<![endif]-->

IE일 경우 IE.js를 사용하고, IE7 이하일 경우 IE-old.css를 사용

<![if IE]>
	<script type="text/JavaScript" src="http://hooney.net/js/ie.js"></script>
	<!--[if lt IE7]>
		<link rel="stylesheet" type="text/css" href="ie-old.css">
	<![endif]-->
<![endif]-->

위에서 소개한 IE CC-필터링 외에도, 다양한 방법의 필터링 방법이 있습니다. Communis에서 CSS만을 이용하거나, HTML을 함께 이용하거나, 또는 JS를 이용하여 필터링하는 방법을 확인할 수 있습니다.

• CSS filtering using CSS only
• CSS filtering using (X)HTML
• CSS filtering using Javascript
• Non-validating Hacks

참고 URI

• MSDN : About Conditional Comments
• QuirksMode : Conditional comments
• Wikipedia : CSS filter
• Centricle : CSS filters Table
• WaSP : IE7 Conditional Comments

올해 초 MS에서 Internet Exploer7 버전이 정식 출시되면서, 파이어폭스2, 오페라9, 사파리와 함께 2차 브라우저 전쟁의 서막을 올렸습니다. 이번 전쟁은 자사 비표준 확장을 중심으로 진행된 지난 1차 전쟁과 달리 모두 웹표준을 준수하였기에 화면출력에서 차이점은 찾기 힘듭니다. 대신 탭, 빠른검색, 보안 강화, 확장가능 등을 내세운 UI/UX 측면의 전쟁이라고 할 수 있습니다. 이처럼 새로운 브라우저들은 새로운 사용자 경험을 창출하고 이를 혁신시켜주고 있음에도 불구하고, 구식의 브라우저만 사용할 수 밖에 환경도 있습니다.

저는 게임방이나 연구실 등 즉흥적으로 서핑을 할 경우에는 10mb 미만의 작은 크기로 설치해서 사용할 수 있는 오페라9 브라우저를 사용하곤 합니다. 문제는 새로운 브라우저를 설치할 수 없는 환경에 처할 때입니다. 제가 지금 블로그에 글을 작성하고 있는 부산의 동아대학교 전산실도 그렇습니다. 이곳의 컴퓨터는 MS 윈도우98을 운영체제로 탑재하고 있으며, Internet Exploer 5.5가 설치되어 있습니다. 그런데 컴퓨터에 새로운 프로그램을 설치할 수 없더군요. 설치까지는 가능하지만, 컴퓨터를 리붓하면 모든 프로그램/데이타가 리셋됩니다.

많은 사람들이 사용하는 공공기관이나 공공장소, 대학 전산실 등의 컴퓨터는 이처럼 프로그램을 설치하고 사용하는데 어려움이 있습니다. 컴퓨터 관리자가 꾸준히 업데이트해주면 좋겠지만, 그렇지 않은 경우가 대부분이죠. 어떤 분들은 “국민 대다수가 얼리어답터인 우리나라에서 무려 7년 전인 2000년에 출시된 IE5를 사용하는 게 말이나 되냐? 사이트 리퍼러나 방문객 UA(User Agent)의 기록들은 모두 검색로봇(search-bot, crawler)이다”라고 섯부른 판단을 하곤 합니다. 하지만 현실은 제 옆에 대학생들 모두 IE5를 사용한다는 점이죠.

웹호환성 관점에서 IE5는 결코 관과할 수 없는 브라우저입니다. 수많은 CSS 랜더링 버그가 있어서, 웹디자인을 하는데 신경 쓸 일이 많기 때문입니다. 최근에 해외나 국내의 포털 사이트들이 IE5에 대한 호환성을 포기하는 상태까지 온 것도 이 때문입니다.

윈도우98 문제가 많습니다. USB 인식도 안되네요. 어떤 환경에서도 접근 가능한 웹을 만드는 것도 중요하지만, 구시대의 유물을 몰아내는 것도 중요한 일입니다. 앞으로 가야할 깅이 먼데, 언제까지 발목만 잡힐 수 없기 때문입니다. 공공기관/장소, 대학을 포함한 교육기관에 배치된 컴퓨터에 대한 업그레이드 또는 업데이트에 신경 좀 썼으면 좋겠습니다.

영국의 BBC에 의하면, IBM이 시각 장애를 겪고 있는 사람들이 멀티미디어 동영상을 인식하고 이해할 수 있도록 도와주는 브라우저를 곧 출시한다고 한다.

코드네임 Accessibility Browser – or A-Browser. 멋지다.

“창밖을 보라 창밖을 보라 창밖을 보라 흰눈이 내린다 창밖을 보라 창밖을 보라 찬 겨울이 왔다 썰매를 타는 어린애들은 해가는 줄도 모르고 눈길 위에다 썰매를 깔고 신나게 달린다 긴긴해가 다가고 어둠이 오면 오색빛이 찬란한 거리거리의 성탄빛”

조선시대처럼 유리창이 없었을 땐, 한 겨울에 내리는 눈을 보기 위해선 마당으로 나가야만 했죠. 하지만 지금은 유리창이 있기에 따뜻한 집 안에서도 창밖으로 내리는 눈을 볼 수 있습니다.

마찬가지로 브라우저가 없다면, 웹을 자유롭게 서핑할 수 없겠죠. 현실 세계 너머 웹이라는 공간으로 안내해주고, 자유롭게 서핑할 수 있도록 도와주는 브라우저는 유리창 못지 않게 생활의 중요한 요소가 됐습니다.

만약 당신의 유리창이 깨졌다면, 또한 깨진 틈 사이로 찬바람이 들어온다면, 게다가 유리창 모퉁이에 거미줄이 지저분하게 걸쳐있다면, 창밖의 흰눈이 잘 보일까요? 흰눈이 보이긴 커녕, 유리창 가까이에 가기도 싫겠죠.

당신이 현재 사용하고 있는 웹 브라우저가 노후되어, 곳곳의 보안사각지대로 악성코드가 자동설치되며, 심지어 웹 디자이너의 의도와 전혀 다르게 웹 사이트를 보여주고 있는 사실을 알고 있나요? 확인하고 싶다면, 이 사이트를 방문해보세요. 아래 스크린샷처럼 나옵니까?

그렇지 않다면 웹 브라우저를 업그레이드하시길 권해드립니다. 유리창처럼 시중에는 다양한 최신 웹 브라우저가 출시되어 있고, 당신은 선택하고 사용하면 됩니다. 물론 업그레이드 비용은 유리창과 달리 무료입니다.

• 인터넷 익스플러(Internet Exploer) 7 : Google에 최적화 되어 있음.
• 파이어 폭스(Firefox) 2
• 오페라(Opera) 9
• 사파리(safari) 1.2 & 2.01 업데이트 : Mac OS가 있어야 합니다.

좋은 썬그라스는 자외선으로부터 눈을 보호하고 강렬한 태양빛으로부터 사물을 보다 쉽게 분간할 수 있도록 도와줍니다. 하지만 오래돼고 기스가 많은 썬그라스는 오히려 시력을 저하시킵니다.

h2. 당신은 어떤 브라우저를 통해서 웹사이트를 보나요?

혹시 2002년에 출시되어 악성코드가 자동설치되는 보안의 문제가 많은 인터넷 익스플러 6(Internet Exploer 6)을 사용하고 있나요?

2002년에 출시된 256컬러, 16화음 벨소리의 핸드폰를 아직도 사용하진 않겠죠? MP3 기능과 카메라 기능은 기본이고, DMB 방송 수신도 가능한 최신 핸드폰을 사용하지 않나요?

아래의 다양한 최신 브라우저로 업그레이드해보세요. 썬그라스를 새로 사기 위해선 돈이 들지만, 브라우저를 업그레이드는 무료랍니다.

• 인터넷 익스플러(Internet Exploer) 7 : Google에 최적화 되어 있음.
• 파이어 폭스(Firefox) 2
• 오페라(Opera) 9
• 사파리(safari) 1.2 & 2.01 업데이트 : Mac OS가 있어야 합니다.

“IE 게 섰거라”…파이어폭스 시장 점유율 급상승 (출처 : 아이뉴스24). 몇일 전엔 파이어폭스의 다운로드 횟수가 2억번을 넘었다는 기사 내용이 있었는데, 정말 기쁜 소식입니다.

몇일 전에 인터넷 익스플러 7의 베타 버전이 공개됐다. 보안 강화, 탭 브라우징, RSS 리더 기능 등을 새롭게 내세우며 브라우징 랜더링에도 미세하게 웹표준 방식을 수용하는 모습이었다.

IE 블로그에 의하면 Acid 2 테스트를 수용하진 않겠다고 하지만, 웹표준 랜더링에서 수많은 IE 버그들을 대부분 해결할 계획이라고 한다. 나는 물론이고, 웹표준에 관심있는 많은 사람들이 환호하고 있다.

솔직히 IE7에서 완벽한 웹표준 랜더링을 기대하기 어렵다. 그 이유는 하위 브라우저와의 호환성 때문이다. 즉 예전에 IE5 또는 IE6에 맞게 제작된 수많은 사이트들이 IE7에서 랜더링하는데 문제가 생긴다면, MS 신봉자들에게 까지 비난받을 수 있기 때문이다. 무릇, 소프트웨어의 버전업에서 가장 중요하게 체크되야할 항목 중에 하나가 바로 하위 호환성이기 때문이다.

하지만 모두를 위한 웹을 만들기위한 W3C와 수많은 웹개발자들이 노력하고 있기 때문에, 웹표준은 거스를 수 없는 시대의 흐름이다. 하위 버전의 브라우저와의 호환성을 문제로 삼기 보다는, 상위 버전과의 호환성을 좀 더 고려해야 할 것이다. 구버전의 IE 브라우저가 문제가 있는 것이고, 그것에 맞게 만든 사이트들이 문제인 것이다.

그런 점에서 나는 MS에 몇가지 제안을 하고 싶다. 현실적인 가능성은 차후하더라도, 충분히 중요한 제안이라 생각한다.

일단, IE7 브라우저는 완벽하게 웹표준을 지향해야 한다. 그 다음엔 하위 버전의 브라우저를 위해서 완벽한 웹표준 랜더링을 가능하게 하는 툴바를 지원했으면 한다. 즉 IE7 스크립트와 같은 기능을 자체 탑재한 툴바를 배포함으로써, 웹페이지에 불필요한 스크립트를 삽입시키므로써 랜더링 속도를 지연시키는 문제를 해결하면서 동시에, 완벽한 웹표준 랜더링을 지원하는 것이다.

잘못된 코드들로 만들어진 웹페이지를 수정하는 작업은 웹개발자들의 역할이고, 하위 브라우저 호환성과 관련된 문제는 소프트웨어 제작사의 책임이라고 생각한다. 이는 MS 신봉자들에게 돌을 맞지 않을 뿐더러, 웹표준 옹호론자들에게 엄청난 찬사를 받게 될 것이다.

MS의 기술력이면 충분히 가능할 것으로 생각한다. 자신의 잘못된 과거를 뉘우치고, 올바른 미래를 가는 것이 얼마나 의미있고, 많은 찬사를 받게 될 것인지는 네스케이프사와 파이어폭스를 통해서 알 수 있을 것이다.

이 제안이 MS에게 전달되면 좋겠는데, 딱히 좋은 방법을 모르겠다. IE7와 WaSP 의미있는 활동을 보면서 MS를 모조건 비판만 해야할 것이 아니라, 올바른 대안을 제시하는 것이 더 좋은 것 같다. 그편이 MS 옹호론자와 웹표준 옹호론자가 함께 사는 길 아닌가??

우리가 지난 몇 년간 경험한 폭발적인 성장은 표준의 결정 과정을 어렵게 만들었을 뿐만 아니라, 또한 그 규칙들을 완전히 바꾸어 놓았다. 웹 소프트웨어를 개발하는 회사들은 개발과정에서 너무나 중요한 기술적 분석을 빼먹으면서까지, 아직 덜 익은 기술을 발표해야만 했다.

그러한 변화의 결과는 고통스럽도록 뚜렷하게 나타났다. 정의된 표준에 대한 ‘강화된 기능’들은 형편없이 계획되었으며, 쏟아져 나오는 수백만의 소프트웨어 카피에 이식되지 못했다.

한 예로, 네스케이프사는 HTML의 시각적인 제어에 대한 웹디자이너들의 요구에 부응하여, 내비게이터 브라우저2.0에 @@ 태그를 추가하였다. CSS의 유연성과 강력함이 그 당시에 강력하게 논의되고 있었음에도 불구하고, 네스케이프사는 표준규격 설정과정을 무시하고 쉬운 길을 택하였으며 웹의 신뢰를 완전히 무너뜨렸다.