<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>반응형 웹 기본 템플릿</title>
<style>
:root {
--main-color: #333;
--nav-bg: #444;
--dropdown-bg: #555;
--text-color: #fff;
--link-color: #333;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
}
header {
background: var(--main-color);
color: var(--text-color);
}
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.site-logo {
font-size: 20px;
}
.menu-toggle {
display: none;
font-size: 24px;
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
}
nav.main-nav {
display: flex;
justify-content: center;
background: var(--nav-bg);
}
.nav-item {
position: relative;
}
.main-nav > .nav-item > a {
display: block;
padding: 15px 20px;
color: var(--text-color);
}
.dropdown {
display: none;
position: absolute;
background: var(--dropdown-bg);
min-width: 120px;
z-index: 10;
}
.nav-item:hover .dropdown {
display: block;
}
.dropdown a {
display: block;
padding: 10px;
color: var(--text-color);
}
.layout {
display: flex;
gap: 20px;
max-width: 1200px;
margin: auto;
padding: 20px;
}
aside.sidebar {
width: 250px;
}
.sidebar ul {
list-style: none;
}
.sidebar li {
margin-bottom: 5px;
}
.sidebar a {
display: block;
padding: 10px;
background: #eee;
color: var(--link-color);
}
main.main-content {
flex: 1;
}
footer.site-footer {
background: #f0f0f0;
text-align: center;
padding: 20px;
margin-top: 40px;
font-size: 14px;
color: #666;
}
/* 모바일 우선 스타일 */
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
nav.main-nav {
flex-direction: column;
display: none;
}
nav.main-nav.show {
display: flex;
}
.main-nav > .nav-item > a {
padding: 12px 16px;
border-top: 1px solid #555;
}
.dropdown {
position: static;
}
.nav-item:hover .dropdown {
display: none;
}
.nav-item .dropdown {
display: none;
flex-direction: column;
}
.nav-item.show .dropdown {
display: flex;
}
.layout {
flex-direction: column;
}
aside.sidebar {
width: 100%;
}
.sidebar ul {
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: wrap;
}
.sidebar li {
margin-bottom: 0;
}
.sidebar a {
white-space: nowrap;
}
}
/* PC에서 우측 정렬되는 본문 내 텍스트 */
.main-content .page-message {
text-align: left;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<div class="site-header">
<div class="site-logo">로고</div>
<button
class="menu-toggle"
aria-label="메뉴 열기"
onclick="toggleMenu()"
>
☰
</button>
</div>
<nav class="main-nav" id="mainNav">
<div class="nav-item">
<a href="#" onclick="toggleDropdown(event)">회사소개.</a>
<div class="dropdown">
<a href="#">인사말</a>
<a href="#">오시는길</a>
</div>
</div>
<div class="nav-item">
<a href="#" onclick="toggleDropdown(event)">제품소개.</a>
<div class="dropdown">
<a href="#">제품A</a>
<a href="#">제품B</a>
</div>
</div>
<div class="nav-item">
<a href="#" onclick="toggleDropdown(event)">고객센터</a>
<div class="dropdown">
<a href="#">공지사항</a>
<a href="#">자주묻는질문</a>
</div>
</div>
</nav>
</header>
<div class="layout">
<aside class="sidebar">
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">인사말</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</aside>
<main class="main-content">
<div class="page-message">
<span>안녕하세요</span>
</div>
</main>
</div>
<footer class="site-footer">ⓒ 2025 나의 웹사이트. 모든 권리 보유.</footer>
<script>
function toggleMenu() {
document.getElementById("mainNav").classList.toggle("show");
}
function toggleDropdown(event) {
if (window.innerWidth <= 768) {
event.preventDefault();
const item = event.target.closest(".nav-item");
item.classList.toggle("show");
}
}
</script>
</body>
</html>
커뮤니티
건강/의학
문화/엔터
영상/사진
쇼핑/생활
경제/금융
IT/과학
스포츠
여행
음식/요리/맛집
유아/아동
교육/학습
어플/프로그램
유튜브
카페
블로그
자료/파일/문서공유
기타