반응형 CSS의 시작 – 미디어 쿼리부터 프리픽스까지

안녕하세요! AT SOPT YB 36기 엄지우입니다.

 

이번 주 블로그 만들기 과제를 하면서 반응형 웹페이지를 만들 때 어떤 것들을 활용할 수 있을지 고민해 보다가 관련 글을 작성하게 되었습니다.

 

 

목차

1. 미디어 쿼리
2. 타이포그래피
3. 벤더 프리픽스

 

요즘 웹페이지는 PC, 태블릿, 모바일 등 다양한 화면에서 잘 보여야 합니다.

이걸 가능하게 해주는 핵심 도구들이 바로 미디어 쿼리, 반응형 타이포그래피, 그리고 벤더 프리픽스입니다.

이번 글에서는 이 세 가지를 정리하면서, 반응형 CSS의 기본기를 제대로 다져보겠습니다. 🤙🏻

 

 

1. 미디어 쿼리

뷰포트에 따라 스타일 바꾸기

미디어 쿼리(media query)는 화면의 너비, 높이, 해상도 등을 기준으로 스타일을 다르게 적용할 수 있게 해주는 CSS 기능입니다.

 

✅ 기본 문법

/* 768px 이하일 때 적용되는 스타일 */
@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

/* 1024px 이상일 때 적용되는 스타일 */
@media (min-width: 1024px) {
  body {
    background-color: white;
  }
}

 

✅ 실전 예시: 블로그 과제에서 사용한 코드

@media screen and (max-width: 550px) {
  aside {
    position: fixed;
    width: 12rem;
    left: 1rem;
    top: 10rem;
  }

  section {
    width: calc(100vw - 14rem);
    margin-left: calc(12rem + 2rem);
  }

  .top-section {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-list {
    justify-content: flex-start;
  }
}

• 550px 이하 화면에서 레이아웃을 조정한 코드입니다.
• 사이드 내비게이션 위치를 고정시키고, 섹션 너비 및 카드 그리드를 조절했습니다.

 

 

✅ 자주 쓰는 뷰포트 기준

디바이스	max-width 예시
모바일	480px
태블릿	768px
작은 노트북	1024px
데스크탑	1280px 이상

 

📌 팁

• 모바일 우선(mobile-first) 접근법을 추천합니다. 기본 스타일은 모바일 기준으로 작성하고, min-width로 더 큰 화면을 점점 덮는 방식이 좋습니다.

 

💡 왜 모바일 우선인가?

 

1) 모바일 사용자 비중 ↑

• 통계적으로 대부분의 웹 트래픽은 모바일에서 발생합니다. 📱
• 모바일 기준으로 먼저 만들면 주 타깃 사용자에게 최적화된 UX를 제공할 수 있습니다.

2) CSS 코드가 더 간결해짐

• 모바일 기본 스타일을 먼저 작성하고, 더 큰 화면만 덮어씌우면 됩니다.

/* 기본: 모바일 기준 스타일 */
body {
  font-size: 14px;
}

/* 데스크탑에서만 다르게! */
@media (min-width: 1024px) {
  body {
    font-size: 16px;
  }
}

→  이 방식은 모바일은 그대로, 큰 화면만 점진적으로 확장해 주는 구조라 훨씬 깔끔하고 예측하기 쉽습니다.

 

3) 점진적 향상(Progressive Enhancement)

• 모바일은 성능이 낮은 기기가 많습니다.
• 모바일 기준으로 먼저 구현하고, 고성능 환경(태블릿, PC)일 때만 스타일을 강화하면, 사용자 경험이 전반적으로 안정적입니다.

4) 로딩 속도에 유리

• 작은 CSS만 먼저 로딩되고, 미디어 쿼리에 따라 큰 화면용 스타일이 추가로 적용되기 때문에 초기 로딩 속도가 빨라질 수 있습니다.
• 모바일에서 불필요한 데스크톱 스타일을 덮어쓰는 코드 낭비가 줄어듭니다.

 

🆚 반대로 Desktop-First일 경우?

/* 기본: 데스크탑 기준 스타일 */
body {
  font-size: 16px;
}

/* 모바일에서 덮어써야 함 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

• 이렇게 되면 모바일에서 먼저 로딩된 스타일을 다시 덮어써야 합니다.
• 중복 스타일도 많아지고, 코드가 복잡해지고, 유지보수가 어려워질 수 있습니다.

 

2. 타이포그래피

clamp()와 vw 단위 활용

미디어 쿼리 없이도, 글자 크기를 화면 크기에 따라 자동으로 조절할 수 있을까요?

CSS의 clamp() 함수와 vw 단위를 활용하면 가능합니다!

 

✅ clamp() 기본 사용법

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

• 최솟값, 선호값, 최댓값을 순서대로 넣습니다.
• 위 코드는 화면이 작아도 1.5rem보다 작아지지 않고, 커도 3rem 이상으로 커지지 않습니다.

✅ vw 단위란?

• 1vw는 뷰포트 너비의 1%입니다.
• ex) 화면 너비가 1000px이면 1vw는 10px

📌 팁

• clamp()는 미디어 쿼리 없이 자연스러운 폰트 크기 조절이 가능해서 요즘 많이 쓰입니다.
• 버튼 패딩, 카드 너비에도 응용할 수 있습니다!

 

3. 벤더 프리픽스

브라우저별 벤더 프리픽스 정리

CSS 속성 중 일부는 브라우저마다 구현 방식이 다르거나 실험적인 기능이 있어서, -webkit-, -moz-, -ms- 같은 접두사(벤더 프리픽스)가 필요할 수 있습니다.

 

✅ 예시: linear-gradient

background: -webkit-linear-gradient(to right, red, blue);
background: -moz-linear-gradient(to right, red, blue);
background: linear-gradient(to right, red, blue);

 

✅ 자주 쓰는 프리픽스 대상

속성	벤더 프리픽스
transform, transition	-webkit-, -ms-
flex, grid 초기 버전	-webkit-
appearance, backdrop-filter	-webkit-, -moz-

 

📌 팁

• 요즘은 대부분의 최신 브라우저가 프리픽스 없이 지원합니다.
• Autoprefixer 같은 툴을 쓰면 빌드 과정에서 자동으로 붙여줍니다.
• MDN 또는 Can I Use 사이트에서 지원 여부 확인이 가능합니다.

 

---

 

🤙🏻 마무리 정리

항목	핵심 요약
미디어 쿼리	화면 너비 기준으로 스타일 구분 (모바일 우선 접근 추천)
반응형 타이포그래피	clamp(최소, 선호, 최대) + vw로 자연스럽게 크기 조절
벤더 프리픽스	오래된 브라우저 대응용 접두사, 요즘은 자동화 툴 사용 + MDN/Can I Use 확인 필수