[Part 1] Web Components — 등장 배경과 4가지 핵심 기술

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

CSS를 제대로 다루기 위해 가장 먼저 정복해야 하는 개념이 바로 선택자(Selector)와 특정도(Specificity)입니다. 이 두 가지는 CSS를 배우는 모든 단계에서 계속해서 등장하며, 특히 나중에 CSS 네스팅(Nesting)을 배울 때도, 복잡한 컴포넌트 스타일을 만들 때도 반드시 이해하고 있어야 하는 기초입니다.

많은 초보자들이 CSS를 처음 접할 때 “클래스만 쓰면 되지 않나?”라고 생각하지만, 실제로 프로젝트를 진행하다 보면 스타일이 적용되지 않거나, 의도와 다르게 다른 스타일이 덮어쓰는 상황을 자주 만나게 됩니다. 이런 문제의 대부분은 선택자와 특정도를 제대로 이해하지 못해서 발생합니다.

이번 파트에서는 선택자의 종류부터 시작해서, 브라우저가 어떤 스타일을 우선으로 적용하는지, 그리고 실무에서 자주 발생하는 문제들을 어떻게 해결할 수 있는지까지 자세히 살펴보겠습니다.

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

AD

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

[50% 할인] 일본 eSIM 무제한 데이터|Rakuten / KDDI / Docomo

₩741

₩1,482

KKday

[젤리 너혹시]

₩4,900

₩9,800

마리오케이스

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

₩9,900

₩23,900

마리오케이스

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

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

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

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

위 코드에서 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;
}

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

.sidebar {
  width: 280px;
  background: #f8fafc;
}

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

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

3. 특정도(Specificity) — CSS의 점수 체계

AD

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

파블로 - 키울수록 돈버는 리워드 앱테크

Web3.0 학습과 리워드가 결합된 앱테크 플랫폼!

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

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

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

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

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

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

CSS에는 상속이라는 개념이 있습니다. 일부 속성은 부모 요소에서 자식 요소로 자동으로 전달됩니다. 대표적인 상속 속성은 다음과 같습니다:

• color
• font-size
• font-family
• line-height
• text-align

반대로 상속되지 않는 속성들도 많습니다:

• margin, padding
• width, height
• border
• background
• box-shadow

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

5. 초보자가 자주 하는 실수와 해결법

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

6. 정리

AD

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

구름목욕시간 유아 입욕제 대팩 500g (25회분) 8종

₩9,900

₩19,900

오늘의집

BAS 냉장고 탈취제 리필 3세트 (9개입)

₩25,900

₩31,900

11번가

푸드올로지 버닝올로지 디데이 10포 2박스

₩58,900

₩117,800

11번가

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

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

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