[CSS] CSS 선택자(selector)

CSS : html이 정보전달에 집중할 수 있게, 디자인을 담당하는 언어이다.

1. css 문법

 : css 문법을 적용하는 방법에는 두 가지가 있다.

 

  1) style 태그를 통해서 하는 방법

 

  2) 선택자를 이용하는 방법

 

    선택자는 tag 선택자, class 선택자, id 선택자 3가지가 존재한다.

 

  (1) tag selector : a, p, div 등 html 에 사용되는 태그에 css 효과를 적용할 수 있다.

 

 위의 예시와 같이 {} 중괄호 안의 부분을 declaration(선언)이라고 부르고, 그 안에서 적용되는 속성들을 property, 그 속성들의 구체적인 값을 value 라고 부른다. 또한, 이러한 description을 구분해 주기 위해 ;(세미콜론) 이 구분자로서 사용된다.

 

    (2) class selector : class 라는 이름을 붙여주고, 그 이름이 포함된 태그에 css 효과를 적용할 수 있다. 특징                          으로는 중복해서 사용할 수 있고, 여러 클래스를 한번에 적용할 수 있다는 것이다. 

 

위의 두번째 예시와 같이,  클래스들은 띄어쓰기로 구분하게 된다. 

 

(3) id selector : id 라는 이름을 붙여주고, 그 이름이 포함된 태그에 css 효과를 적용할 수 있다. 특징                          으로는 id 값은 html에 단 한번만 등장할 수 있다는 것이다. (중복 불가)

 

- 이 세가지 태그들의 우선 순위는 id > class > tag selector 순이다. 

 

- 같은 종류의 selector 라면 더 나중에 등장한 명령이 더 큰 영향력을 갖게 된다.

 

- tag selector를 구분하기 위해서 class 또는 id 태그와 같이 쓰는 경우가 있는데, 이는 이 tag selector의 부모가 class 또는 id 값이라는 것을 말하고, 중복된 tag selector를 사용할 때 구분짓는 용도로 사용할 수 있다.

 

따라서 위의 예시는, a 태그 중에서 부모 class 값이 dongle 인 태그를 뜻한다.