Part 1: CSS 선택자와 특정도 완전 이해하기

Part 1: CSS 선택자와 특정도 완전 이해하기

CSS를 배우는 데 있어서 가장 먼저, 그리고 가장 중요하게 이해해야 하는 것이 바로 선택자(Selector)와 특정도(Specificity)입니다. 이 두 개념을 제대로 이해하지 못하면, CSS를 아무리 오래 써도 스타일이 왜 적용되지 않는지, 왜 다른 스타일에 밀리는지 계속해서 헤매게 됩니다.

특히 2026년 현재 CSS 네스팅(Nesting)이나 :has() 같은 최신 기능을 배우려고 할 때도, 선택자와 특정도에 대한 이해가 부족하면 많은 부분에서 혼란을 겪게 됩니다. 그래서 이번 파트에서는 선택자의 종류부터 시작해서, 브라우저가 스타일을 어떻게 우선순위로 적용하는지까지 최대한 자세하고 천천히 설명하겠습니다.

1. 선택자(Selector)란 무엇인가?

AD

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

[젤리+투명스트랩]낙서고미

₩9,900

₩23,900

마리오케이스

[패션특가] [1+1 특가] 아디다스 SS 써밋 남성 골프바지 일자핏 골프팬츠 남자 골프웨어 IQ2921 IS0541 IU2823 IU2824

₩129,000

₩220,000

딜팡

[젤리 짜부짜부]

₩4,900

₩9,800

마리오케이스

선택자란 HTML 문서 안에서 어떤 요소에 스타일을 적용할지 지정하는 방법입니다. 브라우저에게 “이 요소를 찾아서 이렇게 꾸며라”라고 명령을 내리는 역할을 합니다.

HTML에는 브라우저가 기본적으로 인식하고 있는 태그들이 많이 있습니다. 예를 들어 <div>, <p>, <button>, <input>, <section>, <article> 등이 있습니다. 우리는 이런 태그들을 선택자로 사용해서 스타일을 줄 수 있습니다.

/* 요소 선택자 */
p {
  color: #374151;
  line-height: 1.7;
  margin-bottom: 1rem;
}

