안녕하세요! 😊 지난번에는 CSS의 핵심 레이아웃 시스템 (display, position, flexbox)을 배웠어요.
[HTML과 CSS 레이아웃 완전 정복] display, position, flexbox 활용법 총정리!
안녕하세요! 😊 지난번에는 HTML과 CSS를 연결하는 방법과 기본적인 스타일링을 배웠어요. [HTML과 CSS] HTML과 CSS 연결하기! 예쁜 웹페이지 만드는 법안녕하세요! 😊 지난번에는 HTML의 핵심 태그 (di
it-afternoon.tistory.com
그런데 웹사이트를 만들다 보면 이런 고민이 생길 거예요.
📌 "내가 만든 웹페이지, 모바일에서도 잘 보일까?"
📌 "화면 크기에 따라 디자인이 깨지는 걸 어떻게 해결하지?"
이런 문제를 해결하는 게 바로 반응형 웹 디자인(Responsive Web Design)이에요!
오늘은 반응형 웹을 만드는 핵심 기술 media query를 배워볼 거예요.
자, 그럼 시작해볼까요? 📱💡
1️⃣ 반응형 웹 디자인이란?
반응형 웹 디자인(Responsive Web Design)이란?
✅ PC, 태블릿, 스마트폰 등 다양한 화면 크기에 맞춰 자동으로 조정되는 웹 디자인을 말해요.
✅ media query를 사용하면 화면 크기에 따라 다른 스타일을 적용할 수 있어요.
🔹 예를 들어, 모바일에서는 글자 크기를 키우고, PC에서는 레이아웃을 넓게 설정할 수 있어요.
📌 반응형 웹의 장점
✔ 모바일 & 태블릿에서도 웹페이지가 깨지지 않음
✔ 사용자 경험(UX) 향상
✔ SEO(검색 엔진 최적화)에도 유리함 (구글이 모바일 친화적인 사이트를 우선순위로 둠)
2️⃣ media query란?
media query는 CSS에서 특정 화면 크기에 따라 스타일을 변경하는 기능이에요.
(📢 웹사이트를 모바일, 태블릿, 데스크톱에서 다르게 보이게 만들 수 있어요!)
📌 기본 문법
@media (조건) {
/* 화면 크기에 따라 적용할 스타일 */
}
✅ 예제: 768px 이하에서 배경색 변경
body {
background-color: white; /* 기본 배경색 */
}
@media (max-width: 768px) {
body {
background-color: lightgray; /* 모바일에서는 연한 회색 배경 */
}
}
✅ 화면 너비가 768px 이하(태블릿, 모바일)일 때 배경색이 바뀜
3️⃣ 자주 사용하는 media query 예제
이제 디바이스별 반응형 스타일을 적용하는 실전 예제를 살펴볼게요!
✅ 1. 기본적인 반응형 스타일
@media (max-width: 1200px) { /* 데스크톱 */
body { font-size: 18px; }
}
@media (max-width: 992px) { /* 태블릿 */
body { font-size: 16px; }
}
@media (max-width: 768px) { /* 모바일 */
body { font-size: 14px; }
}✅ 기기별 글자 크기를 조정하여 가독성을 높임
✅ 2. 모바일에서 네비게이션 메뉴 변경하기
모바일에서는 네비게이션 메뉴를 숨기고, 햄버거 메뉴로 변경하는 방식을 많이 사용해요.
📌 기본 스타일
.nav {
display: flex;
justify-content: space-between;
background-color: navy;
padding: 10px;
}
.nav-menu {
display: flex;
list-style: none;
}
📌 모바일에서 네비게이션 숨기기
@media (max-width: 768px) {
.nav-menu {
display: none; /* 모바일에서는 메뉴 숨김 */
}
}✅ 모바일에서는 메뉴를 숨기고, 햄버거 버튼을 띄울 수 있음!
✅ 3. 모바일에서 flexbox 레이아웃 변경하기
기본적으로 flexbox를 사용해 PC에서는 가로 정렬, 모바일에서는 세로 정렬로 변경할 수 있어요.
📌 PC에서는 가로 정렬
.container {
display: flex;
flex-direction: row; /* 가로 정렬 */
}
📌 모바일에서는 세로 정렬
@media (max-width: 768px) {
.container {
flex-direction: column; /* 세로 정렬 */
}
}✅ PC에서는 가로 정렬 → 모바일에서는 세로 정렬로 자동 변경
4️⃣ meta viewport 설정하기 (반응형 웹 필수)
모바일 환경에서 반응형 웹이 정상적으로 작동하려면 meta viewport 태그를 추가해야 해요.
📌 HTML 문서의 <head>에 추가
<meta name="viewport" content="width=device-width, initial-scale=1.0">
✅ 이 태그가 없으면 모바일 화면에서 반응형 스타일이 정상적으로 적용되지 않을 수 있어요!
📌 마무리 & 다음 단계는?
오늘은 반응형 웹 디자인의 핵심 개념과 media query를 활용하는 방법을 배웠어요!
이제 여러분은 웹사이트가 모바일, 태블릿, PC에서 깨지지 않도록 조정할 수 있어요. 🎉
📢 다음 글에서는?
👉 CSS 그리드 시스템(grid) 배우기! 더욱 강력한 레이아웃 만들기
👉 실전 프로젝트! 반응형 웹사이트 직접 만들어보기
다음 글도 기대해주세요! 😊
[CSS Grid 완벽 정리] 강력한 레이아웃 시스템 grid 배우기!
안녕하세요! 😊 지난번에는 반응형 웹 디자인과 media query 활용법을 배웠어요.이제 우리는 다양한 기기에서 깨지지 않는 웹사이트를 만들 수 있어요!그런데 웹사이트를 디자인할 때 복잡한 레이
it-afternoon.tistory.com
'개발 공부 > HTML | JS' 카테고리의 다른 글
| [CSS Grid 실전 프로젝트] grid를 활용해 반응형 웹사이트 만들기! (0) | 2025.03.25 |
|---|---|
| [CSS Grid 완벽 정리] 강력한 레이아웃 시스템 grid 배우기! (0) | 2025.03.24 |
| [HTML과 CSS 레이아웃 완전 정복] display, position, flexbox 활용법 총정리! (0) | 2025.03.20 |
| [HTML과 CSS] HTML과 CSS 연결하기! 예쁜 웹페이지 만드는 법 (0) | 2025.03.19 |
| [HTML 핵심 태그] div, span, table, form 태그 자세히 알아보기 (0) | 2025.03.18 |