12. 주요 선택자

이번 포스팅에서는 주요 선택자에 대하여 다뤄보겠습니다.

앞선 포스팅에서 스타일 속성을 적용하는 요소를 선택자로 지칭한다고 했는데요.

선택자의 종류는 다양하지만, 이번 포스팅에는 자주 사용되는 선택자들에 대해서 알아보겠습니다.

 

1. 전체 선택자

전체 선택자는 이름 그대로 전체 선택자에 적용된 스타일이 문서 전체의 요소에 적용되도록 합니다.

 

* {
    font-size:12px;
    font-weight:normal;
    font-style:normal;
}

 

위의 예시를 해석해 보면 문서 전체의 요소에 글자 크기는 12px, 두께는 보통, 스타일도 보통으로 지정하라는 뜻입니다.

문서의 요소들에 공통으로 적용할 스타일을 지정하는 데에 자주 사용하는데요.

예를 들어, 웹 브라우저에서 자동으로 지정하는 margin, padding 값을 0으로 조정하거나 기본 폰트 스타일을 지정할 때 등에 사용됩니다.

2. 태그 선택자

태그 선택자는 HTML에 사용되는 태그들 중 특정 태그가 쓰인 모든 요소에 스타일을 적용합니다.

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

위의 예시를 살펴보면 <p> 태그에 글자 크기를 36px, 색상을 빨간색으로 지정하는 스타일을 선언했는데요.

<p> 태그가 아닌 태그들에는 해당 스타일이 적용되지 않고, <p> 태그에만 지정한 스타일이 적용되는 것을 확인하실 수 있습니다.

전체 요소가 아닌 특정 태그의 요소들에만 공통 스타일을 적용하고 싶을 때 사용됩니다.

 

포스팅을 읽다 보시면 "태그"와 "요소"라는 말이 비슷해보여서 헷갈리실 수 있을 것 같아 잠시 짚고 넘어가야 할 것 같은데요.

"태그"는 말 그대로 태그 자체를 지칭할때 사용하고, "요소"는 태그가 적용된 것을 가리킵니다.

 

<h1>안녕하세요.</h1>

 

위의 예시에서 태그는 <h1> 태그나 </h1> 태그이지만, 요소는 <h1>안녕하세요.</h1>이 됩니다.

태그와 요소의 차이점에 대해서 이렇구나라는 정도로 이해하시고 넘어가시면 좋을 것 같습니다.

3. class 선택자

앞서 다룬 전체 선택자와 태그 선택자는 선언된 모든 요소에 공통으로 적용되는 방식인데요.

같은 태그라도 다른 스타일을 적용하고 싶을 때 사용하는게 class 선택자나 id 선택자입니다.

class는 태그에 선언하며, 하나의 태그에 여러 개의 class를 선언할 수 있습니다.

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

 

class 선택자는 class명 앞에 "." 온점을 입력하고 사용하게 됩니다.

class 선택자는 전체 선택자나 태그 선택자보다 우선 순위를우선순위를 가지며, class 선택자끼리는 나중에 선언된 class, 이후에는 class 선택자가 중첩된 것이 우선순위를 가지게 됩니다.

class 선택자는 네이밍을 할때 의미를 파악하기 쉽도록 하는 게 작업에 용이하니, 웹 브라우저들을 살펴보면서 개발자 도구를 통해 어떠한 class 명을 사용하는지 살펴보는 게 많은 도움이 됩니다.

4. id 선택자

id 선택자는 기본적으로 class 선택자와 동일한 역할을 수행하게 되는데요.

선언하는 방법이 "." 온점에서 "#" 샾으로 변경되는 것이 차이점이며, class 선택자보다 우선 순위를 가지게 됩니다.

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

class 선택자와 가장 큰 차이점은 class 선택자는 문서 안에서 여러 번 적용할 수 있는 반면, id 선택자는 문서 안에서 한 번만 적용할 수 있는 것인데요.

따라서, id 선택자는 주로 문서의 레이아웃에 관련된 스타일을 지정하거나 JavaScript에서 웹 요소들을 구별하기 위해 자주 사용됩니다.

 

선택자는 "," 쉼표를 통해 그룹화하여 스타일을 지정할 수도 있습니다.

 

h1, h2 {
    color:red;
}

 

위의 예시처럼 그룹화하여 공통된 스타일을 적용할 수 있는 점 참고해 주세요.

 

작업을 진행함에 있어서 상황에 맞게 선택자를 사용하여 스타일을 적용하는 것이 중요하니, 선택자의 쓰임새에 대하여 잘 숙지하고 넘어가시는 것을 권해드립니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)