오늘 노마드코더에서 본건데 꿀팁이네요
position: sticky;
아래 코드 실행해서 스크롤 해보세요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background: #0f0;
line-height: 100px;
text-align: center;
}
nav {
background: #0af;
top: 0;
position: sticky;
line-height: 30px;
text-align: center;
}
.main {
background: #1a1;
height: 2000px;
text-align: center;
}
footer {
background: #834;
text-align: center;
}
</style>
</head>
<body>
<header>
header
</header>
<nav>
nav
</nav>
<div class="main">
aaaa
</div>
<footer>
Footer
</footer>
</body>
</html>
댓글 3개
게시글 목록
| 번호 | 제목 |
|---|---|
| 24318 | |
| 24317 | |
| 24315 | |
| 24309 | |
| 24294 | |
| 24293 | |
| 24277 | |
| 24262 | |
| 24260 | |
| 24253 | |
| 24251 | |
| 24236 | |
| 24233 | |
| 24228 | |
| 24226 | |
| 24221 | |
| 24214 | |
| 24203 | |
| 24201 | |
| 24199 | |
| 24196 | |
| 24195 | |
| 24194 | |
| 24192 | |
| 24191 | |
| 24187 | |
| 24185 | |
| 24183 | |
| 24172 | |
| 24168 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기