button {
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

위 코드에서 p와 button이 선택자입니다. 이 선택자는 해당 태그를 가진 모든 요소에 스타일을 적용합니다. 하지만 실제 웹사이트를 만들다 보면, 같은 태그라도 상황에 따라 다른 스타일을 주어야 하는 경우가 훨씬 많습니다.

2. 클래스 선택자와 ID 선택자

요소 선택자만으로는 한계가 명확합니다. 같은 <div> 태그를 사용하더라도, 하나는 상품 카드로, 하나는 프로필 카드로, 하나는 알림 박스로 사용해야 할 때가 많기 때문입니다. 그래서 우리는 주로 클래스(Class)를 사용합니다.

<div class="card">...</div>
<div class="card featured">...</div>
<div class="sidebar">...</div>

.card {
  background: white;
  border: 1px solid #e5e7eb;
  padding: 24px;
  border-radius: 12px;
  transition: box-shadow 0.2s ease;
}

.featured {
  border-color: #0a66c2;
  box-shadow: 0 10px 15px rgb(0 0 0 / 0.1);
}

.sidebar {
  width: 280px;
  background: #f8fafc;
  padding: 20px;
  border-radius: 12px;
}

클래스는 점(.)으로 시작하며, 하나의 요소에 여러 개의 클래스를 동시에 붙일 수 있다는 큰 장점이 있습니다. 위 예시처럼 featured 클래스를 추가하면 기본 카드 스타일 위에 추가적인 스타일이 더해지는 방식입니다.

ID 선택자는 #으로 시작합니다. ID는 문서 내에서 유일해야 한다는 특징이 있으며, 특정도가 매우 높습니다. 실무에서는 ID 선택자를 거의 사용하지 않는 것이 일반적입니다. 왜냐하면 나중에 스타일을 수정하거나 덮어쓰기 어려워지기 때문입니다.

3. 특정도(Specificity) — 브라우저의 점수 계산법

브라우저는 여러 선택자가 같은 요소를 가리킬 때, 어떤 스타일을 우선 적용할지 점수로 판단합니다. 이 점수 체계를 특정도(Specificity)라고 합니다.

특정도는 다음과 같이 계산됩니다:

예를 들어 아래와 같은 상황이 있다고 가정해보겠습니다.

.card .title { color: black; }        /* 10 + 10 = 20점 */
#header .title { color: blue; }       /* 100 + 10 = 110점 */

이 경우 #header .title의 점수가 훨씬 높기 때문에 제목 색상은 파란색이 적용됩니다. 특정도를 이해하면 “왜 내 스타일이 적용되지 않지?”라는 문제를 훨씬 빠르게 해결할 수 있습니다.

4. 상속(Inheritance)과 캐스케이드(Cascade)

AD

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

데이톡 - 매일 100만 회원과 새로운 인연

CSS에는 상속이라는 중요한 개념이 있습니다. 일부 속성은 부모 요소에서 자식 요소로 자동으로 전달됩니다. 대표적인 상속 속성은 color, font-size, font-family, line-height, text-align 등입니다.

반대로 상속되지 않는 속성들도 많습니다. margin, padding, width, height, border, background, box-shadow 같은 속성들은 부모에서 자식으로 상속되지 않습니다.

캐스케이드는 CSS의 기본 원칙 중 하나로, “나중에 작성된 스타일이 이전 스타일을 덮어쓴다”는 의미입니다. 하지만 특정도가 높은 스타일은 작성 순서와 관계없이 우선 적용됩니다.

5. 실무에서 자주 발생하는 상황과 해결법

실제 프로젝트를 하다 보면 다음과 같은 상황을 자주 만나게 됩니다:

• 디자인 시스템을 만들었는데, 특정 페이지에서만 스타일이 이상하게 적용된다.
• 버튼 컴포넌트를 만들었는데, 어떤 곳에서는 색상이 적용되고 어떤 곳에서는 적용되지 않는다.
• 모바일에서만 스타일이 깨지는데 원인을 찾기 어렵다.

이런 문제의 대부분은 특정도를 제대로 이해하지 못해서 발생합니다. 특히 나중에 CSS 네스팅을 사용하게 되면, 특정도가 어떻게 변하는지 이해하는 것이 매우 중요해집니다.

6. 초보자가 자주 하는 실수

• ID 선택자를 과도하게 사용해서 나중에 스타일을 수정하기 어려워지는 경우
• !important를 남발해서 코드가 점점 지저분해지는 경우
• 특정도를 고려하지 않고 클래스만 계속 추가해서 선택자가 길어지는 경우
• 상속되는 속성과 되지 않는 속성을 구분하지 못해서 예상과 다른 결과가 나오는 경우

7. 정리

AD

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

단하루 34만 + 김치통 전원 증정) 미닉스 더시프트 39L 미니 김치냉장고 소형 뚜껑형

₩349,000

₩399,000

11번가

[도드람한돈] 삼겹살 구이용 1kg

₩25,200

₩31,500

11번가

간편 세척 대용량 글라스 에어프라이어 5.5L 304 스테인리스 오일망

₩59,900

₩70,470

11번가

이번 파트에서 배운 내용을 정리하면 다음과 같습니다:

• 선택자는 HTML 요소를 찾아 스타일을 적용하는 방법이다.
• 클래스 선택자를 주로 사용하고, ID 선택자는 가급적 피하는 것이 좋다.
• 특정도는 브라우저가 스타일 우선순위를 정하는 점수 체계다 (ID 100점, 클래스 10점, 요소 1점).
• 상속되는 속성과 그렇지 않은 속성을 구분할 줄 알아야 한다.
• 캐스케이드와 특정도를 이해하면 스타일 충돌 문제를 해결하기가 훨씬 쉬워진다.

다음 파트에서는 커스텀 프로퍼티(Custom Properties)에 대해 자세히 알아보겠습니다. Sass에서 사용하던 변수와 어떻게 다른지, 왜 더 강력한지 실전 예제를 통해 충분히 설명하겠습니다.