CSS 우선순위와 적용 안 되는 문제 해결하기

CSS가 안 먹는 순간은 누구에게나 온다

CSS를 쓰다 보면 이런 순간을 만납니다.

"분명히 색을 바꿨는데 화면은 그대로네?"
"버튼을 둥글게 만들었는데 한 버튼만 각져 있네?"
"모바일에서만 이상하게 적용되네?"

이때 중요한 것은 코드를 많이 외우는 것이 아닙니다. 문제를 찾는 순서를 아는 것입니다. CSS는 여러 규칙이 동시에 한 요소를 꾸밀 수 있습니다. 브라우저는 그중 어떤 규칙을 적용할지 정해진 기준으로 고릅니다.

이 기준을 알면 CSS가 적용되지 않을 때 덜 당황합니다. 화면을 보며 "파일이 연결되어 있는지", "선택자가 맞는지", "어디에서 덮어썼는지"를 차례대로 확인할 수 있습니다.

AI 생성 이미지

같은 요소를 여러 CSS가 꾸밀 수 있다

다음과 같은 버튼이 있다고 해 보겠습니다.

<a class="btn primary-btn" href="#">구매하기</a>

그리고 CSS가 이렇게 작성되어 있습니다.

.btn {
  background-color: gray;
}

.primary-btn {
  background-color: blue;
}

이 버튼에는 btn도 있고 primary-btn도 있습니다. 두 CSS가 모두 같은 버튼을 고릅니다. 둘 다 background-color를 지정합니다.

이럴 때 브라우저는 둘 중 하나를 선택해야 합니다. 위 예시에서는 두 선택자가 모두 class 선택자라 힘이 같습니다. 그래서 나중에 작성된 CSS인 .primary-btn이 이깁니다. 버튼 배경은 파란색이 됩니다.

CSS 문제의 많은 부분은 여기서 시작합니다.

내가 쓴 CSS가 틀린 것이 아니라, 다른 CSS가 나중에 이겼을 수 있습니다.

더 구체적인 선택자가 이긴다

CSS에는 구체성이라는 기준이 있습니다. 구체성은 선택자가 얼마나 강하게 요소를 가리키는지를 뜻합니다. 일상적인 비유로 말하면 주소와 비슷합니다.

• button : "모든 버튼"

• .product-card button : "상품 카드 안의 버튼"

• #checkout-button : "결제 버튼이라는 특정한 하나"

주소가 자세할수록 특정 대상을 더 정확히 가리킵니다. CSS에서도 더 구체적인 선택자가 보통 더 강하게 적용됩니다. MDN은 이를 선택자의 가중치로 설명하며, ID, class, 태그 선택자 순서로 비교한다고 정리합니다.¹

간단히 기억하면 다음과 같습니다.

button {
  background-color: gray;
}

.product-card button {
  background-color: green;
}

상품 카드 안의 버튼은 초록색이 됩니다. button은 모든 버튼을 고르지만, .product-card button은 그중에서도 상품 카드 안의 버튼만 고르기 때문입니다.

또 다른 예를 보겠습니다.

.notice {
  color: blue;
}

#main-notice {
  color: red;
}

<p id="main-notice" class="notice">배송 지연 안내</p>

이 문장은 빨간색이 됩니다. class 선택자인 .notice보다 id 선택자인 #main-notice가 더 강하기 때문입니다.

하지만 id를 자주 쓰면 나중에 수정이 어려워질 수 있습니다. 너무 강한 선택자가 많아지면, 간단한 class 수정이 잘 먹히지 않습니다. 비개발자가 템플릿을 수정할 때는 가능하면 class 선택자를 중심으로 다루는 편이 안전합니다.

힘이 같으면 나중에 쓴 CSS가 이긴다

선택자의 힘이 같으면 브라우저는 나중에 나온 CSS를 적용합니다. 이것을 순서의 원리라고 생각하면 됩니다.

.card-title {
  color: black;
}

.card-title {
  color: orange;
}

