CSS 우선순위와 미디어쿼리 적용 원칙

CSS 우선순위(Specificity) 기본 원칙

CSS는 캐스케이딩(Cascading) 원칙을 따른다.

cascade는 "a process whereby something, typically information or knowledge, is successively passed on"

"무언가(일반적으로 정보나 지식)가 연속적으로 전달되는 과정이"라는 의미를 가지고 있다.

그런 단어의 의미처럼 캐스케이딩은 "상속과 우선순위를 포함하는 CSS의 스타일 적용 체계"라고 할 수 있다.

 

실제 CSS의 우선순위는 다음과 같다.

1. !important
2. 인라인 스타일
3. ID 선택자 (#)
4. 클래스(.)/속성([])/가상(:) 선택자
5. 요소(태그) 선택자
6. 전체 선택자(*)

미디어쿼리 적용 규칙

그런데 우리가 CSS를 적용하다보면 반응형 디자인을 위해서 미디어 쿼리를 적용하는 경우가 있다. 그럴 경우는 어떻게 적용해야 할까? 특정한 조건 하에서 적용되는 CSS여서 우선순위가 높을 것 같지만 실상은 기본 스타일과 우선순위가 동등하다.

왜냐면 CSS에서 우선순위를 결정하는 것은 1. 중요도 (Importance), 2. 특이도 (Specificity), 3. 선언 순서 (Source Order) 순으로 결정되는데 별도로 선택자를 바꾸지 않을 경우 서로 특이도가 동일해서 선언 순서로 적용 순서를 결정하기 때문이다.

때문에 미디어 쿼리를 적용하려면 기본 스타일보다 아래쪽에 스타일을 선언해야한다.

/* 기본 스타일 */
.container {
  width: 1200px;
}

/* 미디어쿼리는 기본 스타일 뒤에 위치 */
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

 

뷰포트(Viewport) 메타 태그 작성

또한 반응형 디자인을 위해서는 뷰포트 메타 태그를 head 태그 안쪽에 작성해야한다.

이 메타 태그는 모바일 기기에서 웹페이지가 어떻게 표시될지 설정하는 중요한 태그다.

///구성 요소 설명
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width: 페이지의 너비를 기기의 스크린 너비와 일치시킴
initial-scale=1.0: 처음 페이지 로딩시 줌 레벨 설정

이 태그가 없다면?

• 모바일에서 데스크톱 버전으로 표시됨
• 미디어쿼리가 제대로 작동하지 않을 수 있음
• 자동으로 축소되어 가독성이 떨어짐

<!-- ❌ 메타 태그 없을 때 -->
<!-- 모바일에서 데스크톱 버전으로 표시되고 작게 축소됨 -->

<!-- ✅ 메타 태그 있을 때 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 모바일 화면에 최적화되어 표시됨 -->

 

일반적인 적용 실패 사례와 해결방법

우선순위 충돌

/* ❌ 잘못된 예시 */
.wrapper .container {
  width: 1200px !important; /* 높은 우선순위 */
}

@media (max-width: 768px) {
  .container {  /* 낮은 우선순위 */
    width: 100%; /* 적용되지 않음 */
  }
}

/* ✅ 올바른 해결방법 */
.wrapper .container {
  width: 1200px;
}

@media (max-width: 768px) {
  .wrapper .container {  /* 동일한 우선순위 유지 */
    width: 100%;
  }
}

선언 순서 문제

/* ❌ 잘못된 예시 */
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

.container {  /* 나중에 선언되어 이 스타일이 적용됨 */
  width: 1200px;
}

/* ✅ 올바른 해결방법 */
.container {
  width: 1200px;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

중첩된 미디어쿼리

/* ❌ 잘못된 예시 */
@media (max-width: 1024px) {
  @media (max-width: 768px) {
    .container {
      width: 100%;
    }
  }
}

/* ✅ 올바른 해결방법 */
@media (max-width: 1024px) and (min-width: 769px) {
  .container {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

모범 사례 체크리스트

HTML에 viewport 메타 태그 포함

<meta name="viewport" content="width=device-width, initial-scale=1.0">

기본 스타일을 먼저 작성

미디어쿼리는 기본 스타일 뒤에 배치

동일한 수준의 선택자 사용

!important 사용 자제

일관된 중단점(breakpoint) 사용

디버깅 팁

1. 브라우저 개발자 도구에서 스타일 적용 확인
2. CSS 특이도 계산기 활용
3. 모바일 퍼스트 접근 고려
4. 명확하고 일관된 선택자 구조 유지