간단한 반응형 페이지 레이아웃
모바일 버전이 필요해서 간단하게 작성했습니다.
페이지 레이아웃이라 참조용으로 보시면 좋을 둣 합니다.
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test03.html</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
}
.logo {
font-size: 24px;
cursor: pointer;
}
.menu-toggle {
display: none;
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 25px;
height: 3px;
margin: 5px 0;
background-color: #fff;
}
.menu {
display: flex;
}
.menu-close {
display: none;
}
.menu ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
margin-right: 20px;
}
.menu a {
color: #fff;
text-decoration: none;
}
.container {
flex: 1;
padding: 20px;
}
.footer {
flex-shrink: 0;
height: 60px;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
@media screen and (max-width: 768px) {
header {
flex-direction: row;
align-items: center;
padding: 20px;
position: relative;
}
/* .menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #333;
} */
/* .menu {
position: fixed;
top: 0;
right: -100%;
width: 75%;
height: 100vh;
background-color: #fff;
transition: right 0.3s ease-in-out;
}
.menu li {
margin-right: 0;
}
.menu a {
display: block;
padding: 10px;
border-bottom: 1px solid #fff;
} */
.menu-toggle {
display: block;
}
/* .menu-toggle.active {
display: flex;
justify-content: flex-end;
align-items: center;
width: 25%;
} */
/* .menu-toggle.active~.menu {
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
height: auto;
position: fixed;
top: 0;
right: -100%;
width: 75%;
height: 100vh;
background-color: #fff;
transition: right 0.3s ease-in-out;
} */
.menu {
position: fixed;
top: 0;
right: -100%;
width: 75%;
height: 100vh;
background-color: #fff;
transition: right 0.3s ease-in-out;
}
.menu.active {
border: 2px solid #ccc;
right: 0;
display: flex;
flex-direction: column;
}
.menu-toggle {
background: linear-gradient(#555353, #363535, #303030);
/*linear-gradient(#cdcdcd, #a8a4a4e0, #dddada);*/
padding: 10px;
border: 2px solid #f5f5f5;
border-radius: 6px;
box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.35), 0 5px 5px rgba(0, 0, 0, 0.5), 0 15px 25px rgba(0, 0, 0, 0.35);
}
.menu-close {
display: inline-block;
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5rem;
border: 1px solid #ccc;
color: #fff;
background-color: red;
width: 35px;
height: 35px;
border-radius: 35px;
/*100%;*/
/*transparent;*/
/* margin: 25px 0; */
/* padding: 25px 0; */
cursor: pointer;
}
.menu.active ul {
flex-direction: column;
flex-wrap: nowrap;
/* justify-content: top; */
flex-shrink: 0;
position: absolute;
top: 20px;
left: 10px;
width: 100%;
list-style: none;
margin: 30px 0;
padding: 0;
}
.menu.active li {
margin-bottom: 10px;
}
.menu.active li a {
display: block;
/* width: 80px; */
height: 50px;
padding: 10px;
background-color: #eee;
text-decoration: none;
color: #333;
line-height: 50px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<h1>Logo</h1>
</div>
<a href="#" class="menu-toggle">
<span></span>
<span></span>
<span></span>
</a>
<nav class="menu">
<button class="menu-close">×</button>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
</header>
<div class="container">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, quam at vulputate hendrerit, nibh
nibh suscipit est, nec blandit nunc eros ac tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, quam at vulputate hendrerit, nibh
nibh suscipit est, nec blandit nunc eros ac tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, quam at vulputate hendrerit, nibh
nibh suscipit est, nec blandit nunc eros ac tortor.</p>
</div>
<footer class="footer">
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</div>
</body>
<script>
var toggle_menu = document.querySelector('.menu-toggle');
var menulist = document.querySelector('.menu');
var menu_close = document.querySelector('.menu-close');
var loggo_click = document.querySelector('.logo');
loggo_click.addEventListener('click', function () {
window.location.href = "./해당파일명.html"; // 이 소스를 저장한 파일명을 적어주세요.
});
toggle_menu.addEventListener('click', function () {
toggle_menu.classList.toggle('active');
menulist.classList.toggle('active');
menu_close.classList.toggle('active');
});
menu_close.addEventListener('click', function () {
toggle_menu.classList.toggle('active');
menulist.classList.toggle('active');
});
</script>
</html>
[/code]
댓글 1개
게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1247 | 레이아웃 |
돈도없어개발하기도시러
|
2년 전 | 1604 | |
| 1246 | 레이아웃 |
돈도없어개발하기도시러
|
2년 전 | 1215 | |
| 1245 | 레이아웃 |
돈도없어개발하기도시러
|
2년 전 | 1988 | |
| 1244 | 레이아웃 |
돈도없어개발하기도시러
|
2년 전 | 1504 | |
| 1243 | HTML | 2년 전 | 1667 | ||
| 1242 | HTML |
 godmin |
2년 전 | 992 | |
| 1241 | HTML | 2년 전 | 1184 | ||
| 1240 | HTML | 2년 전 | 1206 | ||
| 1239 | HTML | 2년 전 | 1796 | ||
| 1238 | CSS |
 piadream |
2년 전 | 1304 | |
| 1237 | CSS |
piadream |
2년 전 | 1770 | |
| 1236 | CSS |
제작관리홍보까지
|
2년 전 | 1731 | |
| 1235 | HTML |
제작관리홍보까지
|
2년 전 | 1195 | |
| 1234 | 기타 |
제작관리홍보까지
|
2년 전 | 881 | |
| 1233 | CSS |
제작관리홍보까지
|
2년 전 | 1112 | |
| 1232 | 기타 | 2년 전 | 2132 | ||
| 1231 | CSS | 2년 전 | 1911 | ||
| 1230 | CSS | 2년 전 | 1918 | ||
| 1229 | 반응형 |
까투리장끼
|
3년 전 | 1219 | |
| 1228 | 반응형 | 3년 전 | 4168 | ||
| 1227 | 웹접근성 | 3년 전 | 1720 | ||
| 1226 | 반응형 | 3년 전 | 1996 | ||
| 1225 | CSS | 3년 전 | 1557 | ||
| 1224 | HTML | 3년 전 | 1657 | ||
| 1223 | HTML | 3년 전 | 1382 | ||
| 1222 | CSS |
 EI소프트 |
3년 전 | 1379 | |
| 1221 | CSS | 3년 전 | 1667 | ||
| 1220 | CSS |
네이비블루
|
3년 전 | 2020 | |
| 1219 | CSS | 3년 전 | 1628 | ||
| 1218 | 기타 |
min0000
|
3년 전 | 2488 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기