둘 다 같은 .card-title을 고릅니다. 구체성도 같습니다. 그래서 뒤에 있는 color: orange;가 적용됩니다.

이 원리는 실제 작업에서 자주 보입니다.

/* 템플릿 기본 CSS */
.button {
  background-color: black;
}

/* 내가 나중에 추가한 CSS */
.button {
  background-color: #2563eb;
}

내가 추가한 CSS가 기본 CSS보다 뒤에 불러와진다면 버튼은 파란색이 됩니다. 반대로 내가 쓴 CSS 파일이 먼저 불러와지고, 템플릿 기본 CSS가 나중에 불러와진다면 템플릿의 검은색이 다시 이길 수 있습니다.

그래서 CSS를 수정할 때는 코드 내용뿐 아니라 어떤 CSS 파일이 나중에 적용되는지도 봐야 합니다. 브라우저는 여러 규칙이 충돌할 때 관련 있는 규칙을 먼저 추리고, 중요도·구체성·작성 순서 등을 기준으로 최종 값을 결정합니다.²

개발자 도구에서 취소선을 읽는 법

CSS가 왜 적용되지 않는지 가장 빠르게 확인하는 도구는 브라우저의 개발자 도구입니다. 개발자 도구는 웹페이지의 HTML과 CSS를 눈으로 확인하는 확대경이라고 생각하면 됩니다.

확인 순서는 다음과 같습니다.

1. 바꾸고 싶은 요소 위에서 마우스 오른쪽 클릭

2. 검사 또는 Inspect 선택

3. 오른쪽 또는 아래쪽에 나오는 Styles 영역 확인

4. 내가 쓴 CSS가 보이는지 확인

5. 속성에 취소선이 그어져 있는지 확인

예를 들어 Styles 영역에 이렇게 보일 수 있습니다.

.button {
  background-color: gray; /* 취소선 */
}

.product-card .button {
  background-color: blue;
}

취소선이 그어진 CSS는 "이 규칙이 있긴 하지만 최종 선택에서 졌다"는 뜻입니다. 위 경우에는 .button보다 .product-card .button이 더 구체적이라 파란색이 적용된 것입니다.

개발자 도구를 볼 때는 다음 세 가지를 확인하세요.

• 내가 작성한 CSS가 목록에 보이는가?

• 보이는데 취소선이 그어져 있는가?

• 취소선이 있다면 어떤 규칙이 이기고 있는가?

CSS가 목록에 아예 보이지 않는다면 우선순위 문제가 아닐 수 있습니다. 파일 연결 실패, 오타, 캐시 문제일 가능성을 봐야 합니다.

CSS가 적용되지 않을 때 점검 순서

문제가 생겼을 때는 아래 순서대로 확인해 보세요. 처음부터 !important를 붙이지 않는 것이 좋습니다.

1. CSS 파일이 연결되어 있는가

외부 CSS 파일을 쓰고 있다면 HTML에 연결 코드가 있어야 합니다.

<link rel="stylesheet" href="style.css">

파일 이름이 styles.css인데 HTML에는 style.css라고 쓰면 CSS가 불러와지지 않습니다. 폴더 안에 있다면 경로도 맞아야 합니다.

<link rel="stylesheet" href="css/style.css">

개발자 도구의 Network 탭에서 CSS 파일이 빨간색으로 표시되거나 404가 보인다면 파일을 찾지 못한 것입니다. 404는 "해당 파일이 그 위치에 없다"는 뜻입니다.

2. 선택자가 실제 HTML과 맞는가

CSS 선택자는 이름이 정확히 맞아야 합니다.

<div class="product-card">상품 카드</div>

.product-card {
  border: 1px solid #ddd;
}

이건 맞습니다. 하지만 아래처럼 쓰면 적용되지 않습니다.

.productcard {
  border: 1px solid #ddd;
}

하이픈 하나가 빠졌기 때문입니다. CSS는 사람처럼 "아마 이걸 말하는 거겠지" 하고 추측하지 않습니다.

