Robert씨의 블로그에는 유능한 웹 인터페이스 개발자를 구할 때, 꼭 물어봐야 할 몇 가지 사항들을 적어놓은 글이 올라와 있다.
그 곳에 올려진 질문 항목들을 옮기면 다음과 같다:
- 왜 DOCTYPE이 중요한가?
- Quirks Mode, Almost Standards Mode 그리고 Strict Mode의 차이점은 무엇인가?
- 의미론적(semantic) 코딩이란 무엇이고, 이것이 왜 중요한가?
- 박스 모델(box model)이란 무엇인가?
- hasLayout의 문제를 설명하고 이것에 대한 대처 방법은?
- CSS에 정의되어 있는 한정성(specificity)이란 무엇인가?
- CSS에서의 float들은 어떻게 동작하는가?
- WAI란 무엇인가?
- 만약 글꼴 크기를 픽셀(pixels) 단위로 지정했을 경우, Internet Explorer에서는 어떤 문제가 발생하가?
- Internet Explorer에서는
alt 속성을 어떻게 처리하고 있으며, 결과적으로 어떤 부작용이 발생할 수 있는가?
대부분의 항목에 대한 질문과 해답은 이미 웹 상에서도 많이 논의되었던 것들이지만, Almost Standards Mode의 존재는 처음 알았다.
물론 위에서 던져진 질문들 중에서, Internet Explorer와 관련된 박스 모델과 hasLayout 문제 그리고 alt 속성 처리와 글꼴 크기 관련 문제는 Internet Explorer 7의 발표와 함께 험난했던 과거의 웹 개발 기록으로만 남게 될 듯하지만, 새로운 상황에 대처하기 위한 또 다른 골치거리들이 등장할 터이고, 따라서 의미론적 코딩과 웹 접근성에 관한 고찰 그리고 웹 표준에 대한 이해는 한결 더 중요하게 요구되어 질 것이다.
– 새로 덧붙임: 친절하게도 Robert씨는 자신의 블로그에 썼던 유능한 웹 인터페이스 개발자를 구할 때, 꼭 물어봐야 할 항목들에 대한 해답들을 올려놓았다. JavaScript에 대한 이해와 접근성에 끼칠 수 있는 폐해가 추가 덕목으로 더해졌다.
– 추가 참고의 글들
물론 여기에 소개된 꼼수들은 완전한 세상에 살고 있다면 불필요한 과정이겠지만, 냉험한 현실 속의 웹 브라우저들은 개발자들에게 차별 대우를 요구한다.
IE 7에서는 이제 CSS의 maxHeight 속성을 이해한다는 것을 이용해서, 다음과 같은 JavsScirpt 코드로 구별할 수 있다:
if (typeof document.body.style.maxHeight != "undefined") {
} else {
}
IE 7의 변화에 따른 다음과 같은 더 간단한 방법도 있다:
if (window.XMLHttpRequest) {
} else {
}
물론, 전통적으로 사용되어 왔던 MSDN에 자세하게 소개되어 있는 조건부 주석을 이용한 구별 방법도 유효하다:
... 기타 브라우져들을 위한 코드
덤으로, CSS 속성 이름 앞에 * 혹은 .(점) 그리고 _(밑줄)이 붙어있는 경우에는 브라우져들 마다 제각기 다르게 인식한다는 것을 이용해서 다음과 같은 방법을 사용할 수도 있다. (IE8의 경우 스타일 선언문 마지막에 꼭 “\9″을 붙여주어야 한다.):
#header {
margin: 10px;
margin: 12px\9;
*margin: 15px;
_margin: 20px;
}
* html #someDiv { color: red }
*+html #someDiv { color: red }
– 참고 글
Margin들 간의 충돌이란, 웹 페이지 안 두 개 이상의 block box들이 위 아래로 교차해서 만날 경우 서로가 가지고 있는 margin 값이 하나로 합쳐지는 현상을 말한다.
그렇다면, 하나로 합쳐지는 margin의 너비는 어떻게 될까? 일상적인 흐름에서 생길 경우에는, 서로 교차하는 margin 값들 중에서 최대치의 margin 너비를 가지는 놈으로 대치가 된다. 둘 중에 하나가 0 이하의 margin 값을 가지고 있는 경우에는, 최대치의 margin에서 그 만큼을 뺀 값이 되고, 모두가 0 이하의 margin 값을 가지고 있을 때에는 0에서 두 값을 모두 빼게 된다.
이런 공식은, 물론 box들 간의 일상적인 흐름에서 충돌하는 경우에 적용되는 것이고, float된 상태이거나, overflow
된 상태, 혹은 절대적 값을 가지고 위치하는 경우 등에는 이런 충돌이 일어나지 않는다.
결국, box 요소에 지정되어 있는 margin 값은 절대적일 수 없고, 다른 box들과 부딪힐 경우 테두리(border)를 둘러싸고 있으면서 언제든 상황에 따라 줄어들 수 있는 스폰지와 같은 보호막 구실을 하게 된다.
참고 글: W3C Working Draft – Box model – Collapsing margins
그런데, 위의 참고 글에 의하면,
The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child’s top margin if the element has no top border, no top padding, and the child has no clearance.
그래서, box 자체는 위를 감싸고 있는 스포지가 없더라도 box 안에 담겨있는 하위 요소들의 스폰지가 box의 테두리 밖으로 돌출될 수도 있단다.
이런 돌출이 의도하는 상황이 아니라면, box의 top border 혹은 top padding 값을 지정하게 되면 밖으로 삐져나오는 부작용을 막을 수 있게 된다.
CSS는 DRY(Don’t Repeat Yourself) 하라는 언어의 기초적 원리를 여태 따르지 않는다는 불평의 소리. 더군다나 여러 곳에 흩어져 있는 방대한 CSS 코드들을 수정해야 할 때는 이런 불평과 아쉬움이 쏟아질 만도 하다.
그래서 보통 프로그래밍 언어들에서 자주 사용하는 변수나 매크로의 필요성이 CSS 자체 내에서 구현되어야 한다는 것이 대두되는 이유이겠지만, 가까운 미래에 이런 요구가 반영되기는 어렵겠지.
여러 표준 규약들의 개정과 그에 따른 새로운 표준의 실제 적용 속도는 현재 개발자들의 요구와 사용자들의 변화를 따라가기에도 너무 벅찬 데다가 현 브라우져들 간의 CSS 해석차이는 상황을 더욱 복잡하게 만들고 있는 것이 현실이다.
오늘 눈에 띈 신문 기사에는 미국의 Brown University에서 조사한 글로벌 전자정부(Global E-Goverrnment), 2006
의 결과에서 한국 정부의 홈페이지가 198개국 중 1위를 기록했다고 한다.
내가 알고 경험한 것들에 의하면 결코 이런 결과가 나올 수 없는데, 과연 그렇다면 이런 결과가 어떻게 나올 수 었었단 말인가?
자세한 조사 내용이 담긴 Global E-Government Full Report, 2006(pdf)를 살펴보면 1위로 올라서게 된 과정을 알 수가 있다.
이 조사 결과에 따르면 한국 정부 홈페이지의 항목별 채점 결과는 다음과 같다.
한국 정부 홈페이지의 항목별 채점 결과| Country | Online Services | Publications | Databases | Privacy Policy | Security Policy | W3C Disability Accessibility |
|---|
| Korea, South | 85 | 100 | 100 | 85 | 15 | 15 |
결과를 보면, 전체 점수는 1위를 했어도, 항목별 점수는 초라할 정도로 심한 불균형을 이루고 있다.
아무리 홈페이지가 훌륭하고 풍부한 내용을 담고 있더라도, 장애를 가진 사람들이나 적은 수의 OS 사용자들에게 접근 자체를 가로막는 웹 접근성이나 기초적인 보안에 심각한 문제가 있다면, 이것은 결코 자랑만 할 일은 아니지 않은가?
조사 대상국들 중 1위를 했다는 사실만 강조할 것이 아니고, 절대적으로 부족한 면들을 개선하려는 노력이 꼭 필요할 것이다.
덧. 겉으로 드러나는 사실이 모든 것을 말해주지는 않는다.