티스토리 뷰
1. fixed 와 sticky 의 차이점
position : fixed
문서의 흐름에서 완전히 벗어나게 되어 스크롤을 해도 사용자가 지정한 위치에 그대로 붙어있게 된다.
position : sticky
꿋꿋하게 고정돼 있는 fixed와 달리 sticky는 일반적인 문서의 흐름에 따른다.
스크롤을 하다가 내가 정한 offset에 닿으면 그제서야 fixed처럼 고정이 된다.
relative 속성처럼 동작하다가 어느 시점에 다다르면 fixed처럼 동작하는 것이다.
이렇게 글로만 봐선 모르겠어서... 예제를 한 번 직접 작성해봤다.
아직 fixed와 sticky에 position, top, bottom, left, right 속성을 지정해주지 않은 상태.
html
<body>
<div id="fixed_container">
<h1>fixed_container</h1>
<div id="fixed_item">
fixed_item
</div>
</div>
<div id="sticky_container">
<h1>sticky_container</h1>
<div id="sticky_item">
sticky_item
</div>
</div>
</body>
fixed, sticky 용 컨테이너와 item을 각각 하나씩 만들었다.
css
body, html {
text-align: center;
}
#fixed_container {
background-color: #FFF2F2;
width: 900px;
height: 500px;
margin: 10px auto;
}
#fixed_item {
background-color: #F47C7C;
color: white;
width: 300px;
height: 300px;
line-height: 300px;
margin: 0 auto;
/* position: fixed; */
}
#sticky_container {
background-color: #FFF2F2;
width: 900px;
height: 500px;
margin: 10px auto;
}
#sticky_item {
background-color: #F47C7C;
color: white;
width: 300px;
height: 300px;
line-height: 300px;
margin: 0 auto;
/* position: sticky; */
}
2. position: fixed / position: sticky 적용후
fixed는 스크롤이 움직임에 따라 그 자리에 그대로 있고, sticky는 아직 별 다른 속성을 주지 않아
position: static 상태일 때와 똑같이 자신의 부모 컨테이너 안에 자리 잡고 있다.
2-1. fixed에 top, bottom, left, right 속성 값 주기
top: 0 / left: 0
#fixed_item {
/* background-color: #F47C7C;
color: white;
width: 300px;
height: 300px;
line-height: 300px;
margin: 0 auto;
position: fixed; */
top: 0px;
left: 0px;
}
문서의 흐름에 완전히 벗어나서 가장 위, 왼쪽에 달라 붙었다.
top을 bottom으로 바꾸거나 left를 right로 바꾸면 가장 하단 오른쪽에 달라 붙는다.
#fixed_item {
/* background-color: #F47C7C;
color: white;
width: 300px;
height: 300px;
line-height: 300px;
margin: 0 auto;
position: fixed; */
bottom: 0px;
right: 0px;
}
스크롤을 해도 지정해준 자리에 그대로 고정돼 있다.
#fixed_item {
background-color: #F47C7C;
color: white;
width: 300px;
height: 300px;
line-height: 300px;
margin: 0 auto;
position: fixed;
right: 100px;
left: 100px;
}
right와 left에 같은 값을 주면 어느쪽에도 붙지 않고 중앙정렬이 된다. 물론 margin: 0 auto; 의 역할이 크긴 한데...
한쪽을 더 작게 주거나 크게 주면 중앙 정렬에서 살짝 치우치게 된다.
right, left의 두 값을 같게 했을 때
right를 left의 두배로 줬을 때.
2-2. sticky
fixed 콘테이너는 과제를 하면서 상단 메뉴바 등으로 사용했으니까 대충 어떻게 동작하는지 알겠는데... sticky는 어떻게 동작하는지 잘 모르겠어서 이 포스트를 작성하게 됐다. 이전에 선배가 sticky를 이용해서 만든 것 같은 뉴스 기사를 나한테 보여준 적이 있는데 직접 컨트롤 해본 적은 한 번도 없고 + fixed와 비슷해 보여서 더 헷갈린다.
top: 200px 설정
스크롤을 하다가 상단에서 200px 떨어진 상태가 되면 계속 그자리에 붙은 채로 이동한다.
top: 500px 설정
스크롤을 하다가 상단에서 500px 떨어진 상태가 되면 스크롤 되어도 그 자리에 붙어있다.
이렇게 스크롤을 해도 sticky item은 자신의 부모 컨테이너 밖을 벗어나지 않는다.
fixed는 문서의 흐름에서 완전히 벗어나고, sticky는 문서의 흐름을 따른다는 말을 직접 만들어보면서 이해할 수 있었다.
sticky는 원래 자신의 자리에 있다가 사용자가 스크롤을 하면 일정 지점부터 그 자리에 딱 달라붙어 있게 된다는 식으로 받아들였다.
'Computer Science' 카테고리의 다른 글
| [복습] OTT 서비스가 웹에서 재생되는 방법 (0) | 2023.05.06 |
|---|---|
| [용어정리] 정적 타입 언어 / 동적 타입 언어 (0) | 2022.05.23 |
| [용어정리] 프레임 워크 / 라이브러리 (0) | 2022.05.23 |
| [용어 정리] 비동기처리 (0) | 2022.04.21 |
| [용어정리, 실습] JSON이 뭘까 (0) | 2022.04.10 |