웹 브라우저마다 각각 default CSS가 존재합니다. cascade한 CSS의 특성상, 제작자가 작성한 CSS도 브라우저의 디폴트 CSS의 영향을 받습니다. 웹 사이트가 브라우저마다 조금씩 다르게(경우에 따라 심각하게) 표현되는 이유가 바로 default CSS 때문입니다.
"웹2.0을 이끄는 방탄웹(왜 웹2.0을 방탄웹이 이끄는지는 미스테리)"에 보면 처음 나오는 핵입니다.
IE5.x (IE5, IE5.5 등)에서 div로 지정된 박스의 넓이가 padding과 margin을 적용하면 해석하는 과정에서 큰 오차가 발생하는 관계로 이 부분의 오차를 미연에 방지하고자 적용하는 핵입니다. 하지만, 다른 IE5.x관련 값에도 적용되는 유용한 핵입니다.
(제 경험으로는, DTD를 Strict로 맞춰주면 이 핵을 적용하지 않고도 별 이상없이 구현되었습니다.)
Netscape 4 배제하기 <link rel="stylesheet"
type="text/css" href="/css/style.css" media="all" /> Netscape 는
media 속성이 screen 이 아닌 경우 외부 스타일시트를 읽지 못하는 버그가 존재함.
Win IE 3~4,
Mac IE 4~4.5, Netscape 4 배제하기 @import url("/css/style.css") Win IE 4, Mac IE 4 는 인용부호가
"가 아니면 읽지 못하는 버그 존재. IE 3과 Netscape 4는 @import 지원하지 않음.
Mac IE 5
배제하기 H1 { /* \*/ color:red; /* */
} Holly 핵이라 하며, 주석 안의 내용이 적용되지 않음.
Win IE 4~5, Mac IE 4.5~5 배제하기 H1
{ color/* */:red; } 속성과 속성값을 구분하는 콜론(:) 앞에 /* */
삽입.
Win IE 4~6, Mac IE 4, Netscape 4 배제하기 html>body H1 { color:red; } 셀렉터 앞에 html>body
삽입.
Win IE 6 제외시키기 H1
{ color /**/:red; } 속성과 속성값을 구분하는 콜론(:) 앞에 스페이스와 /**/
삽입.
언더스코어 핵 (_) H1
{ _color:red; } Win IE 4~6 에 적용.
닷핵
(.) H1 { .color:red; } 속성 앞에 .
삽입. Win IE 6~7 에만 적용. 타 브라우저는 정확히 확인하지 못했습니다. 이 핵에 대해선 계속 확인중인데 블로그스피어나 여타
서적에는 전혀 언급이 없는 이상한 핵(?)입니다.
해시 핵(#) H1
{ #color:red; } 속성 앞에 # 삽입. Win IE 4~6, Mac IE 5, Opera 7, Mozilla계열,
Firefox 에 적용.
스타 핵 *HTML H1 { color:red; } 셀렉터 앞에 *html 삽입. Win IE 4~6, Mac
IE 4~5 에 적용.
스타7 핵 HTML*H1 { color:red; } 셀렉터 앞에 html* 삽입(공백없이). Win IE
5.5~6, Mac IE 5, Safari 에 적용.
xmlns 속성 핵 HTML[xmlns] H1 { color:red; } 셀렉터 앞에 속성 선택자를 삽입.
Mozilla, Firefox, Opera, Safari 등 속성 선택자를 지원하는 브라우저에 적용.
:root
가상클래스 핵 :root H1 { color:red; } 셀렉터
앞에 :root 가상클래스 삽입. Mozilla, Firefox, Mac IE 5, Safari 등 가상클래스를 지원하는 브라우저에
적용.
Tantek 박스모델 핵 H1
{ width:500px; voice-family: ""}"";
voice-family:inherit; width:400px; } Tantek Celik 이 고안한 유명한 박스모델 핵.
Win IE 4~5, Mac IE 4, Netscape 4 에서는 voice-family 속성 이전의 스타일 적용. 그외의 브라우저는 뒤의 속성
적용.
단순 박스모델 핵 H1 { width:500px;
w\idth:400px; //Win IE 6, Mac IE 5, Mozilla, Opera, Safari \width:450px;
// only Win IE 5 } 속성의 첫번째, 두번째 글자 사이에 \를 삽입하면 Win IE 6, Mac IE 5,
Mozilla, Opera, Safari 에 적용. 추가로 속성의 앞에 \를 삽입하면 Win IE 5 에만
적용.
IE 7, Opera 적용하기 *+html body H1 { color:red; } 셀렉터 앞에 *+html body 삽입. IE
7, Opera 8 이후 버전 적용. Opera를 배제한 IE7 전용으로 하고 싶을 때는 *+html>/**/body 로 Opera 전용
속성 기술.
IE 7 적용하기 *:first-child+html H1 { color:red; } 셀렉터 앞에
*:first-child+html 삽입. IE 7에만 적용되고, 이외의 브라우저는 앞에서 기술한 셀렉터의 속성
적용.
Web standards treats all alike except... 2웹표준 잡학2007/08/27 16:05
웹표준이라는 단어가 처음 나왔을 때, 웹표준이 무엇인지 대해서 많은분들이 의견을 나누셨습니다. 모든 브라우저에서 똑같이 보일 수 있는 표준이다, 파이어폭스와 오페라에서 제대로 보여야 웹표준이다, XHTML로 코딩을 해야 웹표준이다... 참 많은 의견이 오고갔던 것으로 기억합니다.
이제 어느 정도 정리된 의견이라면, 웹표준은 간단하게 말하면 Semantic적으로 만들어진 홈페이지를 뜻하는 말이 되었습니다. (바로 이 점이 제가 네이버 메인페이지를 웹표준적이지 않다고 말하는 근거입니다.)
한가지 문제가 있다면, 아직 웹표준이라는 것이 권고 상태라는 것이죠. 강제 상태가 아니라는 말입니다. 구글식으로 표현하면 베타판이라는 말입니다. 아직 많은 사람들이 웹표준에 대한 토론을 계속하고 있습니다.
웹표준은 아직 정해지지도 않았다는 말이지요!
이런 의미에서 접근하면, 파이어폭스나 오페라 또한 웹표준을 지키는 브라우저가 아닙니다. 현재까지 발표된 웹표준 권고안에 가장 접근한 출력결과를 보장하는 브라우저라는 표현이 맞습니다.
역으로, 인터넷 익스플로러는 웹표준을 지키지 않는 브라우저가 아닙니다. 이 말은 웹표준의 의미를 생각하시면 쉽게 이해가 되실 줄 믿습니다.
인터넷 익스플로러도 웹표준에 맞게 Semantic으로 코딩해주면 논리적으로 브라우저에 나타내줍니다. 인터넷 익스플로러가 웹표준을 지키지 않은 브라우저라면, CSS를 끄고 문서의 구조를 살펴보았을 때, 태그의 성격이 무시되어 출력되거나 (예 : H1요소와 H3요소의 글자 크기가 같다던지) 인라인 요소와 블록 요소가 혼재되어 나타나는 (예 : p요소로 묶인 문단이 각각 한줄의 공백으로 구분되지 않는다던지) 현상이 발생해야겠지요. 현실은 그렇지 않습니다. 파이어폭스, 오페라 등등, 웹표준의 필수 브라우저로 추앙받는 것들과 똑같은 결과를 나타냅니다.
많은 웹디자이너, 웹퍼블리셔들이 인터넷 익스플로러가 웹표준을 지키지 않는 근거로서 레이아웃이 깨지는 문제를 드는데, 웹표준 코딩 - HTML과 XHTML을 사용한 코딩 - 에서 레이아웃을 결정하는 유일한 방법은 CSS입니다. 이 CSS의 표현방법이 잘못된 것과, 그렇기 때문에 인터넷 익스플로러가 웹표준을 지키지 않았다는 것은 동문서답입니다. 차라리 인터넷 익스플로러때문에 크로스브라우징이 어렵게 되었다는 주장은 납득이 가는군요.
웹디자이너는, 웹퍼블리셔는, 웹표준을 따른다고 마음먹으셨다면, 그 순간부터 인터넷 익스플로러를 욕하면 안됩니다. 인터넷 익스플로러 때문에 웹디자인을 못하시겠다는 말은 더더욱 하시면 안됩니다. 어떤 브라우저에서도 잘 나타낼 수 있게, 하물며 그것이 저주받은 익스플로러라하더라도 외면해서는 안됩니다. 그것이 유일한 방법이라면, 핵을 사용해도 좋습니다.
퀴즈 하나 내드리겠습니다. "웹 표준은 [ ] 를 차별하지 않습니다."라는 문장의 [ ] 안에 들어갈 수 없는 것은 무엇일까요?
힌트를 드리면, 특별히 대한민국의 웹 표준은 이것을 너무 차별하고 있습니다. 차별의 정도가 지나쳐 적대적이기까지 합니다.
정답 : 인터넷 익스플로러
정답을 맞추신 분이 혹시 계신지요?
웹표준에 대해 올라온 글 중에서 인터넷 익스플로러에 좋은 시선을 보내는 글이 단 하나도 없다고 하면 과언일까요?
물론 그 동안 웹관계자분들(특히 웹디자이너)께서 겪으신 고충을 생각하면 인터넷 익스플로러는 그 출생부터 저주받아 싼 존재입니다.
하지만, 웹표준이 추구하는 정신은 그러한 못난 인터넷익스플로러를 말살시키는 것이 아닙니다.
웹표준은 "어느 브라우저에서 어떤 환경에 있는 사람들도 인터넷 서비스를 사용할 수 있게 하는 것"인데, 왜 인터넷 익스플로러만 "웹표준을 지키지 않은 브라우저"라는 이유만으로 미움을 받아야 하는지요?
인터넷 익스플로러는 웹표준을 지키지 않았기 때문에 디자인이 힘들고, 그렇기 때문에 파이어폭스나 오페라같은 웹표준을 잘 지키는 브라우저를 적극적으로 사용해서 브라우저 쉐어를 어느 정도는 공평하게 나누면, 마이크로소프트도 위기의식을 가져서 웹표준화가 제대로 된 브라우저를 내놓을 것이다 라는 것이 웹표준과 관련하여 제가 읽은 블로그의 내용의 대다수였습니다.
어쩌면 이런 잘못된 생각 때문에 웹표준 전도사들이 핍박을 당하는지도 모릅니다.
인터넷 익스플로러 시리즈들도 웹표준에 접근해나가고 있고, HTML5 안건에 마이크로소프트사의 임직원이 참가한 이 시점에서, 웹표준을 지키지 않았기 때문에 인터넷 익스플로러의 사용을 억제하자는 주장은 설득력을 얻기 힘듭니다. 오히려 마이크로소프트의 독과점에 대한 반발이 더 솔직한 표현이겠지요.
그리고, 익스플로러가 불량 브라우저라는 편견은 어쩌면 국내 웹관계자들이 스스로 만든 족쇄일수도 있습니다.
제작이 쉽다는 이유로 웬만한 플러그인은 인터넷 익스플로러에서만 돌아가는 액티브X로 때우고, 디자이너들이 만든 인터넷 익스플로러에 최적화된 테이블코딩에 맞춰 프로그래머들도 TR TD 사냥에 동참하는 사이클이 계속되어온 것 아닙니까? 그 당시 기준으로 보면 인터넷 익스플로러야말로 개발하기 쉽고 디자인하기 쉬운 세계 최고의 브라우저가 아니었던지요?
What's happen on next year? 2웹표준 잡학2007/08/25 23:53
우선 여기서 밝힐 것은, 저는 웹기획자가 아니고, 순전히 웹디자이너이고 웹서핑을 좋아하는 블로거일뿐입니다. 그러니, 저의 포스팅에 영향을 받지 마시고 한번 읽으신 후 일상생활로 돌아가시면 좋겠습니다.
저는 2007년은 이러한 서비스들의 결과가 나오는 시간이라고 생각합니다. 네이버마저 CSS레이아웃으로 큰 변혁을 마치고(웹표준에 맞추었다는 말은 도저히 나오지 않네요) 스마트에디터를 이용한 여러 서비스로 정면승부를 예고한 이상, 올해 하반기와 내년초의 반응으로 내년의 전개 방향을 결정할 가능성이 큽니다. 흥미있는 것은 포토서비스와 동영상서비스 등 역사가 그리 길지 않으면서도 색깔을 가진 서비스를 출시한 것인데, 내년 상반기의 평가에 의해 이러한 서비스들이 제색깔을 버리고 스마트에디터를 사용해 색깔을 갖추는 서비스로 변모할 가능성도 있습니다. 스마트 에디터는 제 생각으로는 단지 글쓰는 기능만으로 끝나기엔 아까운 툴입니다. 내년 상반기를 넘길 가능성은 그리 많지 않습니다. 업계의 변화속도가 지금보다 더 빨리질테니까요.
또한 다음도 베타로 제공중인 웹인사이드, 애드클릭스, 오픈아이디 등의 결과가 슬슬 나올 때입니다. 하지만 다음의 경우는 네이버만큼 부담이 크진 않습니다. 이미 중요 섹션에서 웹표준을 달성했고, 많은 스텝들이 웹표준에 익숙해져있는 만큼 그에 따라 후속 사업들의 전개 개념이 상당히 유연해져 있을테니까요. 그리고 다음의 경우는 사업전개를 예측하기 어려운 것이, 네이버의 경우는 다음의 사업을 벤치마크한다는 느낌이 상당히 강한데, 다음의 경우는 오리지날에 가까운 사업을 전개하는 경우가 많다는 것입니다. 다만, 전세계적인 트렌드에 상당히 민감하게 반응하는 느낌이 강한데, 이번에 구글이 한 연구기관에 의해 평가 절하당한 충격이라던지, 야후의 위상이 서서히 원점으로 돌아오는 이 시점에서 다음이 다른 노선을 걸을 가능성도 있습니다.
또한 엠파스를 인수한 SK의 행보도 주목할만합니다. 이미 네이트온 메신저와 싸이월드 미니홈피로 안정적인 사업을 펼치고 있는 SK가 엠파스를 인수하여 웹검색쪽으로 공격적인 사업을 전개할 가능성이 매우 큽니다. 제 생각으로는 예전의 파란처럼 어설픈 서비스를 전개하여 제살마저 깎아먹는 전철을 밟지 않기를 바라는 마음뿐이지만, 열린 검색 등 예전부터 쭉 파격적이고 어찌보면 공격적이었던 엠파스의 전개 방향과 그리 크게 다를것같지는 않습니다. 아마 검색서비스만 강화하는 방향으로 나갈 것 같습니다.
2008년...
웹디자이너로서 주목할만한 것은 정식판이 출시되는 사파리에 대한 지원을 하느냐 않느냐인 것입니다. SK의 경우는 맥용 네이트온을 이미 발표하였고, 다음같은 경우는 우분투에 대해 지원을 하고 있는 관계로 이 두회사가 정책의 일관성이나 이미지 유지를 위해서라도 사파리 유저들을 껴안을 가능성은 매우 큽니다. 문제는 네이버인데, 네이버의 경우 지금까지의 경험으로 미루어볼 때 일단 내년은 사파리 유저들을 지원하지 않을듯 합니다. 내년말쯤 다음과 SK의 실적을 보고 판단을 내리겠지요.
또한 각 포탈을 중심으로 인력이동을 예상해볼 수 있습니다. 구글코리아의 한국지사 전개를 가볍게 평가하시는 분들이 있는데, 현재 IT인력들이 해외로 탈출하고 있는 이 상황에서, 각 포탈의 일부 핵심인력이 구글코리아를 비롯한 좀 더 나은 근무 환경을 제공하는 곳으로 이동하기 시작하면 그 충격은 적지 않을 것입니다.
사업의 전개에 대해서는 올해 전개되고 있는 사업을 중심으로 각 포탈이 색깔을 찾아나가는 작업이 한층 강하게 진행되리라는 예상입니다. 세계적인 트렌드를 파악해 나가는 다음과, 국내 사용자에 최적화된 서비스만을 엄선하여 전개하는 네이버, 이 양단에 끼어 전방위로 공격적인 사업을 전개하는 SK.
2005년 : 저작권 네이버, 다음, 네이트온으로 포탈의 3강체계가 확립됩니다. 네이트온의 경우 싸이월드에 힘입어 엠에스엔 메신저를 누르는 기염을 토하며 부동의 국내1위의 메신저가 됩니다. 다음의 서비스를 벤치마크해오던 네이버가 이러한 네이트온의 성공에는 별로 동요하지 않는데, 메신저 서비스를 추가하는 것보다 기존의 블로그서비스를 강화하는게 났다고 판단했는지도 모릅니다. 확장형 포탈의 길을 걷던 네이버와 다음이 자존심을 지킨 덕분에, 3강 체제는 계속 이어져 나갈 수 있었습니다.
2006년 : 웹2.0 네이버의 블로그시즌2, 싸이월드C2, 다음의 티스토리 인수, 파란의 넥스트파란, 프리챌의 큐서비스 등 대형 포탈들이 조금씩 변혁을 시작해 나갑니다. 구글마저 개인화 홈페이지 서비스를 시작해 버렸으니, 전세계적인 포탈들의 변혁이라고 말해도 될 듯 합니다. 왜? 갑자기 전세계적으로 이런 일들이 일어난 것일까요? 바로 웹2.0이라는 단어의 탄생이라고 생각합니다. 오렐리 사장님의 이 한마디 때문에 많은 블로거들이 웹2.0을 인정한다 안한다로 양분되어 다투기도 했는데, 이 웹2.0이 단어의 탄생이 아닌 개념의 증명이라는 것을 증명하는데는 오래 걸리지 않았습니다. 새롭게 탄생한 많은 서비스들이 웹2.0을 새로운 사업의 전개로 연결시키지 않고, 전부터 존재하던 서비스들의 패러다임을 바꾼 상태로 제공해 나가기 시작했기 때문입니다. 웹2.0을 기반으로 새로운 사업을 전개한 기업들이 몰락한 것이 그 증거입니다. 또한, 구글의 애드센스가 기폭이 되어 국내에서도 검색광고시장이 확대되는데, 이를 위한 기반 사업의 일환으로 다음의 애드클릭스, NHN의 첫눈 인수, SK의 엠파스 인수등이 표면화되어 나타납니다. 비스타의 발표로 마이크로소프트 이외의 브라우저에 대한 관심이 깊어지고, 이제까지의 테이블 코딩에서 벗어나려는 움직임이 소형 웹사이트를 시작으로 점차 보이기 시작합니다. 웹표준의 태동이라고할 수 있겠지요. 한국의 대형 포탈중에는 다음이 제일 재빠르게 홈페이지를 개편해 나갑니다.
그렇다면, 2007년은?
추가 : 2006년은 네이버와 다음, 야후 등 많은 포털이 자사 API를 공개한 해이기도 합니다. 물론 구글의 영향이 있었음을 부정할 수 없습니다.
블로그를 사용하시는 분들은 인용구를 자주 쓰시는데, 그럴 경우에도 여러가지 기술방법이 있습니다.
흔히들 사용하시는 태그가 <blockquote>와 <q>이 있습니다. 보통, 문장일 경우(블록요소)에는 <blockquote>를, 문단이나 단어일 경우(인라인요소)에는 <q>를 사용하는 것이 일반적입니다.
일단, <blockquote>를 사용한 간단한 방법부터 살펴보면,
<blockquote> <p>블로그에서 상호간 비방하거나 거짓 사실을 유포할 경우 형사처벌을 받을 수도 있습니다. </p> </blockquote>
간단하지만, 일단 <blockquote>태그 안에 <p>요소를 넣는다면 옳지 못한 방법입니다. <blockquote>태그 안에는 직접 텍스트가 와야 합니다.
한번 이렇게 바꿔볼까요?
<blockquote cite="http://blog.com/news/index.html" title="블로그를 쓰기 전에"> 블로그에서 상호간 비방하거나 거짓 사실을 유포할 경우 형사처벌을 받을 수도 있습니다. </blockquote>
코드는 좀 길어졌지만, 이 쪽이 웹표준에는 좀 더 근접했다고 할 수 있겠네요.
<q>태그의 경우입니다. 일단 간단한 쪽부터 알아보겠습니다.
<p>블로그에서 <q>"특정인"</q>을 대상으로 허위 사실을 유포할 경우 형사처벌을 받을 수도 있습니다. </p>
일단 <q>태그 안에 인용부호(")가 들어있는 것이 넌센스네요. 비주얼적으로 자신만의 특정 부호를 사용하고 싶다면 어쩔수 없지만, 저 부호는 웹표준에서 인용구를 나타내는 부호로 마크업 처리가 되지 않습니다. 더구나 <q>태그 자체가 인용부호를 포함하고 있기 때문에 다시 인용부호를 지정해 주는 것은 의미가 없는 일이 아닌가 싶습니다.
수정해 보았습니다.
q {background-color: yellow;}
<p>블로그에서 <q cite="http://blog.com/news/index.html" title="블로그를 쓰기 전에">"특정인"</q>을 대상으로 허위 사실을 유포할 경우 형사처벌을 받을 수도 있습니다. </p>
이올린에 북마크하기