웹 브라우저마다 각각 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에서 제공하는 “코드 포맷 정리” 기능을 이용해서 정리했습니다.

웹 개발자와 디자이너를 위한 최고의 도구(tool) 중 하나인 파이어폭스 확장기능 Web Deveoper가 1.1 버전으로 업데이트됐습니다.

돋보기 기능 등 추가된 기능은 제작자 웹 사이트에서 확인할 수 있습니다. CSS와 HTML 수정하기 기능은 정말 멋지군요. 아직 세세한 테스트를 거치지 않은 듯, 몇몇 기능을 테스트하다보니 툴바에서 버그가 발견되고 있네요.

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

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

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

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

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

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

• 인터넷 익스플러(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가 있어야 합니다.

오늘 오전에 노트북에서 웹 서핑 중에 파이어폭스 2.0.0.1로 자동 엡데이트를 했다. 업데이트가 완료된 후, 파이어 폭스가 죽었다. 몇번을 지웠다가 다시 깔아봤는데, 모두 허탕이다. 그렇게 오늘 하루를 날렸다.

노트북에 설치된 윈도우 비스타와 충돌이 있는듯 하다. 비스타를 사용자가 적어서 그런지, 비스타에서 파이어폭스를 사용하는 사람은 더더욱 적어서 그런지 모르겠지만, 국내에서 관련 글을 찾아보기 힘들다. 구글신에게 도움을 요청해도 관련 내용을 찾아주지 않는다.

파이어폭스를 사용할 수 없으니, 웹 서핑도 웹 개발도 제대로 되는 게 하나도 없다. 바탕화면과 빠른메뉴에서 지웠던 인터넷 익스플러 아이콘을 복구하자니 가슴 한켠이 횡하다.

이대로 파이어폭스는 깨어나지 못할 것인가? 정녕 OS를 재설치해야만 하나? 웹 서핑을 할 수 없으니, 드라마나 봐야겠다. ㅠ.ㅠ

최근 Internnet Explorer 7(IE7) 정식 버전이 출시되면서, 탭 브라우징, RSS 구독, 사용자 지정 검색창 등 다양한 기능들을 MS IE를 주로 사용하고 있는 국내 웹 사용자들도 활용할 수 있게 됐다.

그 중에서 나는 기존 파이어폭스에서 제공하고 있지 않던 기능인 IE7의 화면 확대 기능이 무척 맘에 든다. 기존의 웹 페이지 확대 기능은 “%”나 “em”과 같은 상대적인 단위에 의존한 텍스트 크기 기반 확대였지만, Opera 9에서 화면 비율 확대 기능을 처음 선보인 이후, 이번에 IE7도 지원한 기능이다.

기존의 텍스트 크기 기반 화면 확대 기능의 경우, “px” 기반의 레스터 이미지(또는 배경이미지)를 확대할 수 없었기에 웹 디자이너가 의도한 웹 페이지의 스타일이 뒤틀려 보일 수 밖에 없었다. 물론 해외의 고급 웹 디자이너 경우, “%”나 “em” 같은 상대적 단위를 절묘하게 사용하여 텍스트 크기를 확대했을 떄도 디자인이 덜 깨질 수 있도록 다양한 기법(Elastic Layout)을 선보이기도 했다.

하지만 이와 같은 기법들은 무척 고도의 상대적 디자인 기법이기에, 디자이너와 사용자 모두에게 불만을 제공할 수 밖에 없었다. 대신에 Opera 9와 IE 7의 화면 비율 확대 기능은 화면을 디자인하기도 쉽고, 사용자도 보다 원활한 페이지 서핑이 가능하기에 디자이너와 사용자 모두를 충족시키는 완벽한 기능이라고 할 수 있다.

다가오는 2007년 가정용PC의 기본 사양은 22인치 와이드 LCD 모니터가 될 것이다. 내년 초에 출시될 윈도우 vista의 기본 기능인 사이드바를 효과적으로 활용하기 위해서, 마이크로소프트사는 22인치 와이드 모니터를 비스타의 추천 하드웨어로 권장하고 있다. 이에 많은(특히 델) 하드웨어 제작사들이 22인치 와이드 모니터를 주력 상품으로 준비하고 있다.

이렇게 크고 특히 가로로 긴 모니터를 사용하다보면, 현재의 웹사이트들이 기본적으로 채택한 1024×768 해상도에서 전체창으로 볼 때를 가정하여 디자인된 레이아웃이 무척 답답하고 조악스럽게 느껴진다. 1680 이상의 가로 해상도를 지원하는 22인치 와이드 모니터에서 현재의 웹사이트를 전체창으로 볼 수 없다. 적당하게 브라우저 크기를 조절해서 보는 게 일반적일 것이다.

정해진(현재까지의 1025×768) 브라우저 크기에 따른 레이아웃이 아닌, 사용자가 선택한 브라우저 크기에 유동적으로 대응할 수 있는 그런 웹 디자인이 필요할 것이다. 기존의 레스터 이미지 기반의 포토샵 중심의 웹 디자인에서 사용자 환경에 능동적으로 대응할 수 있는 CSS 디자인이 더더욱 중요해질 것이다.

최근 개편된 gucci 웹 사이트를 보자. 이 사이트가 보여주는 가로 스크롤바가 웹 서핑에 불편을 주는가? 엊그제만 해도 가로 스크롤 바를 만드는 웹 사이트 레이아웃을 사용자 경험성에 의거하여 최악의 사용성 예제 사이트로 뽑곤했다. 하지만 와이드 모니터에 화면 확대 기능을 적절히 사용하게 된다면, 가로 스크롤바는 세로 스크롤 바보다 오히려 편리하게 다가올 수 있다.

다만, 가로 스크롤을 효과적으로 다룰 수 있는 방법이 제공되야 한다. 웹 브라우저가 포토샵처럼 기능키(예 ctrl) + 마우스 움직임이 화면을 잡고 이리저리 끌어 옮길 수 있는 기능을 제공하지 않는 현실에서, 가로 스크롤을 제공하는 마우스가 필요할 것이다.

이처럼 가로 스크롤을 제공하는 마우스는 애플의 마이티 마우스가 있다. 나처럼 저시력자가 야간에 웹 서핑을 하기 위해선 화면 확대 기능이 반드시 필요하며, 이 때 효과적으로 네비게이션할 수 있는 마이티 마우스가 필요하다.

마이티 마우스 하나 사놓구선, 자랑 글 한번 길게 쓴다. ㅎㅎ

추가) 파이어폭스에도 화면 확대보기 기능을 지원하는 플러그인이 개발됐습니다.

