CSS 기본 선택자 (selector)

CSS에서는 선택자(selector)를 통해서 웹페이지의 특정 부분만을 선택하여 원하는 스타일을 적용합니다. 이번 포스팅에서는 CSS의 선택자의 근간이 되는 기본 선택자에 대해서 알아보겠습니다.

Type Selector

CSS에서 가장 쉽게 볼 수 있는 기본 선택자는 태그 이름을 그대로 사용하는 타입 선택자(Type selector) 입니다. 타입 선택자를 사용하면 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있습니다.

예를 들어, 웹페이지 상의 모든 <strong> 요소의 글꼴 두께를 스타일하기 위한 CSS 코드는 다음과 같습니다.

strong {
  font-weight: 500;
}

Class Selector

타입 선택자와 더불어 가장 많이 사용되는 CSS 선택자는 클래스 선택자(Class selector) 입니다. . 기호에 클래스 이름을 붙여서 사용하며 클래스 선택자로 특정 class 속성값을 사용하는 모든 요소를 선택할 수 있습니다.

예를 들어, 다음과 같이 error 클래스에 대한 스타일을 선언하면,

.error {
  color: red;
}

아래 HTML 문서에서 두번째 요소의 글자색이 빨간색이 적용됩니다.

<p>정상적으로 처리되었습니다.</p>
<p class="error">오류가 발생하였습니다!</p>

ID Selector

아이디 선택자(ID selector)는 # 기호에 아이디 이름을 붙여서 사용하는 또 다른 CSS 기본 선택자입니다. 클래스 선택자 만큼 많이 쓰이지는 않지만 웹페이지 상에서 유일한 요소를 대상으로 도드라진 스타일을 적용할 때 유용하게 쓸 수 있습니다.

예를 들어, 다음과 같이 title 아이디에 대한 스타일을 선언하면,

#title {
  font-size: 2rem;
}

아래 HTML 문서에서 첫번째 요소의 글꼴 크기에 2rem이 적용됩니다.

<h1 id="title">제목</h1>
<p>여기는 내용입니다.</p>

Attribute Selector

대부분의 경우, 지금까지 소개해드린 3가지 기본 선택자로 웹페이지에서 원하는 부분을 선택할 수 있습니다. 하지만 속성까지 고려해야하는 섬세한 스타일이 필요한 경우에라면 [] 기호를 사용하는 속성 선택자(Attribute selector)를 사용할 수 있습니다.

[] 기호 안에 속성명만 명시하면 속성값과 무방하게 해당 속성이 설정된 모든 요소를 선택합니다.

input[disabled] {
  box-shadow: none;
}

[] 기호 안에 속성명과 속성값이 함께 명시되어 있다면 해당 속성명과 속성값이 정확히 일치하면 모든 요소를 선택합니다.

button[type="reset"] {
  background: yellow;
}

위 예제에서 보듯이, 속성 선택자는 타입 선택자와 함께 사용되는 경우가 많습니다. 그렇지 않으면 너무 많은 요소가 선택될 위험이 높기 때문입니다.

Universal Selector

마지막으로 소개드릴 CSS의 기본 선택자는 * 기호를 사용하는 전체 선택자(Universal selector) 입니다. 전체 선택자는 웹페이지의 모든 요소를 선택하고 싶을 때 사용합니다.

일반적으로 선택자는 웹페이지의 특정 부분에만 스타일을 적용하기 위해서 사용하기 때문에 전체 선택자가 사용되는 경우는 제한적일 수 밖에 없는데요. 가장 흔히 볼 수 있는 적용 사례는 한 웹사이트의 모든 요소의 box-sizing 속성을 border-box로 일괄 변경하는 것을 들 수 있습니다.

* {
  box-sizing: border-box;
}

마치면서

이상으로 CSS의 기본 선택자에는 무엇이 있는지 간단하게 살펴보았습니다. 실제 프로젝트에서는 이러한 기본 선택자를 여러 개 조합하여 사용하는 경우가 많은데요. 이 부분에 대해서는 다음 포스팅에서 다루도록 하겠습니다.