CSS 기초 - 웹표준(Web Standard)과 웹브라우저

웹디자인에서 사용되는 레이아웃 언어인 CSS가 만들어진 것은 1996년이었지만 아직도 웹표준을 적용하지 않고 웹페이지가 만들어지고 있는 것은 그동안 CSS가 모든 웹브라우저에서 일관된 표현이 되지 않았기 때문입니다. 그당시 웹브라우저로 많이 사용된 것이 인터넷 익스플로러였고 윈도우 OS에 끼워팔았기 때문에 웹브라우저 점유율이 세계적으로 95%나 됐었습니다.

<출처:W3C School >
 
현재의 OS 점유율을 보면 윈도우버전이 아직도 80%를 차지하고 반강제적으로 인터넷 익스플로러를 사용하게 되는데 특히 XP의 사용자가 38.5%로 많은 수를 차지합니다. 왜 XP가 문제인가 하면 이 OS에 끼워져있던 인터넷 익스플로러가 버전 6인데  CSS적용이 잘 안되고 말썽 많은 웹브라우저이기 때문입니다. 그나마 버전업이 돼서 다른 버전을 사용할 수 있지만 업그레이드가 귀찮거나 할줄 모르는 사람들이 많아서 아직도 이 버전을 사용하기 때문에 퇴치운동까지 나올정도입니다. 

그러니 아무리 웹디자이너들이 CSS를 적용해서 디자인을 하더라도 무용지물이 되기 때문에 어쩔수 없이 CSS를 외면한 것입니다. 그래서 웹디자인에서 많이 사용한 레이아웃이 테이블 형식입니다. 지금은 CSS가 보편화되었지만 아직도 그 잔재를 볼 수 있는 곳이 여럿 있고 한국의 대표적인 포털인 네이버와 다음에서도 블로그 페이지는 테이블 형태로 되어있습니다. 포토샵 최신 버전에서 이미지 슬라이싱해서 html페이지로 만드는 기능이 있는데 이것도 테이블로 만들게 됩니다. 그리고 어도비의 웹디자인툴인  드림위버에서도 테이블은 중요한 레이아웃 도구로 나오고 현재 나와있는 드림위버 관련 서적도 예제를 보면 테이블로 레이아웃된 웹페이지가 대부분이며 CSS는 간략하게 소개되고 있을 뿐입니다. 

위 이미지는 제 네이버블로그의 제목을 요소검사해서 나온 html코드입니다. 다음블로그도 마찬가지로 테이블을 사용합니다. 인터넷 쇼핑몰도 검사해보면 아주 많은 예를 찾을 수 있습니다. 이 테이블 형식의 웹페이지 레이아웃은 W3C의 권고에 의하면 사용하지 말라는 웹표준에서 벗어나는 디자인 형식입니다. 왜냐? 디자인 변경이 자유롭지 못하고 검색엔진 최적화에도 적합하지 못한 디자인이기 때문입니다. 외국의 경우는 찾아보려고 해도 안나오는데 유독 한국에서만 이런 테이블의 레이아웃이 많이 발견되는 것은 IT강국으로서의 체면이 말이 아닌 것입니다. 우리나라도 마이크로소프트의 인터넷익스플로러처럼 웹표준과는 상관없이 "나만 잘하면 돼"라는 이기적인 발상이 만연하고 있다는 생각입니다

이러한 인터넷 익스플로러의 CSS 외면은 아직도 유효합니다. 신기술인 HTML5와 CSS3도 외면하죠. 이것이 가장 잘 적용되는 웹브라우저는 이 웹브라우저를 제외한 웹브라우저입니다. 파이어폭스, 구글 크롬, 애플 사파리, 오페라 등 새로운 CSS를 적용시키려고 애쓰고 있는데 브라우저 시장을 독점하고 있는 IE만은 나몰라라하고 어쩌다가 적용되기는 합니다. 그 점유율이 계속 떨어지고 있는 것은 당연한 일입니다. 다만 한국에서만 유독 높은 점유율을 자랑하고 있다는게 문제가 됩니다. 새로운 CSS는 글자에 그림자를 넣는다든가 모서리를 둥글게 한다든가 예전에는 이미지파일을 첨부해야만 가능했던 것이 단지 CSS코드 몇줄만으로 가능하게 됐는데 이를 적용시키지 않는다는 것이죠. 웹디자인에서 효율성 낭비입니다.

