minstudio

반응형 웹 완벽 가이드

📱 모바일과 데스크톱을 다르게! 반응형 웹

스마트폰, 태블릿, PC 등 다양한 화면 크기에 맞춰 디자인이 변하는 웹을 반응형 웹이라고 합니다. 이를 가능하게 해주는 것이 미디어 쿼리입니다.

@media (조건) { CSS 코드 } 형태로 작성하며, 보통 max-width(모바일용)나 min-width(데스크톱용)를 조건으로 사용합니다.

📱 모바일 퍼스트 (Mobile First) 접근법

📱
모바일 (기본)
0px ~ 767px
/* 기본 CSS 작성 */
.container {
  width: 100%;
}
💻
태블릿
768px ~ 1023px
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
🖥️
PC 데스크톱
1024px 이상
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}
화면 너비 증가 (min-width) 👉

🖥️ 데스크톱 퍼스트 (Desktop First) 접근법

🖥️
PC (기본)
1024px 이상
/* 기본 CSS 작성 */
.container {
  width: 960px;
}
💻
태블릿
768px ~ 1023px
@media (max-width: 1023px) {
  .container {
    width: 750px;
  }
}
📱
모바일
0px ~ 767px
@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}
👈 화면 너비 감소 (max-width)

🖼️ 화면에 따라 유연하게 늘어나는 미디어와 텍스트

요즘은 모니터뿐만 아니라 모바일 환경도 고려해야 하므로, 크기가 고정되어 있으면 화면을 뚫고 나가거나 너무 작아 보이지 않게 됩니다.

  • 반응형 이미지: max-width: 100%를 주면 부모 박스 크기에 맞춰 비율을 유지하며 유연하게 크기가 조절됩니다.
  • 반응형 타이포그래피: CSS clamp(최소, 권장, 최대) 함수를 사용하면, 미디어 쿼리 없이도 화면 넓이에 따라 부드럽게 글자 크기가 줄어들고 늘어납니다!

🔍 max-width vs aspect-ratio 비교

max-width: 100%
"부모 박스에 맞춰 원본 비율 존중"
[ 이미지 로딩 전 ]
높이 0 (영역 없음)
아래 텍스트
👇 로딩이 완료되면? 👇
[ 이미지 로딩 완료 ]
갑자기 크기 팽창! (레이아웃 덜컥거림 발생)
아래 텍스트 밀려남
aspect-ratio: 16 / 9
"내용물 상관없이 강제 비율 틀 생성"
[ 이미지 로딩 전 ]
빈 껍데기(틀) 미리 생성 (16:9 영역 사전 확보)
아래 텍스트
👇 로딩이 완료되면? 👇
[ 이미지 로딩 완료 ]
빈 틀 안에 쏙! (레이아웃 안정적 유지)
아래 텍스트 (위치 그대로)
💡
max-width: 100%는 이미 존재하는 "실제 이미지의 비율"을 깨지 않고 화면에 맞출 때 사용하고,
aspect-ratio는 내용물(이미지, 유튜브)이 오기 전이라도 미리 "정확한 비율의 빈 껍데기(틀)"를 만들어, 로딩되면서 레이아웃이 덜컥거리는 현상을 방지할 때 강력합니다. 
<div class="responsive-box">
  화면 크기를 줄여보세요!<br>
  (미리보기 창의 크기에 따라 색상이 변합니다)
</div>
<hr style="margin:20px 0; border:none; border-top:2px dashed #ccc;">
<style>
.media-container {
  width: 90%;
  margin: 0 auto;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  background: white;
}

.responsive-img {
  /* 이미지 반응형 핵심 */
  max-width: 100%;
  height: auto;
  display: block;
}

.responsive-text {
  padding: 1.5rem;
  text-align: center;
}

.clamp-title {
  /* 텍스트 반응형 핵심: 최소 1.5rem, 화면너비의 5% 선호, 최대 3rem */
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  color: #1e293b;
  margin: 0 0 10px 0;
  line-height: 1.2;
}
</style>

<div class="media-container">
  <img src="https://images.unsplash.com/photo-1707343843437-caacff5cfa74?q=80&w=800" class="responsive-img" alt="풍경 이미지">
  <div class="responsive-text">
    <h2 class="clamp-title">화면을 줄여보세요!</h2>
    <span style="font-size: 1rem; color: #64748b;">
      이미지 비율이 유지되며 작아지고,<br>
      위의 두꺼운 제목 글씨도 화면 너비에 맞춰 부드럽게 작아집니다!
    </span>
  </div>
</div>
실행 결과
반응형 웹 완벽 가이드 | Minstudio