CSS 기본 문법, CSS 요소 선택자 전체 선택자, 그룹화

선택자는 복잡하고 다양한 요소들 사이에서 내가 원하는 요소만을 선택할 수 있도록 도와준다.

완성도 있는 디자인을 표현하기 위해서는 반드시 내가 원하는 요소를 선택할 수 있어야 하기 때문에 선택자는 매우 중요!!

 

요소 선택자

선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 합니다.

 

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

 

 

 

요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어갑니다.

문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용됩니다.

 

 

 

선택자는 그룹화가 가능하다! (쉼표 사용) 

 

h1, h2, h3, h4, h5, h6 { color: yellow; }

 

위 코드는 요소 선택자의 예제 코드와 같은 코드입니다.

 

---

 

전체 선택자 

* { color: yellow; }

 

*(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있습니다.

이렇게 선언하면, 한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용된다.

전체 선택자는 매우 편리하지만, 성능에 좋지 않으므로 될 수 있으면 사용을 지양합니다.

 

---

선택자뿐만 아니라 선언들도 그룹화가 가능합니다.

h1 { color: yellow; font-size: 2em; background-color: gray; }

 

 

---

 

그리고 마지막으로 선택자와 선언이 동시에 그룹화도 가능합니다.

h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

 

 

 

 

👇css 선택자에 대해 더 공부해보자!👇

 

https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference