제 4강 - CSS 구조와 규칙

기본 문법 규칙

선택자(Selectors)

임의의 HTML 태그가 CSS1의 선택자가된다. 선택자는 간단히 특정 스타일과 결합되어 있는 태그이다. 예를들어

P { text-indent: 3em }

에서 선택자는 P가 된다.

크래스 선택자(Class Selectors)

간단한 선택자는 다른 크래스를 가지며, 따라서 다른 스타일을 갖는 동일한 태그를 정의할 수 있다. 예를들어 사용하는 언어에 따라 서로다는 색상으로 코드를 보여주려면

	code.html { color: #191970 }
	code.css  { color: #4b0082 }
	

와 같이 하면된다. 위의 예는 HTML의 CODE 태그에서 사용되는 css와 html이라는 두개의 크래스를 생성한다. CLASS 속성은 HTML 내에서 태그의 크래스를 지시하기위해 사용된다. 즉, <P CLASS=warning>selector당 하나의 클래스만 허용된다. 예를들어 code.html.proprietary와 같은 크래스는 허용되지 않는다.</p> 또한 크래스는 연관 태그 없이 선언될 수 있다.

.note { font-size: small }

이 경우에, note 크래스는 임의의 태그와 함께 사용될 수 있다. 주의: 크래스의 외관이 아니라 기능에 따라 이름을 붙이는 것은 좋은 습관이다. 위의 예에서 note 크래스는 small이라고 이름을 붙일 수도 있지만, 저자가 이 크래스에서 더이상 small 글꼴을 사용하지 않는다면 small이라는 이름은 의미가 없어진다.

ID 선택자(ID Selectors)

ID 선택자는 태그당 속성을 지정할 목적으로 각각 지정된다. 이 선택자 형은 상속에의해 속성이 제한될때만 가끔 사용해야 한다. ID 선택자는 접두사 #을 지시자로 사용해서 지정된다. 예를들어 ID 선택자는 다음과 같이 지정할 수 있다.

#svp94O { text-indent: 3em }

이것은 HTML 내에서 ID 속성에의해 참조할 수 있다. <P ID=svp94O>3em만큼 들여쓰기</P>

문맥 선택자(Contextual Selectors)

문맥 선택자는 공백에의해 분리된 두개 이상의 간단한 선택자의 집합이다. 이들 선택자는 정상적인 속성과 같은 방법으로 할당하며, 종속 규칙에따라 이들 선택자는 간단한 선택에 우선한다. 예를들어

P EM { background: yellow }

에서 문맥 선택자는 P EM이며, 이 규칙은 P 태그내의 강조문(EM 태그)은 노란 배경색을 가져야 한다. 제목(H 태그)내의 강조문에는 어떠한 영향도 미치지 않는다.

선언(Declarations)

특성(Properties)

특성(property)은 스타일을 조작하기위하여 선택자에 지정된다. 특성(properties)은 색상(color), 여백(margin), 글꼴(font)과같은 것들을 포함한다.

값(Values)

값(value)은 특성에 지정되는 값이다. 예들들어 색상(color) 특성에 적색(red)이라는 값을 지정할 수 있다.

그룹화

Style Sheet내에 반복적인 문장을 줄이기 위하여 선택자를 그룹화해서 선언할 수 있다. 예를들어 어떠한 문서내에 모든 제목이 그룹화을 통해 동일하게 선언될 수 있다.

	H1, h1, h2, h3, h4, H6 {
		color: red;
		font-family: sans-serif }
	

상속

가상적으로 선택자 내에 위치한 모든 선택자들은 바깥쪽 선택자에 할당된 특성 값을 상속 받든다. 예를들어 BODY에대해 정의된 색상(color)은 문단내의 모든 문장에 적용된다. 안쪽의 선택자가 바깥쪽의 선택자의 값을 상속 받지않는 몇몇가지 경우가 존재하지만 이들은 논리적으로 확실하다. 예를들어 위 여백(margin-top) 속성은 상속되지 않는다. 직관적으로 문단은 문서와 같은 윗 여백을 갖지 않는다.

주석

주석은 C에서 사용되는 것과 같은 관례로 Style Sheet내에 사용된다. CSS1에서 사용되는 간단한 주석은 다음과 같다.

/* 주석내에 또 다른 주석을 둘 수 없다 */

---

가짜 크래스와 가짜 요소 가짜 크래스와 가짜 요소는 CSS를 지원하는 브로우저에의해 자동적으로 인식되는 특별한 "크래스"와 "태그"이다. 가짜 크래스는 다른 태그 형(예: 방문한 링크(visited links)와 선택한 링크(active links)는 anchor의 두 가지 형을 표현한다)을 구분할 수 있으며, 가짜 요소는 문단의 첫 문자와 같이 태그의 서브-파트를 참조한다. 가짜 크래스와 가짜 요소는는 다음과 같은 형식을 취한다.

selector:pseudo-class { property: value }

또는

selector:pseudo-element { property: value }

가짜 크래스와 가짜 요소는 HTML의 CLASS 속성으로 지정되어서는 안된다. 가짜 크래스와 가짜 요소는 다음과 같이 정상적인 크래스로 사용되야한다.

selector.class:pseudo-class { property: value }

나

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

가짜 크래스는 링크, 방문한 링크, 액티브 링크를 서로 다르게 보여주기위해 A 태그에 할당될 수 있다. anchor 태그는 가짜 크래스로 link, visited나 active를 사용할 수 있다. 방문한 링크는 다른 색상, 심지어는 다른 폰트 크기와 스타일로 정의될 수 있다. 현재 선택된(또는 활성화된) 링크를 다른 색깔에 다소 큰 폰트로 보이도록 할 수도 있다. 이 페이지가 다시 선택될때 방문한 링크는 다른 색상에 약간 작은 글꼴로 화면에 보이도록 할 수도 있다. 이러한 Style Sheet의 예는 다음과 같다.

	A:link    { color: red }
	A:active  { color: blue; font-size: 125% }
	A:visited { color: green; font-size: 85% }
	

First Line Pseudo-element

Wall Street Journal과 같은 신문 기사에서 종종 기사의 첫 행은 굵은 대문자로 화면에 출력된다. CSS1은 가짜 요소로서 이러한 기능을 포함하고 있다. first-line 가짜 요소는 임의의 블럭태그(block-level element)(P, H1와 같은)에서 사용된다. first-line 가짜 요소의 예는 다음과 같다.

	  P:first-line {
	  font-variant: small-caps;
	  font-weight: bold }

First Letter Pseudo-element

first-letter 가짜 요소는는 drop caps와 다른 효과를 만들기위해 사용된다. 지정된 선택자 내의 첫번째 문자는 지정된 값에따라 표현된다. first-letter 가짜 요소는 임의의 블럭태그(block-level element)내에서 사용된다. 예를들어

	P:first-letter { font-size: 300%; float: left }

는 정상적인 폰트보다 3배 큰 drop cap을 만들게 된다.

---

종속 순서 여러 개의 Style Sheet가 사용될 때 Style Sheet는 특정 selector와 충돌을 일으킬 수 있다. 이러한 상황에서 Style Sheet의 규칙들의 순위가 존재해야 한다. 다음 규칙에따라 상호 대립적인 Style Sheet사이의 순위를 결정하게된다.

1. ! Important 규칙에 ! important를 지정함으로서 중요도를 올릴 수 있다. 중요도를 올린 스타일은 그렇지 않은 동일한 가중치의 스타일 보다 우선한다. 저자와 독자 모두 ! important 규칙을 지정할 수 있으므로 저자의 규칙이 독자의 규칙에 우선한다. ! important문의 간단한 예는 다음과 같다.

   	BODY { background: url(bar.gif) white;
       	background-repeat: repeat-x ! important }

2. Origin of Rules (저자대 독자) 앞서 언급한 것처럼 독자와 저자 둘다 Style Sheet를 지정할 수 있다. 둘사이에 충돌이 생기면 저자의 규칙이 동일한 가중치의 독자의 규칙에 우선한다. 또한 저자와 독자의 규칙 모두 브로우저 자체에 내장된 Style Sheet보다 우선한다. 저자는 ! important규칙을 주의깊게 사용해야 한다. 왜냐하면 이들이 독자의 ! important규칙에 우선하기 때문이다. 예를들어 사용자가 시스템상의 문제때문에 큰 글꼴이나 특별한 색상이 필요하다면 그러한 사용자는 페이지를 읽는데에 필수 적인 몇몇 스타일에대해 ! important 규칙을 선언할 것이다. 어떠한 ! important 규칙이든 정상적인 규칙보다 우선한다. 따라서 저자는 특별한 스타일을 필요로 하는 독자가 해당 페이지를 읽을 수 있다는 것이 확실하지 않은한 정상적인 규칙을 사용하기 바란다.
3. 선택자 규칙: 특성 계산 Style Sheet는 자체의 특성도에 근거해서 우선순위를 결정할 수 있다. 특성도가 높은 것이 특성도가 낮은 것에 우선한다. 이것은 선택자의 특성을 계산하면 되므로 상당히 간단하다.
   1. selector내에 ID 선택자의 수를 계산한다.
   2. selector내에 CLASS 선택자의 수를 계산한다.
   3. 선택자 내에 HTML 태그의 수를 계산한다.
   마지막으로 공백이나 콤마 없이 3개의 숫자를 구한 순서대로 쓴다.(주의, 항상 3자리로 구성되는 숫자로 변환해야 한다) 선택자에따른 최종 목록으로 특성도를 쉽게 결정할 수 있다. 높은 숫자의 특성이 낮은 숫자의 특성에 우선한다. 다음은 특성에의해 정렬된 선택자의 목록이다.

   			#id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
   			UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
   			LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
   			LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
   		

4. 지정의 순서 간단히 하기위하여 두개의 규칙이 동일한 가중치를 가질때 마지막 규칙이 우선한다.