기다리고 기다리던 인터넷 익스플러(Internet Explorer : 이하 IE) 7 한글판이 예상보다 훨씬 빨리 출시됐습니다. 제가 IE 7을 그토록 기다렸던 건, 웹 표준을 준수하여 올바르게 화면을 출력해주는 브라우저를 기다렸을 뿐이지, 그이상도 그이하도 아닙니다. 저야 Firefox와 Opera만 있으면 충분하답니다.

하지만 분명한 것은 IE 7 한글판의 출시가 국내 사용자는 물론이며, 웹 개발자 모두에게 여러 이점을 준다는 것 입니다. 탭 브라우정과 RSS, 올바른 CSS 랜더링 등은 향후 국내 웹 판도에 막대한 영향을 줄 것임에 틀림없습니다.

마이크로소프트 Internet Explorer 페이지에서 IE 7를 다운받을 수 있습니다. 기왕이면 아래 이벤트에 참가하셔서 X-box를 노려보세요~ ㅎㅎ

덧. MS의 사용자 인터페이스(User Interface)는 왜 이런식인지.. 이번에도 예외가 아니군요. ㅠ.ㅠ

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

웹표준 관련 사이트인 webstandards에 접속할 수가 없다. 올해 여름부터 접속할 수 없었는데, 이상하게도 나만 접속할 수 없는 것 같다.

여름엔 사무실의 인터넷으로 접속할 수 없었고, 가을엔 집의 케이블로도 접속할 수 없었고, 겨울엔 국회 인터넷으로도 접속할 수가 없다. 주변 분들에게 물어보니 IP차단일 확률이 높다고 하는데, 왜 나만 사무실+집+국회 모두 차단되는지 이해할 수 없다.

오늘 파이어폭스 1.5를 설치한 기념으로 webstandards에 다시 접속을 시도했다가 깜찍한 화면을 만났다. 예전엔 텍스트로만 구성된 접속에러 페이지였는데, 오늘 확인해보니 나름대로 깜찍한 화면이다.

깜찍하긴 하는데, 어떻게 해야 이 접속에러 문제를 해결할 수 있으련지.. 답답할 뿐이다.

퍼멀링크를 수정한 후로 지난 몇일동안 재미있는 현상이 벌어지고 있다. 카운터에 방문자 브라우저 사용율에서 상상도 못했던 결과가 나타난 것이다. 파이어폭스와 인터넷익스플러를 사용하는 방문자 수의 비율이 6:2에 근접할 정도로 파이어폭스가 압도적인 것이다.

예전에 음악바톤이 돌면서 네이버나 엠파스, 다음 같은 포털 사이트에서 방문한 블로거(대부분 IE를 사용할 것임)들의 숫자가 폭발적으로 늘어날 때도 FF와 IE의 비율이 4:5 정도로 엇비슷했었다. 퍼멀링크가 수정된 후 음악바톤의 출처에 대한 링크가 깨진 이후로 이런 현상이 벌어지고 있는지.. 도대체 무슨 현상인지 알 수가 없다.

요즘 Tacnoriry를 통한 해외 방문자가 늘어나고 있는데, 이와 관련이 있는지 의문이다. 어쨓든 이런 현상이 언제까지 이어질지 모르겠지만, 국내에서 흔치 않은 통계일 것 같기에 기념 스샷과 함께 글을 남긴다.

호스팅 업체에서 제공해주는 awstats의 통계 스크린샷 :

Ceprix님이 궁금해할 것 같아서, Short State의 통계도 올려본다. 두 통계 사이에는 검색엔진이나 RSS 리더기에 대한 수치에 차이가 난다.

통계는 호스팅업체를 변경한 6월 9일 이후부터 시작한 것이고, 정식으로 Hooney.net 도메인을 찾아서 블로그를 다시 시작한 날은 6월 14일이다. 물론, 조회수는 페이지 조회수를 의미하며, 방문자 숫자를 뜻하는 게 아니다. 2주간의 공백이후 방문자수는 조금 머시기하다. ㅜ.ㅜ