모바일 반응형 웹페이지 만들기

by

오늘날 대부분의 사용자는 스마트폰으로 웹을 사용합니다.

따라서 웹페이지를 만들 때는 모바일 반응형 디자인(Responsive Web Design)이 필수입니다.

이번 글에서는 HTML과 CSS만으로 모바일에 최적화된 반응형 웹페이지를 만드는 방법을 소개합니다.

반응형 웹이란?

화면 크기에 따라 콘텐츠가 자동으로 배치 및 크기 조절되는 웹 디자인 방식입니다.

| 특징 | 설명 |

|——|——|

| 하나의 HTML로 다양한 기기 지원

| 사용자 경험(UX) 개선

| Google 검색에서도 모바일 최적화 우대

📌 반응형은 PC, 태블릿, 스마트폰에서도 동일한 주소(URL)를 사용합니다.

반응형 웹의 핵심 요소

  • 뷰포트 설정 (meta 태그)
  • 미디어 쿼리 (media queries)
  • 유동적인 레이아웃 (percent, flex, grid)
  • 이미지 크기 자동 조절

1. 뷰포트 설정

HTML 에 반드시 포함해야 합니다:

“`html

“`

🧩 모바일에서 줌 비율, 기본 크기를 설정하는 필수 요소입니다.

2. 유동적인 레이아웃

❗ 고정(px) 대신 유동(% 또는 vw) 단위 사용

“`css

.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

}

“`

  • vw(viewport width) 단위도 추천
  • max-width로 너무 커지지 않도록 제어

3. 미디어 쿼리 적용

화면 크기에 따라 스타일을 다르게 지정:

“`css

@media (max-width: 768px) {

.nav-menu {

flex-direction: column;

}

.banner h1 {

font-size: 1.4rem;

}

}

“`

| 조건 | 설명 |

|——|——|

| max-width | 화면이 작아질 때 적용

| min-width | 화면이 커질 때 적용

4. 이미지 반응형 처리

“`css

img {

width: 100%;

height: auto;

}

“`

🖼️ ALT 태그 예시: 모바일 반응형 웹 디자인 예시

5. Flexbox & Grid 활용

“`css

.flex-container {

display: flex;

flex-wrap: wrap;

gap: 16px;

}

“`

“`css

.grid-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

“`

  • flex-wrap과 auto-fit은 반응형 레이아웃 구성에 매우 유용

실전 예제 요약

“`html

“`

“`css

@media (max-width: 600px) {

h1 {

font-size: 1.5rem;

}

}

“`

반응형 테스트 도구

| 도구 | URL |

|——|—–|

| Chrome 개발자 도구 | F12 → “Toggle Device Toolbar”

| Responsively App | 실시간 다중 뷰 확인

| Screenfly | 온라인 디바이스 테스트

마무리

모바일 반응형 웹은 선택이 아닌 필수입니다.

기기마다 다른 사용자 경험을 고려하지 않는다면

고객 이탈, 검색 순위 하락, 접근성 문제로 이어질 수 있습니다.

오늘 배운 설정만 잘 기억해도 모바일 친화적 웹페이지를 구현할 수 있습니다.

🔎 다음 포스팅 주제 추천

→ 12번: CSS Flexbox와 Grid 완벽 이해하기

→ 36번: CSS로 구현하는 버튼 효과 10가지

참고자료

  • https://developer.mozilla.org/ko/docs/Learn/CSS/CSSlayout/Mediaqueries
  • https://responsively.app/