class에는 점 .을 붙이고, id에는 #을 붙이는지도 확인하세요.

/* class */
.product-card { }

/* id */
#main-banner { }

3. 속성 이름과 값에 오타가 없는가

CSS 속성 이름도 정확해야 합니다.

.card {
  background-color: #f8fafc;
  border-radius: 16px;
}

아래처럼 쓰면 일부 속성은 무시됩니다.

.card {
  background-colour: #f8fafc;
  border-radious: 16px;
}

브라우저는 모르는 속성을 만나면 보통 조용히 건너뜁니다. 그래서 화면에 아무 변화가 없어 보일 수 있습니다.

4. 다른 CSS가 덮어쓰고 있는가

내 CSS가 개발자 도구에 보이는데 취소선이 있다면 다른 CSS가 이긴 것입니다.

이때는 선택자를 조금 더 구체적으로 만들 수 있습니다.

/* 너무 넓은 선택자 */
.button {
  background-color: #2563eb;
}

/* 특정 영역 안의 버튼만 선택 */
.product-card .button {
  background-color: #2563eb;
}

무작정 길게 만드는 것이 목표는 아닙니다. "어느 영역의 무엇을 바꾸는지"가 드러나도록 한 단계만 좁히는 것이 좋습니다.

또 하나 확인할 것이 있습니다. HTML 태그에 직접 style 속성이 붙어 있으면 일반적인 외부 CSS보다 우선 적용될 수 있습니다.

<a class="button" style="background-color: red;" href="#">구매하기</a>

이런 경우에는 가능하면 직접 붙은 style을 제거하거나, 그 스타일을 CSS class로 옮기는 편이 관리하기 쉽습니다.

5. 캐시 때문에 예전 CSS를 보고 있는가

캐시는 브라우저가 이전에 받은 파일을 잠시 저장해 두는 기능입니다. 매번 같은 파일을 새로 받지 않아도 되니 웹사이트가 빨라집니다. 하지만 수정 중에는 예전 CSS가 계속 보이는 것처럼 느껴질 수 있습니다.

이럴 때는 새로고침을 조금 강하게 해 봅니다.

• Windows: Ctrl + Shift + R

• Mac: Command + Shift + R

웹빌더나 쇼핑몰 관리자 화면에서는 저장 버튼을 눌렀는지, 게시 또는 발행까지 했는지도 확인해야 합니다.

6. 미디어 쿼리 조건이 맞는가

반응형 CSS를 배웠다면 이런 코드도 익숙할 것입니다.

@media (max-width: 768px) {
  .banner {
    padding: 24px;
  }
}

이 CSS는 화면 너비가 768px 이하일 때만 적용됩니다. PC 화면에서 보고 있다면 적용되지 않는 것이 정상입니다.

"왜 안 먹지?"라고 느낄 때는 현재 화면 크기가 조건에 맞는지도 확인하세요.

!important는 마지막 응급 도구다

CSS를 검색하다 보면 이런 해결책을 자주 봅니다.

.button {
  background-color: red !important;
}

!important는 "이 선언을 매우 중요하게 취급해 달라"는 표시입니다. 실제로 많은 경우 다른 CSS를 이기게 만들 수 있습니다. 하지만 자주 쓰면 나중에 더 큰 문제가 됩니다.

예를 들어 버튼 색을 빨간색으로 강하게 고정했습니다.

.button {
  background-color: red !important;
}

나중에 이벤트 페이지에서만 파란 버튼을 쓰고 싶어졌습니다.

.event-page .button {
  background-color: blue;
}

그런데 파란색이 적용되지 않을 수 있습니다. 앞에서 빨간색에 !important를 붙였기 때문입니다. 그러면 또 다른 !important를 붙이고 싶어집니다.

.event-page .button {
  background-color: blue !important;
}

