<22.06.04> CSS 공부 일지 #10. Position 속성의 Sticky에 대해 알아보자!

CSS 공부 일지 #10

예전에 CSS의 Position 속성에 대해 알아본 적이 있다. 그 때 static, relative, absolute, fixed까지 설명했는데, sticky는 설명하지 않았다. 오늘은 sticky에 대해 알아보도록 하자.

<22.03.17> CSS 공부 일지 #06. CSS로 요소 움직이기! ㅡ position 속성에 대해

 

1. Sticky란?

 

sticky는, Position 속성 중 하나로, static의 성질을 가짐과 동시에 fixed의 성질또한 가지고 있다. 해당 속성은 최신에 적용된 기술로, IE 11 브라우저와 Android 4.x 이하 버전에서는 지원하지 않는다는 단점이 있다. 하지만 sticky는 기존 javascript를 이용해 구현해야 했던 기능을 CSS 만으로 구현할 수 있게 되었기에, 충분히 혁신적인 기능이라 할 수 있다. 

 

 

위 영상은 sticky와 fixed, static의 동작 차이를 확인해보기 위해 테스트를 해본 것이다. 스크롤이 내려감에 따라 fixed와 sticky는 뷰포트에 고정되어 움직이지만, 특정 시점을 넘어갈 경우 static처럼 행동하는 것을 볼 수 있다.

 

 

2. Sticky 사용법

 

 

sticky 사용법은 아래와 같다.

 

.box {
  position: sticky;
  top: 50px;
  border: 1px solid black;
  width: 150px;
  height: 150px;
}

 

sticky 사용 시 주의사항이 몇 가지 있다. sticky 사용 시, top/bottom/left/right와 같은 위치값을 반드시 지정해주어야 한다. 또한 sticky를 지정한 부모 요소의 height값이 명시되어있어야 한다는 점이다. 이는, sticky의 동작범위가 부모 요소 내부에 한정됨을 의미한다.

 

부모 요소에 별도의 height값을 지정해주지 않을 경우, 부모 요소는 자식 요소의 height만큼만 가지게 되므로 sticky 속성을 지정하는 의미가 없어진다.ㅡ부모 요소애 height값을 주지 않고 다른 요소의 height를 늘려 부모 요소의 height를 늘리면 sticky 속성을 사용할 수 있긴하다.ㅡ 

 

 

3. Sticky 위치값

 

 

Sticky의 동작방식이 fixed와 비슷하다고 했지만, 실상은 그렇지가 않다. fixed나 absolute 속성을 사용할 때 설정하는 위치값(top/bottom/left/right)의 경우 뷰포트나 절대좌표를 기준으로 설정되어 그 범위를 벗어나지 않는다. 하지만 sticky의 경우 좀 다르다. 아래의 예시 코드를 보자.

 

<div class = "box">
  <div class = "left">
    sticky
  </div>  
</div>

.box {
  border: 1px solid black;
  width: 100%;
  height: 100vh;
}

.left {
  position: sticky;
  top: 0;
  margin: 0 auto;
  border: 1px solid black;
  width: 150px;
  height: 150px;
}

위 코드를 브라우저에서 실행한 화면은 아래와 같다.

 

 

위치값의 기준은 부모요소를 기준으로 함을 알 수 있는데, top에 0px를 주었기 때문에 부모 요소의 top을 기준으로 0값에서부터 sticky 속성이 적용되는 것을 볼 수 있다. 그럼 값을 달리 줘보자.

 

.box {
  border: 1px solid black;
  width: 100%;
  height: 100vh;
}

.left {
  position: sticky;
  top: 120px;
  margin: 0 auto;
  border: 1px solid black;
  width: 150px;
  height: 150px;
}

 

top값을 120px로 주었다. 그 결과 이전과는 달리 부모 요소의 top으로부터 120px 떨어진 곳에 스크롤이 다다랐을 때부터 sticky 속성이 적용된 것을 확인할 수 있다. 즉, sticky 속성과 함께 명시하는 위치값은 요소가 위치하고자 하는 좌표를 설정함과 동시에, sticky 속성이 적용될 임계점을 의미하기도 한다.

 

 

오늘은 position의 sticky 속성에 대해 알아보았다. sticky를 본격적으로 접한 것은 어제였는데, 아직까지 완벽하게 이해하지는 못했다 ㅠ 하지만 앞으로 꾸준히 공부하면서 sticky를 자유자재로 쓸 수 있을 때까지 많은 노력을 해야겠다...!

 

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.