반응형
헤더와 푸터를 고정한 채로
가운데 body 부분만 overflow 속성으로 스크롤을 사용하여 올렸다 내렸다 하고 싶다.
이럴 때는 position 의 sticky 라는 속성을 사용하면 된다.
HTML
<header> 헤더영역 <header / >
<body> // 스크롤바가 나오는 긴 내용 <body />
<footer> 푸터영역 <footer / >
CSS
header {
position: sticky; // 포지션을 스티키로 주면 자연스레 고정된다.
top: 0; // 탑에 붙여야 하므로 0을 준다.
}
footer {
position: sticky;
bottom: 0; // 여기는 바텀에 붙여야 하므로 0을 준다.
}반응형
'JavaScript' 카테고리의 다른 글
| JavaScript - 페이지이동 location.href / location.replace() / location.assign() (0) | 2022.02.27 |
|---|---|
| JavaScript - Array.from() 으로 배열만들기 (0) | 2022.02.08 |
| CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션 (0) | 2021.11.05 |
| JavaScript - Break문 vs Continue문 (0) | 2021.10.14 |
| CSS - 테두리가 있는 툴팁(말풍선) 만들기 (0) | 2021.10.01 |
댓글