min-width vs max-width 차이점 정리 | 퍼블리셔는 언제 무엇을 써야 할까?

min-width와 max-width 미디어쿼리 차이점 정리. Mobile First vs PC First 전략 비교와 퍼블리셔 실무 적용 기준 설명.  정리. Mobile First vs PC First 전략 비교와 퍼블리셔 실무 적용 기준 설명.

 

 

 

min-width와 max-width 미디어쿼리 차이점

 

 

min-width와 max-width, 아직도 헷갈리나요?

 

반응형 작업을 하다 보면
반드시 마주치는 선택지가 있습니다.

 

CSS

@media (min-width: 768px)

 

또는

 

CSS

@media (max-width: 768px)

 

둘 다 맞는 방법입니다.
하지만 설계 기준은 완전히 다릅니다.

 

---

기본 개념 차이

min-width → Mobile First 방식

작은 화면을 기본으로 두고
점점 확장합니다.

CSS

/* 기본: 모바일 */
@media (min-width: 768px) {
  /* 태블릿 */
}

@media (min-width: 1024px) {
  /* PC */
}

 

1. 점진적 확장
2. 유지보수 구조 단순
3. 최신 트렌드 방식

 

max-width → PC First 방식

큰 화면을 기본으로 두고
점점 줄입니다.

CSS

/* 기본: PC */
@media (max-width: 1024px) {
  /* 태블릿 */
}

@media (max-width: 768px) {
  /* 모바일 */
}

 

1. 기존 레거시 프로젝트에 많음
2. 공공기관 SI에 흔함
3. PC 디자인 기준 작업에 적합

---

퍼블리셔 실무에서 언제 무엇을 써야 할까?

✔ 디자인이 모바일 기준이라면?

→ min-width

✔ 디자인이 1920 PC 기준이라면?

→ max-width

✔ 신규 프로젝트라면?

→ 가능하면 min-width

✔ 레거시 유지보수라면?

→ 기존 구조 따라가는 게 안전

---

유지보수 관점에서의 차이

min-width는
스타일이 누적되며 확장됩니다.

 

max-width는
스타일을 덮어쓰며 줄어듭니다.

 

프로젝트 규모가 커질수록
min-width 구조가 더 안정적입니다.

---

중요한 건 “일관성”

min과 max를
섞어 쓰는 순간

 

CSS는 복잡해집니다.

 

가장 위험한 구조:

CSS

@media (max-width: 1024px)
@media (min-width: 768px)

 

혼합 사용은
우선순위 충돌을 만듭니다.

---

 

정리

• 신규 프로젝트 → min-width 권장
• PC 기준 디자인 → max-width 고려
• 레거시 프로젝트 → 기존 구조 유지
• 혼합 사용은 피할 것