예전에는 웹에서 스크롤을 다루기 위해 javascript의 도움을 받아야 했습니다. 배너 슬라이더나 풀페이지웹을 구현하기 위해서도 마찬가지였죠. 최근에는 CSS에 스크롤과 관련된 사양이 많이 추가되어서 순수 CSS만으로 풀페이지 웹을 구현할 수 있게 되었습니다.
1. Scroll-Snap
먼저 살펴볼 속성은 Scroll-Snap입니다. 이 속성을 사용하면 스크롤 가능한 컨테이너 안의 각 요소들이 스크롤될때 그냥 지나치지 않고 스냅되도록 지정할 수 있습니다. 먼저 HTML구조를 잡아줍니다.
<body>
<section id="item-1" class="item">첫번째 섹션</section>
<section id="item-2" class="item">두번째 섹션</section>
<section id="item-3" class="item">세번째 섹션</section>
</body>이제 우리는 body태그 안에 있는 각 section에서 스크롤이 머물도록 만들어야 합니다. 먼저 풀페이지 웹처럼 스타일을 지정해 주도록 하겠습니다.
html,body {
width:100%;
height:100%;
}
.item {
width:100%;
height:100%;
}
.item:nth-child(1){
background:green;
}
.item:nth-child(2){
background:blue;
}
.item:nth-child(3){
background:yellow;
}
그러면 위와같이 보이게 됩니다. 스크롤을 내리면 파란색, 노란색 섹션이 화면을 꽉 채우게 되어있습니다. 이상태는 섹션이 화면을 꽉 채우고 있지만 스크롤이 섹션에 딱 맞게 머물지는 않는 상태입니다. 이제 스타일을 아래와같이 수정해 보겠습니다.
html,body {
width:100%;
height:100%;
}
html {
scroll-snap-type:y;
}
.item {
width:100%;
height:100%;
scroll-snap-align:center;
}
.item:nth-child(1){
background:green;
}
.item:nth-child(2){
background:blue;
}
.item:nth-child(3){
background:yellow;
}이제 스크롤을 해보면 섹션에 딱 맞게 스크롤이 이동될 때도 있고, 그냥 중간에 머물 때도 있습니다. 이제 scroll-snap-type의 값을 [y mandatory]로 조절해 보겠습니다. 이제 자연스럽에 스크롤이 섹션에 스냅되게 됩니다.
그런데 스크롤을 빠르게 움직이면 중간섹션을 건너뛰고 다음 섹션으로 이동해버리는 경우가 생깁니다. 이런 경우를 방지하려면 [scroll-snap-stop:always]속성을 .item에 추가해줍니다. 이제 섹션을 중간에 건너뛰지 않게 됩니다.
위 속성들을 적용하고 난 후 스타일은 아래와 같이 됩니다.
html,body {
width:100%;
height:100%;
}
html {
scroll-snap-type:y mandatory;
}
.item {
width:100%;
height:100%;
scroll-snap-align:center;
scroll-snap-stop:always;
}
.item:nth-child(1){
background:green;
}
.item:nth-child(2){
background:blue;
}
.item:nth-child(3){
background:yellow;
}
