CSS1(Cascading Style Sheets)-구문 규칙

[대소문자 구분 X]
CSS에서는 대,소문자를 구분하지 않는다. html또한 대소문자를 구분하지 않는다.
하지만 XML의 경우에는 대소문자를 구분한다. 이를 염두에 두고 코딩을 하여야 한다.
가능하면 대,소문자를 구분하지 않는다는 전제하에 다른 문자의 명명으로 작성하길 바란다.

[주석]
주석은 프로그램상에서는 무시하는 부분으로 프로그래머끼리의 의사교환, 가독성의 향상을 위해 작성한다.
CSS내에서는 C언어와 동일하게 /*을 사용한다. /* ~~~~~~~*/을 통하여 그 사이에 나오는 모든 내용은 주석으로 취급된다.
단 주석은 중첩해서 사용할 수 없다.

[공백무시]
공백의 경우 무시된다.
공백(white space)은 가독성의 향상으로 이용될 뿐이지 프로그램상에서는 아무런 의미가 없다.

[상속]
한 엘리먼트에 설정된 속성은 자식에게 까지 영향을 미친다.
이러한 것을 속성의 상속(inheritance)이라고 한다. 만약 부모엘리먼트에 설정된 속성을 자식 엘리먼트가 특별히 따로 지정하지 않는다면, 자식 엘리먼트는 부모의 속성을 그대로 전달받게 된다.
이것은 부모 엘리먼트로부터 상속받은 속성 값보다 자신이 설정한 속성 값이 우선권을 갖는다는 것을 의미한다. 한마디로 자식 엘리먼트의 속성을 부모 엘리먼트의 속성에 대하여 override를 한다.(오버라이딩의 이러한 상속과 결부된 개념은 여러 객체 지향언어에서 많이 나온다.)
CSS에서는 스타일시트 설계시 이 상속기능을 이용하여 시간을 절약할 수 있다. 단 모든 속성이 자식 엘리먼트에 상속되지 않는 것이 있는데,
[display 속성, background 속성, box 속성, text 속성의 일부]
가 있다.

[선택자 그룹화]
여러개의 엘리먼트에 동일하게 적용되는 스타일 규칙을 하나의 그룹으로 묶는 것이 가능하다. 이를 위해서는 컴마(,)를 이용하여 선택자(상단부분)에 복수로 지정하는 것이다.
Test,test1,test2 { font-weight: bold; font-size:12pt; line-height:14pt; font-family:helvetica; font-style:normal; }
위와 같은 방식으로 복수 선언이 가능하다.

[문맥 선택자]
상속의 기능으로 상위 엘리먼트에서 상속된 부분을 overriding으로 재정의 하지 않으면 그대로 물려받게 된다. 만약 정의한다면 정의한 부분이 우선적으로 적용되게 된다.
이때 상속에 관계 없이 특정 엘리멘트내에 특정 엘리멘트를 사용할 경우 스타일을 따로 지정할수 있다. 이와 같이 특정한 엘리먼트 내에서만 적용되는 선택자를 문맥 선택자이다. 문맥 선택자는 공백으로 분리되는 여러 개의 선택자들로 구성된다.
Parent Child { font-weight: bold; }
위에서 Parent와 Child는 엘리먼트이다. 위 스타일은 Parent라는 엘리먼트 안에 Childe라는 엘리먼트가 들어있어 정의될때 스타일이 적용된다. 이런식으로 세부적으로 설정이 가능하다.

[외부스타일시트의 사용]
스타일시트 내에서 외부에 저장된 CSS 파일을 불러올 수 있다. 불러오는 외부 스타일 규칙은 내부 스타일 규칙들과 하나로 병확되어 진다.
사용법 : @import url(URL주소)

위는 간단하게 메모장으로 작성해보았다. 3개의 문서가 서로 연결되어 있다.
html에서는 style.css를 link하여 연결시키고, style.css내에서는 import를 이용하여 importStyle.css파일을 불러들였다.

결과는 위와 같이 두개의 CSS파일이 적용되어 나타난다.
※ 주의점은 import할때 마지막에 반드시 ";"을 붙여주어야 한다. 그렇지 않으면 다음 ";"가 나올때까지 그 문장이 import구문으로 해석된다. 즉 다음 ;가 나오기전 코드들은 모두 실행이 안된다.

