규칙

규칙

css의 규칙은 크게 선택자(selector) 와 선언(declaration) 으로 구성되며, 선언은 속성(property)과 값(value)으로

구성된다.

규칙의 왼쪽에 선택자가 위치하며, 오른쪽에 선언이 위치한다.

• 선택자 (selector) : 스타일을 부여할 요소(대상)
• 선언 (declaration) : 요소에 부여하려는 스타일(방법)으로 "{...}" 안에 지정한다.
• 속성(property) : 요소에 부여하려는 스타일 속성으로, W3C 가 정한 표준 속성 외에도 각 브라우저들이 별도로 지정하는 브라우저 확장 속성이 있다.
• 값(value) : 요소에 부여하려는 스타일 속성의 값으로 , 속성마다 지정할 수 있는 값이 정해져 있다.

선택자

선택자는 문서 계통(document tree) 과 사용자와의 상호작용(user interactive) 및 부가정보에 의해 스타일을 지정할 대상을 선정한다.

선언

선택자로 선택한 대상에게 스타일을 지정하는 것을 선언(declaration)이라고 한다. 예를 들어 모든 첫번째 머릿글

(h1)의 글자색을 빨강색으로 지정한다면, 글자색을 빨강색으로 지정하는 것을 선언이라고 한다. 물론 모든 첫번째

머릿글은 선택자이다.

선언은 "속성 + 콜론(:) + 값 + 세미콜론(;)" 으로 구성 된다.

그룹화

여러 선택자에게 다양한 스타일을 선언함으로써, css 보다 쉽고 빠르게 작성할 수 있다.

선택자 그룹화

여러 요소에게 같은 속성과 값을 선언하려면, 각각의 요소들을 쉼표(,)로 묶어서 한꺼번에 지정할 수 있다.

이와 같은 방법을 선택자 그룹화라고 하며, css의 주요 특징인 상속과 함께 문서의 스타일에 통일감과 균형감

을 부여 하는데 유용하다.

-----------------------------------------------------------------------------

선택자를 그룹으로 묶으면, 3줄로 작성된 위의 css는 아래처럼 1줄로 줄일 수 있다.

h1 { font - family : sans - serif; }

h2 { font - family : sans - serif; }

h3 { font - family : sans - serif; }

위의 3줄로 작성된 코드와 아래 1즐로 작성된 코드는 동일하게 h1,h2,h3 요소의 글꼴 가족을 sans-serif 로 지정 한다.

h1, h2, h3 { font - family : sans - serif; }

선언 그룹화

선택자를 그룹으로 묶는 것처럼, 선언도 그룹으로 묶을 수 있으며, 각각의 선언을 세미콜론(;)으로 구분한다.

선언을 그룹으로 묶으면, 3줄로 작성된 위의 css는 아래처럼 1줄로 줄일 수 있다.

p { color : red; }

p { font - size : 12px; }

p { line-height : 1.5; }

위의 3줄로 작성된 코드와 아래 1줄로 작성된 코드는 동일하게 p 요소에 텍스를 빨강색으로, 글자 크기를 12px로 , 줄간격을 1.5로 지정한다.

p { color : red; font - size: 12px; line-height : 1.5; }

또한, 여러 선언으로 나뉜 유사한 속성의 값들을 하나의 선언으로 줄여 작성할 수 있다.

div { border - width : 1px; border - style : solid; border-color: #cccccc; }

div { border : 1px solid #cccccc; }

값을 나열하는 순서는 각각의 속성별로 참조해야 한다.

-----------------------------------------------------------------------------

값 그룹화

css 속성에 값을 지정할 때, 반복되는 값들을 줄일 수 있다.

아래는 박스의 상하좌우 여백을 동일하게 2px로 주는 선언이다.

div { padding-top : 2px; padding-right : 2px; padding-bottom : 2px; padding-left : 2px }

div { padding : 2px; }

아래는 박스의 상하는 10px로 , 좌우는 5px 의 여백을 주는 선언이다.

div {padding-top : 10px; padding-right : 5px; padding-bottom : 10px; padding-left : 5px;}

div {padding : 10px 5px; }

스타일 무시

존재하지 않거나, 오탈자로 인해서 올바르지 않는 속성을 지정하면, 브라우저는 해당 선언을 무시하고, 세미콜론(;)으로 각각의 선언을 종료하지

않으면 전체 선언이 무실될 수 있다.

div {

color : red

background : white

}

브라우저는 css코드에 포함된 공백이나 탭을 무시하기 때문에, 위처럼 각각의 선언을 세미콜론으로 종료하지 않은 코드를 아래처럼 해석한다.

div { color : red background : white }

color 속성에 red backgound 라는 값이 존재하지 않기 때문에, 브라우저는 위의 코드를 무시한다.