핵심 CSS 규칙 총정리: @import부터 !important까지

CSS의 주요 규칙(Rules) 한눈에 보기

CSS(Cascading Style Sheets)에는 스타일시트 전체의 동작 방식을 제어하는 몇 가지 중요한 규칙이 있습니다. 각 규칙은 저마다 뚜렷한 용도가 있으며, 이를 제대로 이해하면 스타일시트를 더 체계적이고 효율적으로 관리할 수 있습니다. 아래에서 핵심 규칙들을 하나씩 살펴보겠습니다.

@import — 외부 스타일시트 가져오기

@import 규칙은 다른 스타일시트를 현재 스타일시트 안으로 불러올 때 사용합니다. 여러 개의 CSS 파일을 하나로 묶어 관리하고 싶을 때 유용합니다.

@import url("common.css");

@charset — 문자 인코딩 지정

@charset 규칙은 해당 스타일시트가 사용하는 문자 집합(character set)을 나타냅니다. 반드시 스타일시트의 맨 앞에 위치해야 하며, 일반적으로 UTF-8을 지정합니다.

@charset "UTF-8";

@font-face — 웹 폰트 정의하기

@font-face 규칙은 문서에서 사용할 글꼴(font face)을 상세하게 기술하는 데 사용됩니다. 서버에 저장된 폰트 파일을 지정하여 웹페이지 어디에서든 원하는 서체를 자유롭게 활용할 수 있습니다.

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

!important — 선언 우선순위 강제 지정

!important 규칙은 사용자가 정의한 규칙이 작성자(author)의 스타일시트보다 우선적으로 적용되어야 함을 나타냅니다. 즉, 일반적인 캐스케이딩(cascading) 순서를 무시하고 해당 선언의 우선순위를 강제로 끌어올리는 역할을 합니다.

p {
  color: red !important;
}

다만 !important를 남용하면 스타일 충돌 추적이 어려워지고 코드 유지보수가 힘들어질 수 있으므로, 꼭 필요한 경우에만 신중하게 사용하는 것이 좋습니다.