1주차

HTML/CSS로 구현하는 반응형 웹의 기본 구조

karnelll 2025. 4. 11. 11:15

안녕하세요 36기 YB 웹파트 최서희입니다.😀
이번 HTML/CSS 과제로 개인 블로그 만들기를 진행하면서,
모바일 환경에서도 잘 보이는 반응형 웹 구조를 직접 구현해보았습니다.
과제 요구사항 중 하나였던 반응형 레이아웃을 공부하며,
기초 개념부터 실습 예제까지 정리한 내용을 블로그에 공유해 봅니다.

🔍 반응형 웹 디자인이란?

기기 화면 크기에 따라 콘텐츠 배치와 스타일이 자동으로 조정되는 웹 구조를 말합니다.
데스크탑, 태블릿, 모바일 등 다양한 기기에서 하나의 HTML/CSS 코드만으로 대응할 수 있어
관리 효율성이 높고, 사용자에게도 일관된 경험을 제공할 수 있습니다.

🧩 반응형 웹의 핵심 구성 요소 3가지

1️⃣ 유동적인 레이아웃 (Fluid Layout)

고정 크기 대신 비율(%) 단위를 사용해 요소가 화면 크기에 맞춰 자동 조정되도록 설정합니다.

.container {
  width: 80%;
}

이렇게 하면 화면 크기에 따라 항상 전체 너비의 80%를 유지할 수 있습니다.

2️⃣ 미디어 쿼리 (Media Query)

CSS에서 화면 조건에 따라 스타일을 다르게 적용할 수 있도록 도와주는 기능입니다.

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

예를 들어 위 코드는 화면 너비가 768px 이하일 경우 폰트 크기를 줄여줍니다.

3️⃣ 유연한 이미지 (Responsive Image)

이미지가 부모 요소보다 커지지 않도록 조절하고,
화면 크기에 따라 자연스럽게 크기를 바꾸도록 설정합니다.

img {
  max-width: 100%;
  height: auto;
}

 

✍️ 실습 예시: 2단 → 모바일 1단 전환

블로그 구성 중, PC에서는 2단, 모바일에서는 1단으로 전환되는 구조를 구현한 코드입니다.

<div class="container">
  <div class="column">내용 A</div>
  <div class="column">내용 B</div>
</div>

.container {
  width: 80%;
  margin: 0 auto;
}

.column {
  width: 48%;
  float: left;
  margin-right: 4%;
}

.column:last-child {
  margin-right: 0;
}

@media (max-width: 768px) {
  .column {
    width: 100%;
    float: none;
    margin-bottom: 10px;
  }
}

이렇게 하면 화면이 작아졌을 때 자동으로 세로 1열로 정렬됩니다.

✅ 반응형 웹을 위한 기본 설정

✔️ 뷰포트 설정 (필수)

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

모바일 화면 비율을 제대로 인식하고 확대를 방지하려면 꼭 필요한 설정입니다.

✔️ CSS 작성 팁

  • 텍스트: 모바일 기준 14~16px 적당
  • 버튼: width: 100%로 터치하기 편하게
  • 여백: padding 값을 화면에 따라 조절

⚠️ 자주 발생하는 오류와 해결법

문제원인해결방법
화면 확대됨뷰포트 설정 없음<meta viewport> 추가
레이아웃 깨짐고정 px 사용%, vw, Flexbox로 변경
이미지 깨짐고정 크기 사용max-width: 100% 설정
스타일 충돌미디어 쿼리 중복breakpoint 정리 필요

📊 Flexbox vs CSS Grid

항목FlexboxCSS Grid
방향1차원(행/열)2차원(행+열)
적합한 용도콘텐츠 정렬, 카드 배치페이지 전체 레이아웃 구성
특징간단, 직관적정밀하고 강력한 배치

과제에서는 Flexbox를 사용해 블로그 카드를 정렬하는 데 활용했습니다.

💡 개인적으로 느낀 팁

  • 미디어 쿼리는 max-width: 768px, 1024px 기준으로 시작하면 무난
  • 모바일은 터치 환경이므로 요소 간 여백과 크기를 넉넉하게
  • 이미지 용량은 WebP로 줄이고, loading="lazy"로 성능 개선
  • 작은 화면에서 굳이 필요 없는 요소는 display: none으로 숨기기

🧾 핵심 정리 요약

항목 핵심 코드 설명

뷰포트 설정<meta viewport>모바일 확대 방지
유동 레이아웃width: %, vw반응형 크기 조정
미디어 쿼리@media (max-width: 768px)조건부 스타일
반응형 이미지max-width: 100%부모 너비 제한
레이아웃 구성Flex / Grid콘텐츠 정렬 및 배치

 

🎥 추천 강의

🔗 유튜브 - 반응형 웹 퍼블리싱 강의 (by 코딩웍스)

  • HTML/CSS 기초부터 반응형 구현까지 단계별 구성
  • Flexbox, 미디어 쿼리 실습 위주 설명
  • 과제 실습과 병행해서 보기 좋아요