가지고 놀다 보면 우스운 것이, CSS 2 표준은 하나인데, 브라우저마다 지원하는 방식이 모두 다른 것이다. IE와 gecko와 opera가 전부 다른 방식으로 CSS를 해석하다 보니 결국 내 시간의 대부분은 '모든 브라우저에서 동일하게 보이려면 어떻게 해야하는지' 의 문제로 귀착되었다.
이야기하자면 한이 없지만, 디자인상 가장 컸던 문제점들을 들자면
1. padding과 margin을 취급하는 방법이 다르다.
이건 희한하게 달라서 이야기하기가 애매하다. 굳이 간단하게 표현하자면, div 개체에 background 속성을 주면 IE는 padding과 margin을 제외한 개체 자체에 속성이 먹히고, gecko 엔진은 padding의 범위까지 속성이 먹힌다. 별것 아닌거 같이 생각이 될 수 있는데 이것이 무지하게 문제가 되는 것이 그림 배경을 지정할 경우이다. 그림 배경을 지정할 경우 충격적인 차이를 경험할 수 있다.
그리고 그 안에 텍스트를 입력할 경우 두 번째 충격을 받을 수가 있다. 텍스트의 위치를 지정하기 위하여 상위 div 개체에 padding 속성을 넣은 경우에 Firefox와 IE는 완전히 다른 모습을 보여줄 것이다. 브라우저간 차이를 해결하기 위해서는 상위 개체에 padding을 사용하지 않고, 텍스트에 padding 속성을 따로 주는 방법이 유일해 보인다. (이걸 생각해내느라 세시간이 걸렸다.)
2. absolute, relative, float를 취급하는 방법이 다르다
각 div의 위치 속성을 지정하기 위한 방법으로 사용하는 저 명령어들이 브라우저마다 작동이 다르다. 오페라의 경우는 %로 지정할 경우 스크롤바 부분을 포함해서 작동한다. float의 경우에 gecko 엔진은 내용이 없을 경우 해당 div의 속성을 무시한 채 다음 relative 명령에 따라 위치를 지정한다. IE의 경우에는 다중 div 속성 상속을 할 경우, 해당되는 개체가 상속받은 개체라는 것을 인식하지 못하는 경우가 있다. 가장 문제는, 저런 문제들이 모여 CSS만을 이용해서 페이지 레이아웃을 만들기가 꽤나 애매해진다는 점이다.
이건 희한하게 달라서 이야기하기가 애매하다. 굳이 간단하게 표현하자면, div 개체에 background 속성을 주면 IE는 padding과 margin을 제외한 개체 자체에 속성이 먹히고, gecko 엔진은 padding의 범위까지 속성이 먹힌다. 별것 아닌거 같이 생각이 될 수 있는데 이것이 무지하게 문제가 되는 것이 그림 배경을 지정할 경우이다. 그림 배경을 지정할 경우 충격적인 차이를 경험할 수 있다.
그리고 그 안에 텍스트를 입력할 경우 두 번째 충격을 받을 수가 있다. 텍스트의 위치를 지정하기 위하여 상위 div 개체에 padding 속성을 넣은 경우에 Firefox와 IE는 완전히 다른 모습을 보여줄 것이다. 브라우저간 차이를 해결하기 위해서는 상위 개체에 padding을 사용하지 않고, 텍스트에 padding 속성을 따로 주는 방법이 유일해 보인다. (이걸 생각해내느라 세시간이 걸렸다.)
2. absolute, relative, float를 취급하는 방법이 다르다
각 div의 위치 속성을 지정하기 위한 방법으로 사용하는 저 명령어들이 브라우저마다 작동이 다르다. 오페라의 경우는 %로 지정할 경우 스크롤바 부분을 포함해서 작동한다. float의 경우에 gecko 엔진은 내용이 없을 경우 해당 div의 속성을 무시한 채 다음 relative 명령에 따라 위치를 지정한다. IE의 경우에는 다중 div 속성 상속을 할 경우, 해당되는 개체가 상속받은 개체라는 것을 인식하지 못하는 경우가 있다. 가장 문제는, 저런 문제들이 모여 CSS만을 이용해서 페이지 레이아웃을 만들기가 꽤나 애매해진다는 점이다.
CSS의 개발 목적이 디자인 부분의 독립을 위해서였다는 것을 상기해 볼 때, 각 브라우저 별로 다른 모습으로 보이는 현재의 모습은 한숨을 자아낸다. 현재로서는 CSS2 규격을 완전히 지원하는 웹 브라우저가 존재하지 않지만, 과연 CSS2 표준의 완전한 지원을 위해서 각각의 브라우저들이 현재의 렌더링 방법을 바꿀 지는 미지수이다. -그 전까지 자사의 웹브라우저를 사용하던 사용자들의 legacy를 보장해 줄 수 없기 때문이다.
웹은 어디로 나아가게 될까.
IPV6의 실용화와 XML의 보급이 가속화되고, 인터넷2로 부르는 네트워크 시스템이 제대로 작동하기 시작하면 웹은 생각할 수도 없었던 모든 곳으로 침투하게 될 것이다. 마치 내 웹페이지의 이름인 Forest처럼, 보이고 보이지 않는 모든 것들의 뒤에 존재하는 숲이 될 미래의 웹은 정보의 공유라는 원래의 이상을 만족시키는 형태가 될 것인가?
비비꼬인 머릿속의 CSS들이 아웅댄다. 블로그 스킨 한 번 갈아엎으려 하다가 수많은 것들에 대하여 다시 생각해 보게 되었다.
