기본 규칙들

규칙의 구조

각각의 규칙들은 크게 선택자와 선언부로 나눌수 있다.

선언부는 하나 이상의 선언들로 구성되며 각각의 선언들은 속성과 값의 쌍으로 이루어진다.

규칙의 왼쪽에 있는 선택자는 문서의 어떤 부분에 영향을 미치게 되는지를 정의하게 된다.

규칙의 오른쪽 부분은 하나 이상의 선언들로 구성되는 선언부가 위치한다.

각각의 선언들은 CSS 속성과 속성값의 조합으로 이루어져 있다.

요소 선택자

문서의 요소는 가장 기본적인 선택자 역할을 한다.

선언과 키워드

선언부에는 하나 이상의 선언이 있다.

선언은 속성, 콜론 값, 세미콜론이 이어지는 형식으로 구성된다.

콜론과 세미콜론 뒤에는 스페이스가 한 개 이상 있어도 별 상관이 없으며 대부분의 경우 값은 하나의 키워드나 스페이스로 구분된 여러 개의 키워드 집합이된다.

만약 선언에 잘못된 속성이나 값을 사용하게 되면선언 전체(속성과 값 모두)가 무시된다.

모든 속성이 다중 키워드를 허용하지는 않지만 font를 포함한 여러 속성에는 다중 키워드를 사용할 수 있다.

그룹화

선택자 그룹화

h2,
p {
  color: gray;
}

쉼표는 규칙에 두 개의 선택자가 있다는 것을 브라우저에게 알려준다.

만약 쉼표가 빠지면 해당 규칙은 완전히 다른 의미를 갖게 된다.

제작자들은 그룹화를 이용해서 특정한 유형의 스타일 지정을 극단적으로 간소화할 수 있고 그 결과 스타일시트의 길이를 줄일 수 있다.

전체 선택자

* {
  color: red;
}

별표(*)로 표시하며 와일드 카드처럼 모든 요소를 선택하게 된다.

이 선언은 문서 내의 모든 개별요소를 열거해서 선택자를 그룹화한 것과 동등하다.

선언 그룹화

하나의 규칙에 여러 개의 선택자를 그룹지어 사용할 수 있는 것처럼 선언들을 그룹화하는 것도 가능하다.

h1 {
  font: 19px Helvetica;
  color: purple;
}

선언들을 그룹화할 떄 각각의 선언 뒤에는 세미콜론이 결정적인 역할을 한다는 점을 명시해야 한다.

기술적으로 마지막 선언에는 세미콜론이 없어도 상관은 없지만 세미콜론을 붙이는 습관을 들이는게 좋다.

class 선택자와 id 선택자

기본적인 요소 외에도 class 선택자와 id 선택자라는 두 개의 선택자가 더 존재하며 이를 이용하면 요소 종류에 상관없이 스타일을 지정할 수 있게 된다.

class 선택자

요소에 구애받지 않고 스타일을 적용시키는 가장 일반적인 방법은 class 선택자를 이용하는 것이다.

class 선택자는 요소의 class 속성값을 직접 참조하는 방식으로 동작한다.

동일한 class명을 갖는 모든 요소를 선택하고 싶을 떄 class 선택자에서 전체 선택자를 생략해도 아무런 문제가 발생하지 않는다.

.warning {
  font-style: italic;
}

다중 스페이스

HTML에서는 스페이스로 구분된 여러단어를 하나의 클래스 속성값으로 가질 수 있다.

<p class="urgent warning">플루토늄을...</p>

순서는 별 의미가 없다.

두 개의 class 선택자를 연결하면 순서와 상관없이 두 개의 class 이름을 모두 갖는 요소만 선택할 수 있다.

.warning.urgent {
  background: silver;
}

id 선택자

id 선택자는 class 선택자와 매우 비슷하지만 몇 가지 중요한 차이점이 있다.

우선 id 선택자는 점(.) 대신 번호를 나타내는 # 기호로 시작된다.

두 번쨰 차이점은 class 속성 대신 id 속성을 참조한다는 점이다.

class 선택자처럼 id선택자도 전체 선택자를 생략할 수 있다.

*#lead-para {
  font-weight: bold;
}

class와 id 선택자 중 하나를 선택하기

