[css] 아이디 선택자 / 클래스 선택자 정의, 사용방법

---

아이디 선택자 / 클래스 선택자

• 아이디 선택자

: #기호로 표시됨/ 특정한 요소 선택

(HTML구조의 공간분할을 적용할 때)

 

 - body 태그 안에 한개만 존재

 - 정의한 후 한 페이지에 한번만 사용 ( 웹 표준 테스트 오류발생)

 - 한 페이지에 한번만 들어가는 로고, 상단메뉴, 하단정보 등 스타일 정의할 때

 

 

 

 

 

• 클래스 선택자

: 마침표 기호로 표시되며 특정한 요소 선택

(공동되는 스타일 적용할 경우)

 

 - 여러 개의 태그에 동시에 적용

 - 몇 번이고 재사용 가능

 - 반복적으로 사용되는 스타일

 - 세부 스타일 정의할 때 사용

 

 

 

 

---

css주석 방법

ctrl + /

 

 

 

---

 

아이디 선택자 사용 방법

 

 

1. body 에서 id이름과 class이름 지정 후

2. head 에 id일 땐 #아이디이름   

              클래스일 땐 .클래스이름

 

 

 

 

 

 

---

아이디 선택자, 클래스 선택자 섞어 사용하기

 

- 클래스 2개일 때 " " 공백만 두고 속성들 적용

- 아이디, 클래스 1개씩 일 때 태그 안에 두개 다 작성

 

 

 

 

 

 

 

 

 

---

모든 태그들 적용할 때 (전체 선택자 : * )

 

 

• 우선순위가 가장 낮음 ( 다른 선택자가 먼저 지정이 된 경우 적용안됨)

 

 

 

-> 적용이 안됐음을 알 수 있음

 

---

여러 개에 적용시킬 때 -> 클래스 선택자 추천

 

<예제>