30. CSS - Selector

1. Selector(선택자)

1. Selecotr(선택자)란?

1. CSS 속성을 적용시킬 태그를 지칭하는 것을 말한다.
2. 선택자에는 여러가지 종류가 있고 전체 선택자, 클래스 선택자, 아이디 선택자, 자손 선택자, 가상 선택자 .. 등이 존재한다.
3. 스타일 적용 방식에서 중괄호 앞에 쓰는 것들이 선택자가 된다.

2. 전체 선택자

1. 웹 문서에 존재하는 모든 태그에 스타일을 적용할 때 사용.
2. 전체 선택자는 별표(*)로 지정

   • * {
         스타일1: 속성값1;
         스타일2: 속성값2;
         ....
     }

3. 전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용

3. 태그 선택자

1. 특정 태그에 스타일을 적용할 때 사용
2. 전체 선택자가 가장 많은 태그들을 선택할 수 있다면 태그 선택자는 두 번째로 많은 태그들을 선택할 수 있다.
3. 태그 명을 이용해서 스타일 지정

   • 태그명 {
         스타일1: 속성값1;
         스타일2: 속성값2;
         ...
     }

4. 태그와 요소의 차이
   • '<>'로 묶인 것들은 태그라고 부른다. p, h1, div, a ... 태그라고 부르게 된다.
   • 태그안에 스타일이 적용될 내용을 요소라고 부른다.
   • 스타일은 엄밀히 말하면 태그에 적용되는 게 아니라 요소에 적용되는 것이다.

4. 클래스 선택자

1. 같은 태그들 중에 특정 태그에만 다른 스타일을 적용하고 싶을 때 사용.
2. 태그의 클래스 속성을 사용하여 스타일 지정

   • .클래스명 {
         스타일1: 속성값1;
         스타일2: 속상값2;
     }

3. 다른 태그의 같은 클래스를 가진 상태에서 특정 태그의 클래스에만 스타일을 적용하고 싶을 때

   • 태그명.클래스명 {
         스타일1: 속성값1;
         스타일2: 속상값2;
     }

4. 태그 전체가 아닌 특정부분에만 스타일을 적용하고 싶을 때는 특정부분을 span태그로 묶은 후 span태그에 클래스를 지정한 후 클래스 선택자를 이용해서 스타일을 지정

5. 아이디 선택자

1. 아이디 선택자도 클래스 선택자와 동일하게 특정 태그에만 스타일을 지정할 때 사용
2. 아이디는 한 웹문서에서 유일해야 하는 특성이 있어서 무조건 하나의 태그에만 적용되는 스타일이라고 생각하면 된다.
3. 태그의 아이디 속성으로 지정된 아이디명을 사용해서 스타일을 지정

   • #아이디명 {
       스타일1: 속성값1;
       스타일2: 속성값2;
       ...
     }

6. 그룹 선택자

1. 둘 이상의 태그에 같은 스타일을 지정하고 싶을 때 사용하는 선택자
2. 여러가지 선택자들을 ,로 이어서 스타일을 지정

   • 선택자1, 선택자2, ... {
         스타일 지정
     }

3. 선택자에 사용가능 한 것들은 전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자 등...