CSS 전체선택자(*)

CSS 전체선택자(*)

---

오늘은 CSS의 전체선택자에 대해 알아보겠습니다.

CSS 전체선택자를 알기 전에 먼저 알아두셔야 할 것이 2가지 있는데

 

먼저 CSS의 기본 구조를 알아야 합니다.

 

CSS의 기본 구조는 선택자{속성: 속성값;}으로 설정하는데 전체선택자는

기본 구조에서 '선택자'에 작성하는 것이고 전체선택자는 '선택자'에 *를 작성하는 방식으로 사용합니다.

 

다음으로 알아야 할 것은

HTML은 기본적으로 적용되어 있는 스타일이 있다는 것입니다.

 

<h1> 태그 기본 스타일

예시로 <h1> 태그를 보시면 CSS 스타일을 적용하지 않았는데

font-size가 2em으로 적용되는 것을 볼 수 있습니다.

 

여기서 em은 부모 태그의 font-size의 값을 의미합니다.

-더 디테일한 정보는 다음 단위에 대한 글에서 알려드리겠습니다.-

 

부모 태그의 기본 값은 건들지 않았기 때문에 기본 font-size인 16px이

적용되어 <h1> 태그의 font-size는 2em인 32px로 보시면 됩니다.

 

전체선택자

적용된 값

이처럼 HTML에서는 기본적으로 적용되어 있는 스타일을 제공하는 태그가 있는데

CSS의 전체선택자는 HTML에서 기본적으로 적용되는 스타일 값을 변경하기 위해 주로 사용됩니다.

전체선택자는 말 그대로 전체 태그를 선택하는 선택자로 전제선택자에 값을 적용하면 전체 태그의

스타일에 관여를 할 수 있기 때문에 중요한 코드입니다.

 

※참고로 요즘 추세는 전체선택자 대신 그룹 선택자를 사용하는데

이 그룹 선택자는 ,를 사용하여 작성합니다.

그룹 선택자를 사용하는 이유는 전체선택자는 원하지 않은 태그에도 적용이 되기 때문에

그룹 선택자를 사용하면 원하는 태그에만 원하는 값을

적용할 수 있어서 요즘은 그룹 선택자를 많이 사용합니다.

 

하지만 전체선택자를 알아둬야 하는 이유는 빠르고 간편하게 값을

적용할 수 있기 때문에 전체선택자를 사용하는 경우도 많습니다.

 

전체 선택자

전체 선택자에서 주로 적용하는 값으로는

HTML의 박스 모델인 margin과 padding 값을 0으로 만드는 것과

box-sizing을 border-box로 조절하는 방식이 있습니다.

 

margin과 padding의 값을 0으로 조절하는 이유는

웹디자인을 했을 때 0으로 조절하면 다른 영역과의 margin과 padding을

조절하는데 더 편하게 사용할 수 있습니다.

 

다음은 box-sizing을 border-box로 조절하는 이유는 웹디자인을 했을 때

box-sizing을 조절하지 않는다면 약간의 오차가 생기면 균형이 무너져

원하는 디자인을 하기 어려울 경우가 생깁니다.

그래서 box-sizing을 border-box로 적용하여 너비와 높이의 균형을 주어

후에 오차가 생기는 것을 방지하기 위해 사용합니다.

 

---

 

오늘 내용을 정리해 보면 전체선택자는

HTML의 기본으로 적용되는 스타일을 기본 값으로 조정하거나

웹디자인을 하기 위해서 필요한 기본 값을 적용하기 위해

전체선택자를 사용하여 HTML의 전체 태그에 기본 값을 줄 수 있습니다.

 

그룹 선택자

요즘은 전체선택자 보다 그룹 선택자를 많이 사용하는데

전체선택자의 단점인 원하지 않은 태그에도 적용되는 단점을 보안하기 위해

그룹 선택자를 사용하여 원하는 태그에만 적용할 수 있도록 ,를 사용하여 사용합니다.

 

하지만 전체선택자를 알아야 하는 이유는 빠르고 간편하게

값을 적용할 수 있다는 장점이 있기 때문에 전체선택자를 사용합니다.

 

감사합니다!!