html, css, javascript 클론 코딩 - 체감난이도 hard
일과시간에 HTML,CSS,JAVASCRIPT를 학습하며 만들었던 것들이다.
배포는 GITHUB와 연동하여 netlify를 이용하였다.
코드는 깃허브에 올려두었다. https://github.com/umcondo/NetlifyStorage
-
스타벅스 클론 코딩
코딩알려주는누나 유튜브를 참고했다. 인터렉티브 웹을 만들때 이용했던 윈도우 스크롤 위치에 따른 이벤트 처리를 혼자 구현해봤다.
-
자바스크립트를 이용한 타이핑 이펙트
수코딩 유튜브를 보고 클론 코딩했다.
Math를 이용한 랜덤숫자 반환과 setTimeout, setInterval에 대해 공부했다.
배포 : https://umcondostorage.netlify.app/typing_effect.html
유튜브 참고 주소 : https://www.youtube.com/watch?v=e56H5n1SvEs
-
유령
수코딩 유튜브를 보고 클론 코딩했다. DOM 처리, event처리와 css 기술들을 익힐 수 있었다.
배포 : https://umcondostorage.netlify.app/snow_ghost.html
유령 참고 : https://www.youtube.com/watch?v=S48MuZq1gOU
눈배경 참고 : https://www.youtube.com/watch?v=jmDace5VPDM -
nav underbar
유투브에서 코딩알려주는누나를 참고하여 혼자 만들고 팀원들과 공유하여 코드를 새롭게 만들었다.
처음엔 getBoundingClientrect()을 쓰고 vh,vw를 써서 만들었다. offset과 window.onresize를 이용하여 더 쉽게 만들 수 있었다.
요소의 좌표, 높이, 너비를 반환하는 기술들에 대해 배웠고, DOM 이벤트 처리에 대해 경험을 쌓을 수 있었다.
-
인터렉티브 웹 연습
javascript를 이용해 bbc 인터렉티브 웹(https://www.bbc.com/korean/resources/idt-48d3c9a7-4063-4289-9726-611b5ea9d7b5)를 비슷하게 클론코딩하는 것을 공부했다. 인프런에서 1분코딩을 보고 학습했다.
인터렉티브 웹의 어려움을 느꼈다. css에서 transition과 transform을 사용하고, javascript로 스크롤 이벤트에 따라 요소의 transform을 발동하는 로직을 구현해보았다.
css에서 block요소의 마진병합 현상에 대해 공부해 보았다. IntersectionObserver와 dataset에 대한 경험을 쌓을 수 있었다.
배포 : https://umcondostorage.netlify.app/bbcinteractiveweb/
코드 : https://github.com/umcondo/NetlifyStorage/tree/main/bbcInteractiveWeb