반응형 디자인을 고려한 navbar

프로젝트 시작 계기

HTML,CSS,JAVAscript의 개념을 어찌저찌 공부하다보니, 프로젝트는 놓치고 있었다. 그 사이, 개념은 여전히 잘 모르겠고, 지난 시간들에 배웠던 것도 잊어가기 시작했다. 실무에서 근무하시는 분께 고민을 이야기하니, 개념에 함몰되지 말아야 한다고 말씀하셨다. 실무를 직접 해보면서 모르는 개념을 익히는 것을 추천하셨다. 이에 HTML, CSS, JAVAscript를 동시에 할 수 있는 미니프로젝트를 진행하기로 했다.

 

결과물

Wide Screen

Small Screen

Small Screen-navbar

hover

toggle-changeBackground

toggle

toggle이란 두가지 상태 사이의 전환을 의미한다. 코드에선 true를 false로, false를 true로 전환하기 위해 사용한다.

 

예전부터 배경에 야간모드 적용하는 방법을 익히고 싶었는데, 어렵다 느껴서 못했다. 그런데 navbar를 없애고, 살리는 과정이 야간모드와 유사하다 느꼈고, 활용했다. 

 

소감

1. 잊고 있던 HTML, CSS 작성법을 다시 익혔다. position: absolute와 미디어 쿼리 등

 

2. svg 사이트

https://fontawesome.com/

 

3. 사실 지금까지는 멋사에서 줬던 과제만 했던 편이었다. 이번에 드림코딩님꺼 보면서 클론 코딩했더니 일단 기존에 배웠던 선생님과 스타일이 다르다보니 '이렇게도 진행할 수 있구나'하는 새로운 시야를 얻었다.

 

4. 클론코딩을 하면서 개념을 다시 짚어 나가는 것도 좋은 공부법이라는 생각이 든다. 개념 숙지와 실제 프로젝트를 겸하자. 공부를 손에서 놓지 말자. 

 

깃허브 주소

https://github.com/loeybho/project_01