[HTML] 선택자 : tag, id, class

<선택자 >

-  css를 적용할 때 사용하는 이름 

- 태그(tag), 아이디(id), 클래스(class)

 

1. 아이디(id) 

- 태그에 id를 붙여서 스타일을 적용하도록 하는 것, 스타일에서 #을 붙여서 사용
- 아이디는 스타일 오버로딩과 상관없이 태그보다 우선적으로 적용 

2. 클래스(class)

- 태그에 클래스를 지정하여 스타일을 적용하도록 하는 것, 사용할때는 .을 붙여서 사용
  
3. 아이디와 클래스의 차이점

- 아이디: id의 이름은 유일하게 사용함. 같은 태그에서 여러 아이디를 사용 불가
- 클래스: 여러 태그에서 사용 가능하고, 같은 태그에서 여러 클래스를 사용 가능

4. 스타일의 범위의 우선 순위
인라인 > 내부, 외부
  
5. 선택자의 우선 순위

id > class > tag

6. 가상 클래스

- hover: 마우스를 올렸을 때 스타일이 적용되도록 하는 선택자
- active: 마우스를 클릭했을 때 스타일이 적용되도록 하는 선택자
- focus: 커서가 들어가서 선택된 상태일 때 적용
- checked: 체크되었을 때 적용

 input:focus {background-color: lightgray;}
 input:checked +label {color: red;}

+선택자 : 인접하는 요소를 선택

 

7. 가상 요소
- first-letter: 문단에서 첫번째 글자에만 스타일이 적용되도록 하는 선택자
- first-line: 문단에서 첫번째 라인에만 스타일이 적용되도록 하는 선택자