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;">

<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>

🔒 localhost:8000/preview

반응형 웹 기초

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

스마트폰, 태블릿, 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 영역 사전 확보)

아래 텍스트

👇 로딩이 완료되면? 👇

[ 이미지 로딩 완료 ]

빈 틀 안에 쏙! (레이아웃 안정적 유지)

아래 텍스트 (위치 그대로)

💡

<div class="responsive-box">
  화면 크기를 줄여보세요!<br>
  (미리보기 창의 크기에 따라 색상이 변합니다)
</div>

<hr style="margin:20px 0; border:none; border-top:2px dashed #ccc;">

<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>

🔒 localhost:8000/preview