CSS 이야기: CSS 2.1과 2의 관계

현재 공식적인 CSS 최종 권고안은 1998년에 발표된 CSS 2이고, 이를 보완한 CSS 2 리비전 1(CSS 2.1)이 2007년 권고안 후보(CR: Candidated Recommendation)로서 발표되었습니다. 즉, CSS 2.1은 아직 최종 권고안이 아니고, 최종 권고안이 되기 위한 과정을 밟고 있는 단계지요.

그럼 한 가지 질문을 던져보겠습니다. 과연 CSS 2와 CSS 2.1 중 어떤 규격을 웹 브라우저 같은 사용자 에이전트가 더 잘 지원할까요? CR 단계에 있는 CSS 2.1일까요? 아니면 오래전에 만들어진 CSS 2일까요?

처음 CSS를 접했을 때 저는 당연히 CSS 2를 더 잘 지원할 것이라 믿었습니다. CSS 2.1은 불완전한 규격이라 생각했고, 무엇보다 인터넷 익스플로러 7, 파이어폭스 2, 오페라 9 등의 브라우저가 발표된 2006년 당시까지도 CSS 2.1은 초안(working draft) 단계에 머물고 있었으니까요.

하지만, 실제로 CSS 2 기능 중 상당수는 최신 브라우저에서도 아직 지원되지 않고 있습니다. 또한, W3C가 제공하는 CSS 검증 서비스 같은 경우 기본적으로 CSS 2.1을 기준으로 결과를 알려줍니다. 그렇다면 왜 이런 현상이 생겼을까요?

이런 의문에 대한 해답은 CSS 2.1 규격 소개에서 찾을 수 있습니다. 그 내용을 바탕으로 CSS 2.1이 왜 만들어졌고, 현재 어떠한 위치를 차지하고 있는지 알아보겠습니다.

더 보기 » | 댓글 6개가 달렸습니다.

CSS 이야기: “규격을 따른다”라는 표현의 의미(conformance)

W3C 권고안에서 자주 사용되는 용어 중 하나가 “규격을 따르는 사용자 에이전트(Conforming User Agent)”입니다. 이렇게 어떤 규격을 “따른다”거나 규격에 “부합한다”라는 의미로 사용되는 단어가 “conformance”인데 conformance에 대한 W3C의 정의는 다음과 같습니다.

conformance : 표준(standard)이나 지침(guideline), 규격(specification)의 모든 요구 사항을 만족함

다시 말해서 W3C가 제안한 각각의 규격에 부합하기 위한 요건들을 뜻하는데 그렇기 때문에 규격문에서 상당히 중요한 의미를 갖습니다. 일반적으로 각각의 규격문은 세부적인 설명(속성 설명 등)을 시작하기 전에 이런 요건들을 먼저 설명하는데 예를 들어서 HTML 4.01 권고안 4장, XHTML 1.0 권고안 3장, 그리고 이 글에서 다룰 CSS 2.1 권고안 3장에서 독립적으로 다루고 있습니다.

넓은 의미로 conformance는 규격문을 어떻게 해석하고 구현해야 하는지, 반드시 준수해야 하는 사항(requirements)과 권장 사항(recommandations)을 어떻게 구별해야 하는지를 알려줍니다. 사실 “어떤 사항을 지켜야 한다”라고 말하면 듣는 사람에 따라서 “반드시 지켜야 한다”고 생각할 수도 있고, “지키는 것이 좋다”라고 해석할 수도 있기 때문에 정확함이 필수인 규격문에서는 이런 구분을 명확히 할 필요가 있습니다. 또한, 규격문 전체가 핵심적인 준수 사항만을 다루지는 않습니다. 설명이나 예제도 있고 비공식적인 권장 사항도 있으니까요. 이런 부분에 대한 구분도 conformance에서 다루고 있습니다.

설명이 길었는데 그만큼 중요하다는 점을 강조하고 싶었기 때문입니다. 그러면 CSS 2.1의 conformance를 살펴볼까요?

더 보기 » | 댓글 3개가 달렸습니다.

CSS 이야기: 속성 값 처리 방식

사용자 에이전트는 CSS를 이용해서 스타일을 요소에 적용시킵니다. 이렇게 스타일이 최종적으로 적용될 때까지 속성 값은 최대 네 번 처리되는데 CSS 2.1 권고안은 그 과정을 값 지정, 캐스케이딩, 상속을 다루는 6장에서 설명하고 있습니다. 이 과정에서 핵심이 되는 것은 “지정된 값(specified values)”, “산출 값(computed values)”, “사용되는 값(used values)”, “실제 값(actual value)”인데 이 부분을 중심으로 CSS의 속성 처리 방식을 알아보겠습니다.

