티스토리에서 제공하는 'HTML블럭' 기능을 사용해봤다!
캡처도 좋지만, 실시간으로 확인할 수 있으니 굿!
'Do ti! 프런트엔드 웹 디자인 입문' 책 보면서 따라했다.
👉 반응형 웹 페이지
- 너비가 720 이하일 때는 메뉴가 사라지고, 트리거(햄버거 메뉴)가 생긴다. 실제 웹에서 내 티스토리의 사이즈를 줄여보면 메뉴가 달라지는 걸 볼 수 있다. 일단 따라하면서 jquery로 만들었는데, 추후에 자바스크립트나 부트스트랩을 사용해서 다시 만들어보는 걸로 하겠음. 아 디자인하고, 반응형으로 작동하는 건 보이는데 버튼이 눌리지는 않는다. 그래서 참고하기 위해 이미지는 추가로 올림
index.html
<!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, maximum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<!-- add jquery -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
<body>
<nav class="response-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WEB</a></li>
<li><a href="#">DESIGN</a></li>
<li><a href="#">MAP</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<a href="#" id="trigger">MENU</a>
</nav>
<script>
$(function () {
let trigger = $('#trigger');
let menu = $('nav ul');
$(trigger).on('click', function (e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function () {
let w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
})
})
</script>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
/* 박스 모델의 너비를 테두리까지 포함 */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
background: url('https://images.unsplash.com/photo-1635550252781-93f6783ef332?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1175&q=80') no-repeat right bottom fixed;
background-size: cover;
}
a:link,
a:hover,
a:visited {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0 #293744;
}
/* 내비게이션 */
.response-nav {
width: 100%;
height: auto;
background: #34405e;
font-size: 1.2em;
font-weight: bold;
position: relative;
}
.response-nav ul {
display: none;
height: auto;
}
.response-nav ul li {
display: block;
width: 100%;
text-align: center;
border-bottom: 1px solid #576979;
}
.response-nav ul li a {
line-height: 50px;
}
.response-nav a#trigger {
display: block;
background-color: #283744;
width: 100%;
padding-left: 15px;
line-height: 40px;
position: relative;
}
.response-nav a#trigger::after {
content: "";
background: url('https://images.unsplash.com/photo-1671471498626-4bd0db3c3a82?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80');
width: 30px;
height: 20px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
/* css도 위치가 중요 */
@media screen and (min-width: 721px) {
.response-nav {
height: 40px;
border-bottom: 2px solid #34405e;
}
.response-nav ul {
display: block;
width: 720px;
height: 40px;
padding: 0;
margin: 0 auto;
}
.response-nav ul li {
display: inline-block;
width: 120px;
border-bottom: 0;
border-right: 1px solid #576979;
margin-right: -6px;
}
.response-nav ul li:last-child {
border-right: 0;
}
.response-nav ul li a {
font-size: 1em;
line-height: 40px;
}
.response-nav a#trigger {
display: none;
}
}
코딩애플 공부 기록
300x250
'LEARN > HTML | CSS' 카테고리의 다른 글
| [HTML] meta tag viewport (0) | 2023.01.08 |
|---|---|
| [HTML] form input (1) | 2023.01.06 |
| [CSS] width & max-width & box-sizing (0) | 2023.01.05 |
| [CSS] position 으로 박스 위치 조정 & 좌표 (0) | 2023.01.04 |
| [CSS] 배경 넣기 & margin collapse (0) | 2023.01.03 |
