FrontEnd(2)
-
아주 간단하게 스크롤 페이지 이동 효과 만들기
html 코드 hello world new page css #main { width: 100vw; height: 100vh; overflow: auto; ... } #sub { width: 100vw; height: 10px; } main에서 스크롤하면 sub가 나오도록 하고 싶다면 이렇게 페이지를 구성한 뒤 window.addEventListener("wheel", (e) => { if (window.scrollY > 0) { document.querySelector("#sub").style.height = "100vh"; } if(window.scrollY === 0) { document.querySelector("#sub").style.height = "10px"; } }); javascript로 ..
2022.12.31 -
[React] Context Api 사용해서 다크 모드 만들기
먼저 context api란? react에서는 componet와 componet간 데이터를 전송할 때 props를 사용한다. 부모 componet에서 자식 component로 props를 내림 유전(?) 해준다. 하지만 할머니 component에서 정의한 내용을 손자 component가 사용하고 싶을 수도 있다. 아니면 증조 할머니 component를 증손자 component가 참조하고 싶을 수 있다. 그럴 때 불필요하게 props를 전송하지 않도록 전역변수와 같이 context를 선언할 수 있고, 그를 통해 상태 관리 역시 가능하다. 공식 문서 : https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for build..
2022.08.09