선택자_기본

css 선택자에는 기본적으로 5가지가 있다 

 

  기본   복합   가상 클래스   가상 요소   속성 

기본 선택자

*  전체 선택자(Universal Selector)

 *  (별표시/ 에스터리스크) : 모든 요소를 선택

• 단독으로 사용하지 않고 복합 선택자를 통해서 어떤 범위 안에서 있는 모든 요소를 선택하는 개념으로 사용

 

코드펜 예시

 

-모든 요소가 선택되어 빨강으로 변함 

 

See the Pen 선택자_ 기본 by 김선미 (@tjsalsun) on CodePen.

 

tag name 태그 선택자(Type Selector)

tag name : 태그 이름이 해당 태그인 경우 요소 선택 

• 별다른 기호 없이 태그이름 있을 시 

 

 

코드펜 예시

 

- li 태그 요소만 선택되어 글자가 빨강으로 변함 

See the Pen 선택자_기본2 by 김선미 (@tjsalsun) on CodePen.

 

.class name 클래스 선택자(Class Selector)

. class name : 클래스 이름에 해당되는 클래스 이름의 요소 선택

• 태그 이름은 겹침으로 따로 특정한 태그만 선택 후 style 변경을 위해서 사용
• 점이 클래스를 뜻한다 
• 중복 가능하다 

코드펜 예시

- html에 클래스를 준 후 클래스를 표기하는 점(닷)을 한 후 클래스 이름을 선택해 글자 색을 변경 

 

See the Pen 선택자_기본3 by 김선미 (@tjsalsun) on CodePen.

#id name 아이디 선택자(ID Selector)

#id name : id 속성값인 id name인 요소 선택 

• 이름이 같아도 속성이 id일경우 해당 id name의 요소만 선택해 style 변경 

 

코드펜 예시

 

- html에 id를 준 후 id를 표기하는 #(샵)를 표기한 후 클래스 이름을 선택해 글자 색을 변경 

 

See the Pen 선택자_기본 4 by 김선미 (@tjsalsun) on CodePen.

---

TIL

 

 

느낀 점

 

선택자 사용시 우선순위가 있으므로 스타일 작성 시에 중요하다

 

 

오늘의 학습 만족도 

⭐⭐⭐⭐⭐