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

반응형 웹 과제 정리

작성자: 36기 YB 웹파트 최서희 😀

HTML/CSS 과제로 개인 블로그 만들기를 진행하며 모바일에서도 잘 보이는 반응형 웹 구조를 직접 구현했습니다. 요구사항이었던 반응형 레이아웃을 공부하며 기초 개념부터 실습 예제까지 정리해 공유합니다.

🔍 반응형 웹 디자인이란?

기기 화면 크기에 따라 콘텐츠 배치와 스타일이 자동으로 조정되는 웹 구조입니다. 하나의 코드로 데스크탑·태블릿·모바일에 대응할 수 있어 관리 효율성과 사용자 경험이 좋아집니다.

🧩 핵심 구성 요소 3가지

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

고정 px 대신 비율(%)·뷰포트 단위(vw) 등을 사용해 너비가 화면에 맞춰 변하도록 합니다.

.container {
  width: 80%;
}

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

화면 조건에 따라 스타일을 다르게 적용합니다.

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

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

이미지가 부모 영역을 넘지 않도록 제한합니다.

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

✍️ 실습 예시: 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

항목	Flexbox	CSS 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, 미디어 쿼리 실습 위주로 과제 병행 학습에 적합합니다.