[CSS] position: sticky 활용하기

HYl·2022년 3월 16일
2

평소에 awwwards, gdweb 등의 사이트를 살펴보며 요즘 웹 사이트의 동향이 어떻게 표현되고 있는지 종종 살펴본다. 최근들어 sticky 라는 css 속성을 활용하여 웹 사이트를 구현하고 있는 수상작들이 많이 보여지는 추세이다. 물론 sticky에 스크립트를 얹어서 구현한다거나 개발자마다 구현하는 방법들이 다 다르겠지만, sticky를 활용하여 간단하게나마 따라할 수 있다.

예전에는 ie에서 sticky가 지원되지 않아, sticky 사용 여부에 대하여 고민을 해보아야했지만 현재는 마이크로소프트 사에서 ie 지원 종료를 공식적으로 발표하였기에 편하게 sticky를 사용해도 될 것 같다.

https://www.awwwards.com/
https://www.gdweb.co.kr/main/


sticky로 간단하게 예제를 구현해 보았는데, 여기에서 동적인 모션을 추가하고 싶다면 js를 이용해야 되지만, css의 position: sticky를 활용하여도 간단한 멋진 화면을 구현할 수 있다.


REFERENCE

profile
꾸준히 새로운 것을 알아가는 것을 좋아합니다.

0개의 댓글