CSS 기본 선택자 정리하기

이 글에서 다루는 내용

CSS는 HTML 요소를 꾸밀 때 사용합니다.

그런데 CSS를 적용하려면 먼저 어떤 HTML 요소를 꾸밀지 골라야 합니다.

이때 사용하는 것이 선택자입니다.

이번 글에서는 CSS에서 자주 사용하는 기본 선택자를 정리합니다.

• 전체 선택자
• 태그 선택자
• class 선택자
• id 선택자

선택자란?

선택자는 CSS에서 스타일을 적용할 HTML 요소를 고르는 문법입니다.

쉽게 말하면 “이 부분을 꾸미겠다”라고 지정하는 표시입니다.

p {
  color: red;
}

위 코드에서 p가 선택자입니다.

이 코드는 HTML 문서 안의 모든 p 태그를 선택해서 글자 색을 빨간색으로 바꿉니다.

CSS 기본 구조는 다음과 같습니다.

선택자 {
  속성: 값;
}

1. 전체 선택자

전체 선택자는 HTML 문서 안의 모든 요소를 선택합니다.

전체 선택자는 * 기호를 사용합니다.

* {
  color: red;
}

위 코드는 모든 요소의 글자 색을 빨간색으로 바꿉니다.

<h1>제목입니다</h1>
<p>문장입니다</p>
<button>버튼입니다</button>

위 HTML에 전체 선택자를 적용하면 h1, p, button 모두 영향을 받습니다.

전체 선택자는 언제 사용할까?

전체 선택자는 보통 모든 요소에 공통 규칙을 적용할 때 사용합니다.

예를 들어 기본 여백을 초기화할 때 자주 사용합니다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

위 코드는 모든 요소의 기본 바깥 여백과 안쪽 여백을 없애고, 크기 계산 방식을 정리합니다.

처음에는 어렵게 느껴질 수 있지만, 웹페이지의 기본 스타일을 통일할 때 자주 볼 수 있는 코드입니다.

2. 태그 선택자

태그 선택자는 HTML 태그 이름으로 요소를 선택합니다.

p {
  color: blue;
}

위 코드는 모든 p 태그의 글자 색을 파란색으로 바꿉니다.

<p>첫 번째 문장입니다.</p>
<p>두 번째 문장입니다.</p>

두 문장 모두 p 태그이기 때문에 같은 스타일이 적용됩니다.

태그 선택자 예시

h1 {
  font-size: 32px;
}

button {
  background-color: black;
  color: white;
}

위 코드에서 h1과 button이 태그 선택자입니다.

h1 태그에는 글자 크기를 적용하고, button 태그에는 배경색과 글자 색을 적용합니다.

태그 선택자의 특징

태그 선택자는 같은 태그 전체에 스타일이 적용됩니다.

그래서 특정 요소 하나만 꾸미고 싶을 때는 적합하지 않을 수 있습니다.

p {
  color: red;
}

이렇게 작성하면 페이지 안의 모든 p 태그가 빨간색이 됩니다.

일부 문장만 다르게 꾸미고 싶다면 class 선택자를 사용하는 것이 좋습니다.

3. class 선택자

class 선택자는 같은 class 이름을 가진 요소를 선택합니다.

class는 HTML에서 여러 요소를 같은 그룹으로 묶을 때 사용합니다.

HTML에서는 class 속성을 사용합니다.

<p class="notice">공지 문장입니다.</p>
<p class="notice">안내 문장입니다.</p>

CSS에서는 class 이름 앞에 점(.)을 붙입니다.

.notice {
  color: red;
  font-weight: bold;
}

위 코드는 class="notice"를 가진 요소에 스타일을 적용합니다.

class 선택자는 여러 번 사용할 수 있다

class는 여러 요소에 반복해서 사용할 수 있습니다.

<div class="card">첫 번째 카드</div>
<div class="card">두 번째 카드</div>
<div class="card">세 번째 카드</div>

.card {
  border: 1px solid #ddd;
  padding: 16px;
}

위 코드처럼 같은 모양을 반복해서 사용할 때 class 선택자가 유용합니다.

class 선택자를 가장 자주 사용합니다.

버튼, 카드, 메뉴, 게시글 목록처럼 같은 디자인이 반복되는 경우가 많기 때문입니다.

4. id 선택자

id 선택자는 특정 id 값을 가진 요소를 선택합니다.

HTML에서는 id 속성을 사용합니다.

<h1 id="main-title">메인 제목</h1>

CSS에서는 id 이름 앞에 샵(#)을 붙입니다.

#main-title {
  color: navy;
}

위 코드는 id="main-title"인 요소를 선택해서 글자 색을 남색으로 바꿉니다.

id 선택자의 특징

id는 한 문서 안에서 보통 하나만 사용하는 것이 좋습니다.

<!-- 좋지 않은 예시 -->
<h2 id="title">첫 번째 제목</h2>
<h2 id="title">두 번째 제목</h2>

id는 고유한 이름표에 가깝습니다.

사람으로 비유하면 주민등록번호처럼 한 사람에게 하나만 있어야 하는 값입니다.

그래서 여러 요소에 같은 스타일을 적용하고 싶다면 id보다 class를 사용하는 편이 좋습니다.

기본 선택자 한 번에 비교하기

처음에는 .과 #을 헷갈리기 쉽습니다.

간단하게 기억하면 됩니다.

class와 id 차이

class와 id는 CSS를 처음 배울 때 자주 헷갈리는 부분입니다.

둘 다 HTML 요소에 이름을 붙이는 역할을 합니다.

하지만 사용 목적이 다릅니다.

쉽게 말하면 class는 같은 유니폼이고, id는 개인 번호표입니다.

같은 디자인을 여러 곳에 적용하려면 class를 사용하고, 특정 요소 하나만 가리키고 싶을 때는 id를 사용합니다.

간단한 예시

HTML 코드입니다.

<h1 id="page-title">CSS 선택자 기초</h1>

<p class="description">선택자는 꾸밀 요소를 고르는 문법입니다.</p>
<p class="description">CSS를 배우려면 선택자를 먼저 이해해야 합니다.</p>

<button class="primary-button">확인</button>

CSS 코드입니다.

* {
  box-sizing: border-box;
}

h1 {
  font-size: 32px;
}

.description {
  color: gray;
}

#page-title {
  color: navy;
}

.primary-button {
  background-color: black;
  color: white;
  padding: 10px 16px;
}

위 코드에서 사용된 선택자는 다음과 같습니다.

정리

CSS 선택자는 스타일을 적용할 HTML 요소를 고르는 문법입니다.

전체 선택자는 *를 사용하고, 모든 요소를 선택합니다.

태그 선택자는 p, h1, button처럼 태그 이름으로 선택합니다.

class 선택자는 .이름 형태로 작성하고, 여러 요소에 반복해서 사용할 수 있습니다.

id 선택자는 #이름 형태로 작성하고, 특정 요소 하나를 선택할 때 사용합니다.

처음에는 class와 id 차이를 확실히 구분하는 것이 중요합니다.

보통 class 선택자를 가장 많이 사용합니다.