front-end 국비과정 일차 14~15일차 학습일지 html css로 내가 원하는 Page 만들어 보기 최종

사이트를 만들게된 계기

본인의 실력이 미숙하다 판단하였기 때문에 쉬운 사이트를 코딩 해보자는 취지에서 google 다크모드를 선택하게 되었습니다

기능

브라우저 상단에 Gmail,bento-icon을 제외한 모든 부분은 클릭하면 내용에 해당하는 부분으로 이동합니다
JavaScript를 사용하여 만든 브라우저 상단 정환이라고 명시된 icon을 클릭하여 content를 on/off 할 수 있습니다
각 content마다 마우스 hover시 배경색,마우스 cursor가 변함니다
netlify를 이용해 사이트를 배포하였기에 코드와 사이트를 보며 비교분석 할 수 있습니다

느낀점

퍼블리싱을 쉽게 할 수 있을거라 생각했지만 html의 구도를 파악하고 css로 요소사이에 상호작용과 오류를 파악하여 적용하고 js로 동적기능을 추가하는 일은 상당히 어려웠습니다 하지만 잘 했든 못했든 본인은 사이트를 만들었다는 것에 의미를 두고 있습니다 상당히 기쁨니다 앞으로 다른 라이브러리 framework를 배우게되면 퍼블리싱에 대한 기억이 휘발될거라 판단하였기에 꾸준한 연습이 필요하다는 점을 느꼈습니다.

 

해당 페이지 github 저장소 링크

https://github.com/Jung-Hwan-Kim-97/google-main-page/tree/main

GitHub - Jung-Hwan-Kim-97/google-main-page

 

해당 페이지를  netlify로 배포한 사이트 ​

Google