[CSS] Position: Sticky

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티의 값인 스티키에 대해 알아봅시다!

 

Position: Sticky

혹시 라이언 일병 구하기라는 영화를 보신적이 있나요? 거기에 보면 보병들이 독일군의 탱크를 불능 상태로 만들기 위해 스티키 범(Sticky Bomb)이라는걸 만들어서 작전에 사용하는데 보병들이 탱크가 공격할 수 없는 사각지대로 몰래 접근하여 탱크의 무한궤도(탱크 바퀴)에 폭탄을 붙이고 달아납니다. 그러면 폭탄이 터지고 탱크는 움직일 수가 없는 상태가 되죠.

 

네 ~ sticky의 뜻인 '끈적거리는, 달라붙는'을 말하고 싶어서 영화 이야기를 해보았습니닼ㅋㅋㅋ

 

오늘 알아볼 Sticky도 달라붙는 친구이기 때문에 뜻을 유념하면서 가봅시다~

 

Position: Sticky는 fixed와 비슷한 기능을 가지고 있지만 스티키는 유저의 스크롤링에 기준을 두고 위치가 정해집니다. 그리고 적어도 top, left, bottom, right중 하나 이상을 지정해야 작동합니다.

 

---

 

Sticky의 생김새

아래의 코드를 한번 실행해보겠습니다.

<!--HTML-->
<div id="stranger">난 모르는 사람</div>
<div id="parent">난 부모
  <div id="child1">난 자식 1번</div>
  <div id="child2">난 자식 2번</div>
  <div id="child3">난 자식 3번</div>
</div>

/* CSS */
div {
  border: 8px solid palevioletred;
  margin: 20px;
}

#parent {
  height: 5000px;
  background-color: paleturquoise;
}

#child1 {
  position: sticky;
}

#child2 {
  position: sticky;
}

#child3 {
  position: sticky;
}

• 이전 시간에 알아본 fixed와 다르게 경계가 마진(margin) 20px에 딱 맞게 들어가 있습니다.
• 그리고 left 프로퍼티를 이용하여 값을 여러가지 주었지만 아무런 변화가 없었습니다.

 

그럼 스크롤을 내려보겠습니다.

에잉? 사라졌습니다.

 

아하 top, left, bottom, right중 하나를 지정해야 한다고 했으니까 하고 내려봅시다. (스크롤을 내리는 상황에는 top나 bottom의 값을 설정해야함)

div {
  border: 8px solid palevioletred;
  margin: 20px;
}

#parent {
  height: 5000px;
  background-color: paleturquoise;
}

#child1 {
  position: sticky;
  top: 1200px;
}

#child2 {
  position: sticky;
  top: 0px;
}

#child3 {
  position: sticky;
  top: 30px;
}

위와 같이 CSS코드를 변경하고 실행해보았습니다.

 

그럼 스크롤을 내려보겠습니다.

• 스크롤을 내리면 설정해둔 top의 값에 위치하여 쭉 따라 옵니다.
• '난 자식 1, 2, 3번'의 위치를 부모 요소 밖으로 빼내려고 left값에 -100px 같은 마이너스 값을 주거나 right값에 500px 같은 큰 수를 줘도 부모요소를 빠져나오지 못했습니다. fixed, absolute와는 확연히 다른 모습입니다. 

 

---

 

오늘의 느낌

꼬꼬무를 보다보니 유튜브가 그것이 알고싶다의 영상으로 자동재생을 넘겨줘서 이제 그알을 시청중... 세상엔 참 무서운 일들이 많구나.