css를 최대한 사용해 보고자 js를 사용하지 않고 html, css 만으로 프로필 사이트를 제작해 보았다.
intro, skills, project, contact로 내용이 구분되었는데
skills 부분을 화면 전체를 사용하고 싶지 않았다.
그래도 skills로 scroll 했을 때 깔끔한 느낌을 주기 위해
intro 나 project 가 보이지 않도록 skills 중앙으로 배치하고 싶었다.
js를 통해 했다면 각 항목별 크기를 계산해서 스크롤을 줄 수 있었겠지만
css만을 사용하리라는 한계를 준 프로젝트였기 때문에
scroll snap 을 사용해 보았다.
이를 사용하기 위해선 나의 html 상 body에 overflow: hidden으로 주고
main에 overflow: scroll로 주어 scroll snap 을 사용해야 했다.
skills 이외의 부분에서는 scroll snap 이 필요 없었지만
skills 의 형제 box 들에 scroll-snap-align: none; 을 설정하지 않으면
계속 skills로 딸려 올라가는 문제가 있어
다른 형제 box에 scroll-snap-align: none;을 작성했다.
우여곡절 끝에 컴퓨터 상에는 잘 작동했으나
mobile 과 ipad에서는 scroll-snap-align: none; 이 잘 작동하지 않았다.
그래서 결국 skills 항목이 화면 전체를 차지하게 했고
다른 곳에서 scroll 관련된 action을 조정해 넣을 때에는
scroll-snap 보다
더 간편한 js에서 scrollIntoView 사용해 scroll 을 넣어야겠다고 생각한 하루였다.