[Cascading 순서]
CSS에서 cascade란 용어는 스타일시트 위에 새로 정의된 스타일을 덮어 씌어 사용하는 것을 의미한다.
그런데 이 cascade의 사용은 스타일간의 충돌을 유발한다. import하여 여러 CSS 정의된 파일을 사용한다면 어떤 것을 우선으로 사용하여야 하는지 문제가 생기게 된다. 이에 CSS 표준규격에서는 어떤 규칙이 우선적으로 사용되어야 하는가에 대한 순서를 규정하고 있다. 이를 Cascading Order라고 한다.
CSS의 캐스케이딩 처리를 위한 일반적인 우선 순위 규칙은 다음과 같다.
1. 기본적으로 문서작성자의 스타일시트에 지정된 스타일 규칙이 사용자의 스타일시트에 지정된 스타일 규칙을 덮어씌운다. 즉 문서 작성자의 스타일 시트가 사용된다.(그러나 [!important]명령문이 사용되는 경우는 역으로 사용자의 스타일시트가 사용됨.)
2. 특정 선택자(selector)가 일반 선택자를 덮어씌운다. 즉 특정 선택자가 우선적으로 사용된다.
   - 중첩되는 엘리멘트 사이에서는 엘리멘트내의 style속성이 가장 우선권을 갖는다.(ex: <p style="~~~">
   - 문맥선택자와 일반선택자로 지정된 스타일 규칙이 있다면, 문맥선택자로 정의된 스타일이 적용된다.
   - 만약 문맥 사용자가 문서내에 있지 않다면 일반 선택자로 지정된 스타일 규칙이 사용된다.
3. 만약 어떠한 엘리먼트에 대한 스타일 규칙이 정의되어 있지 않으면, 그 엘리먼트의 가장 가까운 조상 엘리먼트의 스타일 규칙이 사용된다. 만약 어떠한 엘리먼트에 대한 스타일 규칙이 정의되어 있지 않고 또한 조상들의 스타일 규칙들도 정의되어 있지 않으면 사용자 에이전트는 자체의 디폴드값을 사용한다.
4. 동등한 수준의 스타일 규칙들이 충돌을 일으키는 경우에는 마지막에 설정된 스타일 규칙을 사용한다.

[단위지정]
CSS에서 어떤 속성은 단위를 사용하여 값을 지정해야 한다.
- 길이단위 : 길이 단위는 절대적인 단위와 상대적인 단위로 구분된다.
   ▶ 절대 단위

in	인치
mm	밀리미터
cm	센티미터
pt	포인트. 1포인트는 1/72인치
pc	피카(pica). 1피카는 12포인트

   ▶  상대 단위

em	엘리먼트의 글꼴 높이
ex	엘리멘트글꼴에서 소문자 'x'의 높이
px	픽셀(pixel)

여기서 em과 ex가 사용되기 위해서는 부모 엘리먼트의 글자 크기에 상대적인 크기를 지정하여야 한다.
ex : ) 12pt가 정해져 있고, 다음 3em을 사용하게 되면, 12x3하여 36pt의 크기를 갖게 된다. 
(단, 상속될시 계산된 값이 상속되어진다.)

- 백분율 단위 : 다른값에 대한 상대적인 크기이다. 보통의 경우 엘리먼트 자체의 글꼴 크기에 대한 상대적인 값이다. 
(단, 상속될시 계산된 값이 상속되어진다.)

- 색상단위 : 색상 속성 값은 키워드나 숫자 RGB값으로 지정된다.
  [aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow]
  위 16가지의 키워드를 제공한다.(아마 CSS 2.0 이후는 더 많을 것이다.)

[색상 값의 RGB 형식]

형식	RGB 포맷	사용 예
16진수	#[16진수값][16진수값][16진수값]	#ff0000
10진수	rgb(정수값,정수값,정수값) 0~255	rgb(255,0,0)
백분율	rgb(%값,%값,%값) 0.0~100.0%	rgb(100%,0%,0%)