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

Horizontal Scrolling of web page

수평 스크롤 효과를 구현하고 있으며, 사용자가 일반적으로 수직으로 스크롤을 해도 페이지가 수평으로 스크롤 된다.주의해야 할 사항은, 사용자가 어떤 화면을 사용할지 알 수 없기 때문에 픽셀을 사용한 고정적인 사이즈 대신에 vw vh 라는 상대 단위를 사용한다.!codep

2022년 4월 3일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 마우스 wheel 이벤트를 조작하여, Zoom 기능 구현

마우스 스크롤 휠 이벤트를 이용하여, DOM 이벤트 조작 & CSS 변환으로 작업 영역을 확대 / 축소 할 수 있는 기능을 만들어 보자.!codepenchriscoyier/embed/oNzLRza?default-tab=html%2Cresult

2022년 3월 21일
·
0개의 댓글
·
post-thumbnail

[CSS] Raise the Curtains

스크롤의 배경이 dark 에서 light 으로 바뀌고, 위에 있는 내용도 sticky position 일 때, light 에서 dark으로 바뀌는 효과를 말한다.오직, HTML 과 CSS로만 구현을 해볼 것이다.css 변수를 만들어 , 나중에 필요에 따라 쉽게 변경할

2022년 3월 21일
·
0개의 댓글
·
post-thumbnail

스크롤 상태 표시 바 (@support)

article을 보다보면 스크롤을 내리는 일이 많아서 스크롤에 맞게 header에 진행 상황을 표시해주는 것을 종종 보곤 했는데, 평소에 그 기능을 어떻게 구현할 수 있을까 라는 의문점을 가지고 있었다. 외국의 문서들을 살펴보다가 좋은 글을 발견하여, 추후에 내가 그

2022년 3월 20일
·
0개의 댓글
·