다행히 티스토리는 웹표준에 충실한 스킨을 만들고 있습니다. 어디를 봐도 테이블은 없습니다. 그렇다고 테이블을 쓰지 말라는 것은 아닙니다. 시간표같은 나열된 자료는 꼭 테이블을 써야죠. 레이아웃을 테이블로 하면 어떤 결과가 나오는지는 나중에 CSS에 관한 글이 진행되면서 아시게 됩니다. 우선 디자인하기에는 편하지만 디자인 수정시 처음부터 다시 하는게 편하게 되는 것이 테이블레이아웃입니다. 반면에 CSS로 레이아웃된 디자인은 수정이 간단하죠.

웹표준의 혜택

웹표준을 잘 따르면 다양한 혜택이 있습니다. 웹페이지의 사이즈가 많이 줄어듭니다. 로딩 시간도 빨라집니다. 따라서 대역폭(Bandwidth)도 적어집니다. 웹브라우저, 휴대폰, 등의 소프트웨어와 호환이 잘됩니다. 웹사이트 접근성도 좋아집니다. 가장 중요한 혜택은 향후 웹환경이 어떻게 변하더라도 빠르게 적응할 수 있다는 것입니다. 또한 웹디자인에서 빼놓을 수 없는 특징이 컨텐트와 프리젠테이션의 분리입니다. 컨텐트는 html에서 이루어지고 효과적인 프리젠테이션은 CSS에서 이루어지기 때문이죠. 좀 더 자세히 알아보면 다음과 같습니다.

컨텐트와 프리젠테이션의 분리

웹표준의 가장 기본적인 규칙이 컨텐트와 프리젠테이션의 분리입니다. 컨텐트를 잘 보이기 위한 풍부한 장식은 외부 스타일 시트를 사용합니다. 중요한 컨텐트는 내용으로서만 촛점이 맞춰집니다. 테이블 형식의 레이아웃이라면 컨텐트를 장식하기 위해서 온갖 장식 용어가 컨텐트와 혼재를 하기 때문에 코딩 작업이 아주 어렵고 요소 하나 찾는데도 어려움이 많습니다. 여러 곳에 적용할 스타일은 한번의 스타일시트 선언으로 간단하게 적용됩니다. 예를들어 폰트를 적용할때 테이블 형식이라면 요소요소마다 폰트 사이즈니 색상이니 매번 속성과 값을 코딩해야되지만 스타일시트는 한줄이면 끝납니다.

p { font: bold italic small-caps 1em/1.5em verdana,sans-serif; } 

위 한줄이면 모든 <p>태그에 대해서 폰트적용이 됩니다. 페이지가 많아진다면 어떨까요. 각 페이지마다 각 요소마다 코드를 다 입력해야죠. 수정하려면 각 페이지마다 다 수정해줘야 하지만 CSS는 위 간단한 코드에서 수정만 해주면 모든 페이지에 적용됩니다.

테이블 레이아웃의 코딩과 CSS레이아웃의 코딩의 차이입니다. 

웹사이트 접근성

웹사이트 접근성은 웹표준을 따르면 그냥 따라오는 기본적인 혜택입니다.  웹사이트 접근성을 높이기 위해 여러가지 방법이 있지만 컨텐트와 프리젠테이션을 분리시키고 적합한 코딩만 해주면 접근성은 높아지므로 방문자가 많아질 것입니다. 웹사이트 접근성의 황금률은 간단합니다. OS의 차이에 따른 어떤 플랫폼에서나, 어떤 기술이 사용되더라도, 언제, 어디서, 누구든 웹사이트에 접근할 수 있어야한다는 것입니다. 웹표준을 따르면 당연히 따라오는 것이 접근성입니다. 스크린 리더를 사용하는 눈에 장애가 있는 사람도 웹사이트에 접근할 수 있게 됩니다.