이런 방식이 반복되면 CSS는 힘겨루기장이 됩니다. 어디서 무엇이 이기는지 점점 찾기 어려워집니다. 게다가 !important끼리도 다시 구체성과 작성 순서를 따지게 되므로, 문제가 완전히 사라지는 것이 아니라 더 복잡해질 수 있습니다.

더 안전한 대안은 다음과 같습니다.

• 선택자가 실제 요소와 맞는지 먼저 확인하기

• 내가 쓴 CSS가 기본 CSS보다 뒤에 오도록 배치하기

• 필요한 만큼만 선택자를 구체적으로 만들기

• 공통 버튼과 특별한 버튼의 class를 분리하기

예를 들어 이렇게 나누면 더 관리하기 쉽습니다.

<a class="button button-primary" href="#">구매하기</a>
<a class="button button-secondary" href="#">자세히 보기</a>

.button {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
}

.button-primary {
  background-color: #2563eb;
  color: white;
}

.button-secondary {
  background-color: #e5e7eb;
  color: #111827;
}

공통 모양은 .button에 두고, 색상 차이는 별도 class에 둡니다. 이렇게 하면 억지로 !important를 쓰지 않아도 버튼 종류를 바꾸기 쉽습니다.

실수하기 쉬운 지점 체크리스트

CSS가 예상대로 적용되지 않을 때 아래 항목을 순서대로 확인하세요.

• CSS 파일 이름과 경로가 맞는가?

• HTML에서 CSS 파일을 제대로 연결했는가?

• class 이름 앞에 .을 붙였는가?

• id 이름 앞에 #을 붙였는가?

• HTML의 class 이름과 CSS 선택자 이름이 정확히 같은가?

• 속성 이름에 오타가 없는가?

• 세미콜론 ;, 콜론 :, 중괄호 { }가 빠지지 않았는가?

• 개발자 도구에서 내 CSS가 보이는가?

• 보인다면 취소선이 그어져 있는가?

• 더 구체적인 선택자나 나중에 불러온 CSS가 덮어쓰고 있는가?

• HTML 태그에 직접 style 속성이 붙어 있지는 않은가?

• 미디어 쿼리 조건에 맞는 화면 크기인가?

• 브라우저 캐시 때문에 예전 화면을 보고 있지는 않은가?

• !important를 쓰기 전에 다른 해결 방법을 확인했는가?

작은 실습: 안 먹는 버튼 색 고치기

다음 코드를 보겠습니다.

<div class="product-card">
  <a class="button" href="#">장바구니 담기</a>
</div>

수정 전 CSS입니다.

.product-card .button {
  background-color: black;
  color: white;
}

.button {
  background-color: #2563eb;
}

원하는 결과는 파란 버튼입니다. 하지만 실제 화면에서는 검은 버튼이 보일 수 있습니다. 이유는 .product-card .button이 .button보다 더 구체적이기 때문입니다.

수정 방법은 상황에 따라 다릅니다. 상품 카드 안의 버튼을 파란색으로 바꾸고 싶다면, 실제로 이기고 있는 선택자를 찾아 그 값을 바꾸는 것이 가장 깔끔합니다.

.product-card .button {
  background-color: #2563eb;
  color: white;
}

만약 기존 코드를 직접 고칠 수 없고 아래쪽에 새 코드를 추가해야 한다면, 같은 수준으로 구체적인 선택자를 사용하고 기존 규칙보다 뒤에 두어야 합니다.

/* 기존 CSS보다 뒤에 추가 */
.product-card .button {
  background-color: #2563eb;
  color: white;
}

수정 전후 비교

이번 장의 핵심은 하나입니다. CSS가 안 먹을 때는 감으로 고치지 말고 순서대로 확인하세요. 연결 확인 → 선택자 확인 → 오타 확인 → 우선순위 확인 → 캐시와 조건 확인. 이 흐름만 익혀도 대부분의 CSS 문제를 스스로 좁혀 갈 수 있습니다.

참고

¹Specificity - CSS | MDN

²Introduction to the CSS cascade - CSS | MDN