• 고객센터
  • ★ 웹 무료강의

★ 웹 무료강의

고객센터공지사항자료실★ 웹 무료강의추천유튜브강의

모던DS 웹에이전시

웹 무료강의 | 프론트엔드 강의

CSS CSS의 우선순위 & !important 설명

페이지 정보

profile_image
작성자 모던DS
조회 1회 작성일 26-02-25 23:40

본문

CSS의 우선순위 & !important 설명


1. 후순위 우선의 원칙 (Order of Appearance)

동일한 선택자(ID, Class, 태그 등)를 사용하고 점수(가중치)가 같다면, 가장 나중에(아래에) 작성된 코드가 이전 코드를 덮어씁니다. 

CSS의 'C'인 Cascading(폭포수)처럼 위에서 아래로 흐르며 마지막에 도달한 스타일이 최종 결정되는 방식입니다.


2. 실습 예제

CSS
/* 첫 번째 작성된 코드 */
.text-box {
  color: blue;
  font-size: 20px;
}

/* 나중에 작성된 코드 (점수가 동일함) */
.text-box {
  color: red; /* 이 스타일이 최종 적용됨 */
}

  • 결과: .text-box 클래스를 가진 요소의 글자색은 빨간색이 됩니다. font-size는 충돌하는 코드가 없으므로 그대로 20px이 유지됩니다.


3. 외부 스타일시트 vs 내부 스타일시트

이 원칙은 파일 간의 관계에서도 동일하게 적용됩니다. 

<head> 태그 안에서 어떤 것을 더 아래에 썼느냐가 중요합니다.


HTML
<head>
    <link rel="stylesheet" href="style.css"> 
    
    <style>
        h1 { color: green; }
    </style>
</head>

  • 위의 경우, 외부 파일(style.css)과 내부 스타일(style)의 점수가 같다면 나중에 선언된 내부 스타일이 우선권을 갖습니다.


4. 주의할 점: 점수가 다르면 순서는 무의미!

작성 순서보다 **선택자의 점수(가중치)**가 훨씬 강력합니다.


CSS
#title { color: blue; } /* 100점 (위에 있어도 이김) */
h1 { color: red; }      /* 1점 (아래에 있어도 패배) */

  • 결과: 글자색은 파란색이 됩니다. 순서가 늦더라도 점수가 높은 ID 선택자가 이기기 때문입니다.


 CSS 우선순위의 절대 권력, !important 


1. !important란?

어떤 선택자 점수(ID, Class, 태그)나 작성 순서에 상관없이, 해당 스타일을 무조건 1순위로 적용하라고 브라우저에 명령하는 속성입니다.

  • 사용법: 속성 값 뒤에 한 칸 띄우고 작성합니다.

  • 예시: color: red !important;


2. 우선순위의 변화

원래의 우선순위 체계가 아래와 같이 바뀝니다.

  1. !important (비교 불가 최우선)

  2. 인라인 스타일 (1000점)

  3. 아이디 선택자 (100점)

  4. 클래스 선택자 (10점)

  5. 태그 선택자 (1점)


3. 왜 사용할까요?

  • 외부 라이브러리 수정: 수정 권한이 없는 외부 CSS 파일의 스타일을 강제로 덮어써야 할 때 사용합니다.

  • 긴급 수정: 복잡하게 얽힌 우선순위를 일일이 계산하기 힘들 때 임시방편으로 활용합니다.


4. 주의사항: "가급적 쓰지 마세요!"

실무에서는 !important 사용을 매우 지양합니다. 그 이유는 다음과 같습니다.

  • 유지보수의 지옥: 다른 개발자가 코드를 수정하려고 해도 !important 때문에 스타일이 안 바뀌어 혼란을 줍니다.

  • 더 큰 권력의 필요: !important를 덮어쓰려면 또 다른 !important를 써야 하는 악순환이 발생합니다.

  • 디버깅의 어려움: 어디서 스타일이 고정되었는지 찾기가 매우 힘들어집니다.

강의 팁: "정말 어쩔 수 없는 최후의 수단으로만 사용하라"고 강조해 주세요. 좋은 코드는 !important 없이 선택자의 점수 관리만으로 깔끔하게 작성된 코드입니다.


CSS 우선순위 종합 요약

  1. 속성 옆에 !important가 붙었는가? (가장 강함)

  2. 선택자의 점수가 높은가? (ID > Class > Tag)

  3. 점수가 같다면 나중에 작성되었는가? (후순위 우선)

  4. 부모로부터 물려받은 스타일인가? (상속 - 가장 약함)