[CSS] 문법과 기본 데이터 형식

문법과 기본 데이터 형식

1. 문법

모든 레벨의 CSS는 똑같은 핵심 문법을 준수한다.
이것은 UA가 생성된 시점에 존재하지 않았던 레벨의 CSS가 제대로 파싱되도록 하기 위해서이다.

1. 토큰

CSS는 토큰들의 연속으로 이루어진다.
토큰 목록 보기

2. 키워드

따옴표로 묶여진 것이 아닌 문자열
red : 키워드 / “red” : 문자열

3. 문자와 대소문자

• CSS 스타일시트는 대소문자 구별이 없다.
  (HTML요소 이름은 대소문자 구별이 없으나, XML에서는 대소문자를 구별한다)
• 식별자(셀렉터안의 요소 이름, 클래스, 아이디들)는 유니코드(ISO 10646), 영문자, 숫자, 하이픈(-)만을 포함할 수 있다.
• 이스케이핑 문자로 \를 사용할 수 있다.

4. 문장

CSS 스타일시트는 문장의 목록으로 구성됨. 문장은 at-rules와 rule sets로 구성됨.
문장 주변엔 공백이 올 수 있음

5. at-rules

@로 시작되는 명령

• 세미콜론 필수!
• 코드 블럭 안에 있으면 안됨
• 명령 세트보다 먼저 나오면 안됨

틀리게 쓰인 경우 예시

@import "subs.css";
h1 { color: blue }
@import "list.css";    //무효

@import "subs.css";
@media print {
  @import "print-main.css";    //무효
  body { font-size: 10pt }
}
h1 {color: blue }

6. 블럭

{로 시작하고 }로 끝남. 짝을 맞추어야 하고, 중첩이 가능하다.
괄호, 중괄호, 대괄호를 제외하고 어떤 글자들도 들어갈 수 있다.

7. 명령 세트 (선언 블럭, 선택자)

선택자와 선언 블럭으로 구성된다.

• 선택자가 해석될 수 없을 때는 선언 블록도 무시된다.
• 선언 블럭 안에는 0개 이상의 세미콜론으로 분리된 선언들의 목록이 들어간다.

h1, h2 {color: green }
h3, h4 & h5 {color: red }    // 무시
h6 {color: black }

8. 선언과 속성

1) 선언

선언은 비어 있거나, 속성이름 : 값으로 구성되어 있다.

• 선언 주변에 공백이 올 수 있다.
• 똑같은 선택자의 선언들은 세미콜론으로 구분하여 하나의 코드 블럭 안에 합쳐질 수 있다.
• 문자열 안에 들어 있지 않은 세미콜론은 이스케이프 되어야한다.

2) 속성

속성 이름은 식별자이고, 속성의 값은 어떠한 토큰도 들어갈 수 있다.

• UA는 무효한 속성 이름과 값을 무시한다.
• 모든 CSS 속성들은 개개의 값에 고유한 문법과 제한을 가진다.

  h1 { color: red; font-style: 12pt }     /* 무효 값    : 12pt */
  p { color: blue;  font-vendor: any;    /* 무효 속성: font-vendor */
    font-variant: small-caps }
  

9. 주석

/*로 시작하고 */로 끝난다.

• 토큰들 사이 어디에나 나타날 수 있다.
• 렌더링에 영향을 미치지 않는다.
• 중첩이 불가능하다.

2. 파싱 에러 처리 규칙

UA는 무효 부분의 시작점과 끝점을 찾아 그것이 거기에 없는 것처럼 무시한다.

• 알 수 없는 속성 : UA는 알 수 없는 속성의 선언을 반드시 무시한다
• 틀린 값 : 속성에 맞지 않는 틀린 값을 무시한다.
• 괴상한 선언 : 예기치 못한 토큰을 만날 경우 무시한다.

  p { color:green }
  p { @foo { bar: baz } color:green }  /* unknown at-rule */
  p { color:green; color }  /* malformed declaration missing ':', value */
  p { color:red;   color; color:green }  /* same with expected recovery */
  p { color:green; color: } /* malformed declaration missing value */
  p { color:red;   color:; color:green } /* same with expected recovery */
  p { color:green; color{;color:maroon} } /* unexpected tokens { } */
  p { color:red;   color{;color:maroon}; color:green } /* same with recovery */
  

• 괴상한 문장 : 괄호나 따옴표의 매칭이 잘못된 경우나 예기치못한 토큰을 만날 경우 무시한다.

  p @here {color: red}     /* ruleset with unexpected at-keyword "@here" */
  @foo @bar;               /* at-rule with unexpected at-keyword "@bar" */
  }} {{ - }}               /* ruleset with unexpected right brace */
  ) ( {} ) p {color: red } /* ruleset with unexpected right parenthesis */
  

​