개요
지금 간단하게 만져보던 todo가 어쩌다보니 몹시 디테일한 것에도 손이 갔다. 지금 날자를 선정하는 코드를 만드는데 custom으로 진행하다보니, 이를 좀 더 사용자 친화적이게, 스크롤을 내리면 어중간한데서 끝나는게 아닌, 딱 해당 div나 p 태그에 걸리도록 하고 싶어서 찾던 중 드디어 찾았고, 실습과 적용을 해보니 잘된다.
이런 거 검색할 때 마다 슨배개발자분들 대단하다ㄷㄷㄷ
실습
js를 사용해야하는 줄 알았는데, css와 html만으로도 가능했다.
html 코드
test.html에 아래처럼 코드를 작성 해주었다.
<body>
<div class="container">
<div class="colors1 div1"><h1>blue</h1></div>
<div class="colors1 div2"><h1>red</h1></div>
<div class="colors1 div3"><h1>yellow</h1></div>
<div class="colors1 div4"><h1>green</h1></div>
<div class="colors2 div1"><h1>blue</h1></div>
<div class="colors2 div2"><h1>red</h1></div>
<div class="colors2 div3"><h1>yellow</h1></div>
<div class="colors2 div4"><h1>green</h1></div>
<div class="colors3 div1"><h1>blue</h1></div>
<div class="colors3 div2"><h1>red</h1></div>
<div class="colors3 div3"><h1>yellow</h1></div>
<div class="colors3 div4"><h1>green</h1></div>
</div>
</body>css 코드
그리고 css 코드는 다음처럼 해주었다.
body {
padding:0;
margin:0;
}
.container {
width:100vw;
height:100vh;
overflow:scroll;
scroll-snap-type: y mandatory; /* 부모에서 작성해줘야함 */
overflow-y: scroll;
scroll-behavior: smooth;
}
.colors1{
width:100%;
height:50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: start; /* 자식에서 작성해줘야함 */
}
.colors2{
width:100%;
height:50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: center; /* 자식에서 작성해줘야함 */
}
.colors3{
width:100%;
height:50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: end; /* 자식에서 작성해줘야함 */
}
h1{
font-size: 5rem;
}
.div1 {
background-color:blue;
}
.div2 {
background-color:red;
}
.div3 {
background-color:yellow;
}
.div4 {
background-color:green;
}여기서 scroll을 하게 되는 주체가 있는데, 그곳에서
scroll-snap-type: y mandatory;를 작성해주어야 한다.
이 때, y는 세로 스크롤 할 거니까, 가로 스크롤이면 x.
mandatory와 proximity가 있다.
이에 대해 MDN에서는 아래처럼 설명을 하고 있다.
실제로 사용을 해보면 우리가 원하는 대부분은 mandatory를 쓰게 될 듯 하다.
mandatory를 사용하면 section1과 section2사이에 애매하게 위치해도 알아서 section1 또는 section2로 스크롤이 찾아간다.
하지만 proximity를 사용하면 section1과 section2사이에 애매하게 위치해있을 시 일반 스크롤 처럼 작동한다. 제대로 된 작동을 위해서는 스크롤을 section1에 가까이 붙이거나, section2에 가까이 붙이면 된다.
그리고 자식에는 순서대로 파랑,빨강,노랑,초록을 3번 반복하게 했다.
한 단위 당 scroll-snap-align을 달리 줬다.
처음은
scroll-snap-align: start;
두번째는
scroll-snap-align: center;
세번째는
scroll-snap-align: end;
로 주어서
y축 기준으로 설명했을 때,
start의 경우 부모의 상단에 붙는다.
center의 경우 부모의 중단에 붙는다.
end의 경우 부모의 하단에 붙는다.
직접 코드를 실행한 내용을 확인하면 이해가 될 것이다.
scroll-snap-align: start;
빨강, 노랑, 초록 모두 스크롤에서 상단에 붙는 모습을 볼 수 있다.
scroll-snap-align: center;
파란색이 시작인데 첫 스크롤에서 중간에 붙는 모습을 볼 수 있다.
scroll-snap-align: end;
파란색이 시작인데, 첫 스크롤에서 하단에 붙는 모습을 볼 수 있다.
이를 잘 활용해서 열심히 구현해보자. 화이팅🖥️
