CSS3의 새 기능
이번 섹션에서는 상태 기반의 구조적 부정 pseudo 클래스와 같은 새로운 CSS 선택기와 기타 새로운 유형의 선택기를 비롯하여 CSS 레벨 3 스펙에서 확인할 수 있는 새로운 기능을 소개한다. 또한, CSS3에서 제공하는 다양한 효과를 살펴본다. 이전에는 이러한 효과를 별도의 애플리케이션을 사용하여 이미지를 작성한 다음, GIF나 JPG, PNG로 저장해야 했다. 이러한 효과로는 텍스트와 상자의 드롭 새도우, 경계에서의 둥근 모서리, 불투명도를 사용한 반투명 외관이 있다. 레거시 웹 브라우저에서는 이러한 기능이 단계적으로 성능이 축소되기 때문에 불투명도 및 둥근 모서리와 같은 기능은 비교적 널리 사용된다. 그다음에는 CSS3를 사용하여 작성할 수 있는 새로운 다중 컬럼 레이아웃을 살펴본다. 이러한 레이아웃은 신문 레이아웃과 비슷하여 텍스트가 컬럼 수를 초과하여 확대되거나 필요한 경우에는 특정 컬럼 넓이로 확대된다. 살펴볼 또 다른 사항으로는 @font-face 태그를 사용하여 비표준 웹 폰트를 삽입하는 문제이다. 마지막으로 HSL(Hue, Saturation and Lightness)과 RGBA(Red, Green, Blue, and Alpha) 색상 모델과 같은 기타 새로운 CSS3 기능 중 일부를 소개한다.
CSS 선택기는 스타일시트를 사용하여 HTML 요소에 양식을 지정하는 수단이다. 예를 들어, 모든 <div> 요소 주변에 경계를 표시하려면 다음과 같이 div 선택기를 사용한다. div { border: 1px solid #000; }
클래스가 highlight인 모든 요소에 배경 색상을 적용하기 위해서는 다음과 같이 .highlight 선택기를 사용한다. .highlight { background-color: yellow; }
마지막으로 ID 속성값이 myDiv인 요소의 넓이를 변경하려면 다음과 같이 한다. #myDiv { width: 250px; }
물론 이러한 선택기를 조합하여 사용할 수도 있다. 따라서 div.highlight를 사용하여 highlight 클래스의 모든 <div> 요소를 선택하거나 div#myDiv를 사용하여 ID가 myDiv인 <div> 요소를 선택할 수 있다.
이처럼 간단한 선택기 외에도 CSS에는 더 복잡한 선택기가 있다(이전 버전부터 포함됨). 예를 들면, input[type="text"] 선택기를 사용하여 속성 유형이 text인 입력 요소만을 선택할 수 있다. 또는 의사 클래스 :hover를 사용하여 마우스가 요소 위에 있을 때의 요소 양식을 지정할 수 있다(예: a:hover { color: red; }).
선택기는 매우 다양하며 이러한 선택기를 이용하면 요소를 선택하여 편리하게 양식을 지정할 수 있다. CSS3에서는 훨씬 더 새로운 선택기가 추가되었으며 이러한 선택기로 덕택에 개발 작업이 훨씬 수월해졌으며 개발자가 작성해야 할 HTML과 Javascript 코드의 양이 줄어들었다.
- E[foo^="bar"]
foo속성이 정확히 문자열bar로 시작하는 요소 E를 선택한다.- E[foo$="bar"]
foo속성이 정확히 문자열bar로 끝나는 요소 E를 선택한다.- E[foo*="bar"]
foo속성에 문자열bar가 있는 요소 E를 선택한다.
- E:root
- E 요소 중 문서의 루트(<html> 태그)인 요소를 선택한다.
- E:nth-child(n)
- E 요소 중 상위 요소의 n번째 하위 요소를 선택한다.
- E:nth-last-child(n)
- E 요소 중 상위 요소의 마지막 n번째 하위 요소를 선택한다.
- E:nth-of-type(n)
- E 요소 중 유형이 같은 n번째 동위 요소를 선택한다.
- E:nth-last-of-type(n)
- E 요소 중 유형이 같은 마지막 n번째 동위 요소를 선택한다.
- E:last-child
- E 요소 중 상위 요소의 마지막 하위 요소를 선택한다. (주: E:first-child는 이전에 CSS2에서 정의되었다.)
- E:first-of-type
- E 요소 중 유형이 같은 첫 번째 동위 요소를 선택한다.
- E:last-of-type
- E 요소 중 유형이 같은 마지막 동위 요소를 선택한다.
- E:only-child
- E 요소 중 상위 요소에 하위 요소가 하나뿐인 요소를 선택한다.
- E:only-of-type
- E 요소 중 유형이 같은 동위 요소만을 선택한다.
- E:empty
- 하위 요소(텍스트 노드 포함)가 없는 E 요소를 선택한다.
- E:target
- 참조 URI의 대상인 E 요소를 선택한다.
- E:enabled
- 사용 가능한 사용자 인터페이스 요소 E를 선택한다.
- E:disabled
- 사용 불가능한 사용자 인터페이스 요소 E를 선택한다.
- E:checked
- 선택된 사용자 인터페이스 요소 E(단일 선택 단추나 선택란)를 선택한다.
- E:not(s)
- 단순한 선택기와 일치하지 않는 E 요소를 선택한다.
- E ~ F
- 앞에 E 요소가 있는 F 요소를 선택한다.
브라우저는 새로운 속성 선택기를 지원하며 거의 모든 최신 브라우저에서 작동할 정도로 일반 동위 컴비네이터는 우수하다. 대부분의 최신 브라우저에서 새로운 pseudo 클래스를 지원하지만 Internet Explorer 6/7과 Firefox 3.0과 같은 구형 브라우저를 위해 폴백을 삽입해야 한다.
새 선택기가 개발자의 어려운 점을 가장 많이 줄여 주는 기능이긴 하지만 대부분의 개발자들은 새로 추가된 멋진 효과를 사용할 수 있기를 원한다. 이는 다음과 같이 다양한 새로운 CSS 특성을 이용하면 가능해진다.
- background(현재 다양한 배경 지원)
- background-clip
- background-origin
- background-size
- border-radius(둥근 모서리)
- border-image
- border-color(그래디언트 경계)
- box-shadow(이미지가 없는 상자의 드롭 새도우)
- box-sizing
- opacity
- outline-offset
- resize
- text-overflow
- text-shadow
- word-wrap
본 튜토리얼의 마지막 부분에서 작성할 샘플 HTML5/CSS3 웹 페이지에서 작동 중인 일부 새로운 효과를 확인할 수 있다.
CSS3 다중 컬럼 레이아웃을 이용하면 신문에서 볼 수 있는 것과 같은 다수의 컬럼에 텍스트를 전개할 수 있다. 이러한 작업에는 두 가지 방식이 있으며 column-width 특성을 사용하거나 column-count 특성을 사용하여 수행할 수 있다. column-width 특성을 사용하는 경우에는 각 컬럼의 넓이를 정의해야 하며(컬럼 수는 컨테이너에서 사용 가능한 공간에 의해 결정됨) column-count 특성을 사용하는 경우에는 사용할 컬럼 수를 정의해야 한다. 그렇지만, 컬럼의 넓이는 각 컬럼에서 사용할 수 있는 공간에 따라 변한다.
다중 컬럼 레이아웃의 다른 기능으로는 column-gap 특성을 들 수 있으며 이 기능을 이용하면 column-width 특성을 사용할 때 컬럼 간에 표시할 공간을 개발자가 정의할 수 있다. 또 다른 유용한 기능으로는 column-rule 특성이 있으며 이 기능을 이용하면 border-style 규칙을 컬럼 간에 지정할 수 있다. 마지막으로 column-space-distribution 특성이 있는데 이 특성은 컬럼 간에 지정해야 하는 여유 공간을 결정한다.
현재, Mozilla와 WebKit 브라우저에서는 다중 컬럼 레이아웃이 지원된다. 현재, 이러한 기능은 각각 -moz이나 -webkit를 접두부로 사용하는 임시 소유 특성을 사용하여 구현한다. 스펙이 완성되면 결국 이러한 브라우저에서 CSS 표준 특성을 지원하게 된다.
사실상 웹 폰트는 CSS2를 위해 제안되었으며 Microsoft Internet Explorer 버전 5 이후부터 사용할 수 있었다. 불행히도 이 기능을 이용하려면 Microsoft에서 고유하게 사용하는 .eot(Embedded Open Type) 폰트 형식을 사용해야 했으며 다른 브라우저 벤더에서는 웹 폰트를 구현하려고 하지 않았다. 결과적으로 사실상 웹 폰트는 CSS2 기반 웹 사이트에서만 사용되었다.
그러나 현재, Firefox, Safari, Chrome 및 Opera 최신 버전을 사용하는 경우, 웹 페이지에서 라이센스가 부여된 모든 .ttf(TrueType)나 .otf(OpenType) 폰트를 사용하려면 @font-face 규칙을 이용해야 한다. @font-face 규칙은 다음과 같이 사용한다. @font-face { font-family: Alexa; src: url('Alexa.otf'); }
현재, article p { font-family: Alexa, Arial, Helvetica, sans-serif; } 형태의 자체 CSS 규칙을 이용하여 이 폰트를 사용할 수 있다.
자체적으로 제작한 폰트가 아닌 경우 폰트를 웹에서 사용하려면 이미지와 마찬가지로 폰트에 대한 사용 권한이 있어야 한다. 또한, 원하는 대로 웹 페이지에 삽입할 수 있는 폰트를 비용을 지불하고 사용하거나 무료 폰트를 다운로드할 수 있다.
또한, CSS3에는 새 색상 값, 특히 HSL(Hue, Saturation, Lightness)과 알파 특성이 있는 두 가지 색상 값, 즉 RGBA(Red, Green, Blue, Alpha)와 HSLA(Hue, Saturation, Lightness, Alpha)에 대한 지원을 비롯하여 기타 새로운 기능이 많이 포함되어 있다. 개발자는 매체 쿼리를 통해 뷰포트 크기를 기반으로 다양한 장치에 맞는 여러 가지 양식을 정의할 수 있다. 예를 들면, 스마트폰이나 PDA, 기타 모바일 장치와 같이 500픽셀 미만의 뷰포트를 사용하는 장치에 맞는 특정 양식을 제공할 수 있다. CSS3의 음성 모듈을 이용하면 화면 판독기의 음성 특성(음성 볼륨, 밸런스, 비율, 강조 등)을 제어할 수 있다.
