HTML과 CSS로 반응형 웹사이트 만들기 🌐
안녕하세요! 😊 오늘은 HTML과 CSS를 활용하여 반응형 웹사이트를 만드는 방법에 대해 알아보겠습니다. 최근에는 모바일, 태블릿, PC 등 다양한 기기에서 웹사이트를 접속하기 때문에 **반응형 웹 디자인(Responsive Web Design)**이 필수입니다. 이번 글에서는 초보자도 쉽게 따라 할 수 있는 반응형 웹사이트 제작 방법을 알려드릴게요! 🚀
🔥 반응형 웹사이트란?
반응형 웹사이트(Responsive Website)는 사용자의 기기 화면 크기에 따라 자동으로 레이아웃이 조정되는 웹사이트를 의미합니다. 이를 위해 HTML과 CSS의 **미디어 쿼리(Media Query)**를 활용합니다.
📌 반응형 웹사이트의 장점
- 다양한 기기에서 최적화된 화면 제공
- 유지보수 용이
- SEO(검색 엔진 최적화)에 유리
🛠 반응형 웹사이트 제작 단계
1️⃣ HTML 기본 구조 작성하기
우선 기본적인 HTML 구조를 만들어보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹사이트</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>반응형 웹사이트 예제</h1>
</header>
<main>
<p>이 웹사이트는 다양한 기기에 최적화되어 있습니다.</p>
</main>
<footer>
<p>© 2024 My Responsive Website</p>
</footer>
</body>
</html>2️⃣ CSS 스타일 적용하기
이제 CSS를 활용하여 반응형 디자인을 적용해보겠습니다.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
header {
background-color: #007bff;
color: white;
padding: 20px;
}
main {
padding: 20px;
}
footer {
background-color: #f1f1f1;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
/* 반응형 디자인 적용 */
@media screen and (max-width: 768px) {
body {
background-color: #f9f9f9;
}
header {
font-size: 18px;
}
}📌 미디어 쿼리란? 미디어 쿼리는 특정 화면 크기에서 CSS 스타일을 변경할 수 있도록 도와주는 기능입니다. 위 코드에서는 768px 이하의 화면에서 배경색과 글자 크기를 조정했습니다.
📱 다양한 화면 크기에서 테스트하기
1️⃣ 브라우저 개발자 도구(F12) 활용
- 크롬 브라우저에서 F12를 눌러 개발자 도구를 열고 **디바이스 모드(CTRL + Shift + M)**를 활성화하세요.
- 다양한 해상도에서 웹사이트가 어떻게 보이는지 테스트할 수 있습니다.
2️⃣ 모바일에서 직접 확인
- 로컬 서버를 실행하거나, 깃허브 페이지(GitHub Pages)를 이용해 직접 모바일에서 확인하세요.
🚀 추가 기능 적용하기
✅ 네비게이션 바 추가하기
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>✅ CSS로 네비게이션 스타일 적용하기
nav ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 15px;
}
nav a {
text-decoration: none;
color: #333;
font-weight: bold;
}✅ 햄버거 메뉴 적용하기 (모바일 최적화)
@media screen and (max-width: 600px) {
nav ul {
flex-direction: column;
display: none;
}
nav ul.show {
display: block;
}
}🎯 결론
오늘은 HTML과 CSS를 활용하여 반응형 웹사이트를 만드는 방법을 배워보았습니다. 반응형 웹 디자인을 적용하면 모든 기기에서 최적화된 웹사이트를 제공할 수 있으며, SEO에도 도움이 됩니다. 😊
👉 더 다양한 기능을 추가하고 싶다면 CSS Flexbox, Grid, JavaScript를 활용해보세요! 🚀
❓ 궁금한 점이 있다면 댓글로 남겨주세요!
📢 도움이 되셨다면 공유 & 구독 부탁드립니다! 👍
'웹 개발' 카테고리의 다른 글
| 웹 개발의 기초: REST API 설계와 구현 (0) | 2025.02.16 |
|---|