† 본문 내용에 제시된 설명의 상당 부분은 제가 권고안을 바탕으로 해석한 것입니다. 따라서 정확하지 않을 확률이 높으니 이 점을 감안하시기 바랍니다. ^^;

개요

사용자 에이전트는 문서를 해석해서 문서 구조(document tree)를 만든 다음 문서 구조상의 모든 요소에 media 유형이 지원하는 모든 속성에 대한 값을 지정해야 합니다. 최종적으로 속성에 적용되는 값은 네 단계의 계산을 거치는데 먼저 정확한 값을 확인하고(지정된 값) 이 값을 상속(inheritance)에 사용될 값(산출 값)으로 변환합니다. 그 다음 변환된 값을 필요에 따라 절대 값으로 바꾸고(실제 값) 마지막으로 주어진 환경에서 구현이 불가능한 값일 경우에 적당한 값으로 변환합니다(실제 값).

더 보기 » |

CSS 이야기: 속성 정의(property definitions)

W3C가 제정한 CSS 권고안(규격)의 핵심이 바로 속성 정의와 그에 따른 설명입니다. 각각의 속성들이 어떻게 해석되고 적용되는지를 알기 위해서 속성 정의를 살펴볼 때가 많은데 CSS 권고안이 기본적으로 CSS를 작성하는 웹 제작자와 CSS를 구현하는 사용자 에이전트 제작자 모두를 대상으로 작성되었기 때문에 해석하기 까다로운 부분이 있습니다. CSS 2.1 권고안CSS 2.1을 소개하면서 속성 정의를 해석하는 방법을 설명하고 있는데 이 문서를 간략하게 설명해보겠습니다.

속성 정의 형식

속성 정의는 다음과 같은 형식으로 구성되어 있습니다.

'property-name'
   Value:		허용되는 값이나 문법
   Initial:		초기 값
   Applies to:		적용 대상
   Inherited:		상속 여부
   Percentages:		퍼센트 값 해석 방식
   Media:		속성이 적용되는 media 유형
   Computed value:	산출 값

더 보기 » | 댓글 4개가 달렸습니다.

플래시 대체 컨텐츠와 noscript 요소

adobe사의 플래시는 웹 페이지에 강력한 멀티미디어 효과를 불어넣을 수 있게 해주는 강력한 도구입니다. 하지만 기본적으로 “시각”적인 인지를 바탕으로 하기 때문에 비시각적인 환경에서는 접근성을 떨어뜨리는 원인이 되기도 합니다.

물론, 플래시 자체적으로 접근성 향상을 위한 대체 텍스트를 제공하기는 합니다. 하지만 Window-EyesJAWS 같은 일부 스크린 리더만이 이런 대체 텍스트를 읽을 수 있고, 플래시 플레이어 9가 지원하는 Microsoft Active Accessibility(MSAA) 기술은 윈도우즈 환경에 국한된 기술이기 때문에 윈도우즈 운영체제가 아닌 타 플랫폼에서는 제한적일 수 밖에 없다는 한계를 갖고 있습니다.

게다가 모든 사용자가 플래시 플러그인이 동작하는 환경에서 웹 페이지를 이용하지는 않습니다. 그렇기 때문에 페이지 네비게이션처럼 접근성이 중요한 컨텐츠에 대해서는 웹 페이지 제작자가 다양한 환경을 고려해서 최대한으로 대체 컨텐츠를 제공하는 것이 올바른 방법이라고 생각합니다. 그럼 어떤 방법이 있는지 알아볼까요?

예외적인 환경

대부분의 사용자는 일반적인 환경, 다시 말해서

  1. 브라우저가 자바스크립트를 지원하며,
  2. 브라우저가 지원하는 플래시 플러그인이 설치되어 있고,
  3. 브라우저가 CSS를 지원하는

환경에서 이 글을 보실 겁니다. 하지만 예외적인 환경에서 웹 서핑을 하는 분도 분명히 있겠지요. 각각의 환경에 따라서 대체 컨텐츠를 제공하는 방법이 달라집니다.

더 보기 » | 댓글 9개가 달렸습니다.