[CSS-웹표준 교과서]14. @규칙과 미디어 컨트롤

- CSS에서는 출력 미디어를 특정하거나 외부 스타일시트를 참조하려고 '@규칙'(@t-rules)을 이용할 수 있다. 아래에서는 CSS의 @규칙을 중심으로 미디어 컨트롤이나 사용자 스타일 시트의 적용방법 등도 자세하게 알아본다.

1. @media 규칙(출력미디어를 특정한다.)
 - 출력미디어를 특정하기 위해 @media 규칙을 이용한다. 출력미디어를 특정하는 이유는 각 미디어의 최적 스타일에 차이가 있기 때문이다.
 - CSS에 특정할 수 있는 미디어타입(media types)은 다음과 같다.

  - 예시 (일반 모드와 프린터 모드 색깔이 다르다)

 - 복수 지정 콤마(,)로 구별

- link 요소나 style 요소에 media속성으로 이들 값을 지정하면 외부 스타일시트나 스타일 전체를 특정 미디어에 적용하는 것도 가능.

# 미디어타입과 미디어그룹의 관계

- 미디어타입과 미디어그룹의 관계를 표로 정리하면 다음과 같다.

 2. @import 규칙(외부 스타일시트의 참조)
- 외부 스타일시트의 참조는 link 요소나 xml-stylesheet 처리명령을 이용하는 것 외에도 @import 규칙 이용으로 실현할 수 있다.
- @ import 규칙에서는 참조하는 외부 스타일시트의 URI를 url()함수 또는 텍스트로 지정한다. url() 함수로 지정하면 인용부호('"' 또는 ''')로 둘러싸도 둘러싸지 않아도 좋지만 텍스트를 지정하는 경우는 반드시 인용부호로 둘러싼다. 즉,

  - 말미의 세미콜론(;)은 반드시 붙이자. @규칙의 서식에서는 세미콜론 또는 블록의 종료를 의미하는 우측 중괄효(})로 선언이 끝난다는 규칙이 있지만 @import 규칙에서는 @media 규칙과 달리 중괄호는 사용하지 않기 때문이다.

# 스타일 추가

- 다만 @import 규칙 앞에 스타일을 기술하거나 @import 규칙 사이에 스타일 기술은 불가능하다. @import규칙은 반드시 코드의 첫 부분에 기술해야 한다.

- @import 블록 안에 @import 규칙 지정은 불가능하다. 즉 다음과 같은 기술은 정확하지 않은 것이 된다.

# 미디어 타입 지정과 @import 규칙을 사용한 CCS의 브라우저 분기
- 미디어 타입 지정과 @import를 사용하여 일부 브라우저에 CSS를 적용하지 않는 것도 가능하다. 이것으로 CSS 지원이 불충분한 브라우저에는 스타일의 일부나 전부를 적용하지 않고 XHTML 만을 표시하는 것이 가능하다. 이같이 브라우저의 기능구현의 차이를 사용한 테크닉을 'CSS핵'이라고 한다.

3. @charset규칙(문자코드세트의 특징)

• 외부 스타일시트의 가장 최초(@import 규칙이나 코멘트보다 앞에)에 기술한다.
• 한 개의 외부 스타일시트에 복수의 @charset를 지정하면 안 된다.
• style 요소로 XHTML 문서에 삽입된 타입의 스타일시트에는 @charset규칙은 지정할 수 없다(즉 외부 스타일시트에만 지정할 수 있다.)

# CSS의 문자코드세트의 우선순위

1. HTTP 헤더의 Content-Type 필드의 charset 파라미터(meta 요소의 http-equiv 속성으로 지정된 문자 코드세트를 포함)
2. @charset 규칙에 따른 지정.
3. XHTML문서의 요소/속성에 따른 지정. 예컨대 link 요소의 charset속성 등.

4. 고정, 우선, 대체 스타일시트

- 고정 스타일시트(persistent style sheets) : 브라우저가 항상 다른 대체 스타일시트와 함께 적용해야 하는 스타일시트, 스타일시트를 '고정'으로 지정하려면 rel 속성값을 'stylesheet'로 하여 title 속성을 지정하지 않는다.

- 우선 스타일시트(perferred style sheets) : 사용자가 다른 대체 스타일시트를 선택하지 않는 이상 브라우저는 문서 작성자의 우선 스타일시트를 적용한다. 그 스타일시트를 '우선'으로 지정하려면 rel 속성 값을 'stylesheet'로 하여 title 속성에 적절한 값을 지정한다.

- 대체 스타일시트(alternate style sheets) : 브라우저는 사용자에게 대체 스타일시트를 선택할 수 있는 장치를 제공하여야 한다. 그 스타일시트를 '대체'로 지정하려면 rel 속성의 값을 'alternate stylesheet'로 하여 title 속성에 적절한 값을 지정한다.[Netscape 6+, Opera 7, Mozilla, Firefox 지원]

#xml-stylesheet 처리명령에 외부 스타일시트를 참조하는 경우
- 고정 스타일시트 :  alternate유사 속성의 값을 'no'로 하고 title 속성은 지정하지 않는다.
- 우선 스타일시트 : alternate 유사 속성의 값을 'no'로 하고 title 속성에 적절한 값을 지정한다.
- 대체 스타일시트(alternate style sheet) : alternate 유사 속성의 값을 'yes'로 하고 title 속성에 적절한 값을 지정한다.

# title 속성을 스타일시트의 전환에 사용하는 문제
- 위와 같이 title 속성이 스타일시트의 전환에 사용되는 점에 의문이 있다. title 속성은 본래 그 요소의 보충정보를 제공하기 위한 것이며 이같이 CSS의 전환에 사용되면 보충정보를 제공하는 수단이 없어지기 때문이다.

6. 사용자 스타일시트의 적용방법
1) CSS 파일 준비
 - 먼저 사용자 스타일시트로 사용할 CSS파일을 통상의 CSS파일과 동일한 방식으로 작성 하지만 각 스타일 끝에 '!important'라는 선언을 붙인다. 이것으로 작성자 스타일이나 브라우저 스타일과 배팅하는 스타일에 대해 사용자 스타일이 우선된다.

2) 브라우저 설정