Blog - CSS scroll snap

서론

CSS Scroll Snap 에 대해서 알아보자. 간단히 어떻게 생겨먹은 녀석인지 예제로 살펴보자.

hello

2

3

4

5

이렇게 차지하는 정도에 따라 어디에 초점이 맞춰질 지 결정되는 속성이다.
이를 참고해서 나는 Fullpage 웹을 구현해보고자 한다. Apple 홈페이지를 모바일로 접속하면 느낌이 올 것이다.

구현해보기

<h2 id="item-1" class="item">첫번째 섹션</h2>
  <img src="이미지 링크">

<h2 id="item-2" class="item">두번째 섹션</h2>
  <img src="이미지 링크">

<h2 id="item-3" class="item">세번째 섹션</h2>
  <img src="이미지 링크">

<style>
html {
    scroll-snap-type:y;
}

.item {
    scroll-snap-align:start;
}
</style>

첫번째 섹션

두번째 섹션

세번째 섹션

정리하기

정말 간단하게 한번 구현해 보았다. Heading 표시인 h2가 페이지의 기준이 되는 경우가 대다수이므로 h2를 기준으로 item class를 선언해 주고 h2의 start부분에 snap이 되도록 설정하였다. 위의 섹션에 스크롤을 해보자

마무리

Mozilla 개발자 홈페이지를 참고하였습니다. 오늘은 토익 공부와 가사 번역도 할 예정이기 때문에 간단히 마친다. 차후에 더 추가할 내용이 있으면 추가할 것이다.

"가사 번역을 올리려고 했는데, 찾아보니 저작권 침해라고 한다... 그냥 나만의 일기장에 번역하는걸로 ㅠㅠ"