class는 여러 요소에 적용될 수 있다.

하지만 id는 HTML 문서 내에서 오직 한 번만 사용되어야 하므로 id로 lead-para값을 가지는 요소가 이미 있다면 문서 내의 다른 요소에는 이 값을 사용할 수 없다.

실제로 브라우저는 대부분 HTML 문서 내의 id가 유일한지 확인하지 않는데 이말은 HTML을 구성하는 몇 개의 요소에 동일한 값을 id 속성으로 지정하면 각각의 요소에 동일한 스타일이 적용될 것이라는 뜻이다.

문서 내의 여러 요소에 동일한 id 값을 주면 DOM 스크립트를 사용할 때 어려움이 생기는데 getElementById 같은 일부 함수는 주어진 id값에 해당하는 요소가 오직 하나라는 가정하에 동작하기 떄문이다.

id 속성은 공백으로 구분된 다중 값을 허용하지 않으므로 id 선택자는 class 선택자떄처럼 조합해서 사용할 수는 없다.

class와 id의 또 다른 차이점은 주어진 요소에 어떤 스타일이 적용되어야 하는지를 결정할 때 id가 class 보다 더 높은 우선순위를 갖는다는 점이다.

class와 마찬가지로 id 선택자도 요소의 종류에 영향을 받지 않는다.

문서에 사용된 언어에 따라 다르겠지만 class나 id 선택자의 이름에선 대소문자가 구별될 수 있다.

HTML과 XHTML는 class나 id 값에서 대소문자를 구별하므로 CSS의 class,id 값과 문서의 class,id값은 대소문자가 반드시 일치해야 한다.

속성 선택자

class나 id 선택자 모두 실제로는 특정한 속성값을 선택하는 것이였다.

단순 속성으로 선택하기

속성값과 상관없이 특정한 속성을 가지는 요소를 선택하고 싶다면 단순 속성 선택자를 이용하면 된다.

h1[class] {
  color: silver;
}

속성 선택자를 여러개 연결하면 한가지 속성만이 아니라 두개 이상의 속성을 이용해서 요소를 선택할 수도 있다.

a[href][alt] {
  font-weight: bold;
}

정확한 속성값으로 선택하기

속성으로 요소를 선택할 때 추가적으로 특정한 속성값을 갖는 요소만 처리하도록 선택방식을 제한할 수도 있다.

a[href="http://www.naver.com"] {
  font-weight: bold;
}

요소의 속성과 속성값을 자유롭게 조합해서 지정할수 있지만 문서에 정확한 조합이 없을 경우에는 선택자가 아무것도 선택하지 않는다.

속성만을 사용할 떄 처럼 속성-값 조합도 여러 개를 동시에 연결해서 사용할 수 있다.

이 방식은 속성값이 정확히 맞아야 하므로 공백으로 분리된 목록을 값으로 가지는 속성들과 함께 사용할 경우에는 문제가 되기도 한다.

<p class="urgent warning">플루토늄을 ...</p>

p[class="urgent warning"] {
  font-weight: bold;
}

이 선택자는 class 선택자와 동등하지 않다. class 속성값이 정확하게 urgent warning인(단어의 순서가 정확하고 단어 사이에 한개의 스페이스만 있는) p 요소만 선택한다.

따라서 사실상 정확한 문자열과 일치한다.

또 id 속성을 대상으로 하는 속성 선택자와 id 선택자는 완전히 동일하다고 할 수 없다.

부분 속성값으로 선택하기

공백으로 구분된 목록을 값으로 허용하는 속성에선 그 값들 중 일부만을 이용해서 요소를 선택할 수 있다.

틸데 기호(~)는 스페이스로 나누어진 단어가 속성값에 있는지를 확인해서 요소를 선택하는 데 핵심적인 역할을 한다.

틸데 기호를 적어 주지 않았을 경우 값이 정확하게 일치할 때에만 선택된다.

<p class="urgent warning">플루토늄을 ...</p>

p[class~="warning"] {
  font-weight: bold;
}

특정 속성 선택자

*[lang|="en"] {
  color: white;
}

이 규칙은 lang 속성이 en이거나 en-으로 시작되는 요소를 선택한다.

일반적으로 [att|="val"] 형식은 어떤 속성이나 값에도 사용할 수 있다.