Header를 동적으로 만들어보자

핵심구현사항

• 스크롤 시 헤더 색상변화
• 화면 사이즈가 줄어들었을때 메뉴 숨김 및 아이콘 등장
• 메뉴 아이콘 클릭 시 메뉴 등장

구체적인 구현 사항

1. 스크롤 시 헤더 색상 변화(fade-in)

• 스크롤을 내리면 같이 따라오는 메뉴를 구현했기에 메뉴바와 본문이 겹쳐 보이는 현상이 발생했다!
• 이를 해결하기 위해 메뉴바에 배경색상을 부여하기로 함! 대신 스크롤을 어느정도 내렸을 때 자연스럽게 fade-in 될 수 있도록 했다.
• 제이쿼리의 click을 이용하여 .active클래스를 추가 제거 하는 형식을 취했다.
• fade-in하는 active클래스만 추가하니 다시 스크롤을 제일 위에까지 올렸을 때 갑작스럽게 색이 변하는 현상을 수정하기 위해 deactive클래스를 디폴트 값으로 주어 위로 올렸을 때도 fade-out 할 수 있도록 했다. (참고 웹페이지)

2. 햄버거버튼 만들기

• 처음에는 fontawesome에서 아이콘을 다운받아 햄버거 버튼을 만들려고 했지만, 직접 만드는게 생각보다 어렵지 않고 X자로 변화하는 애니메이션을 줄 수 있다는게 신기해서 직접 해보기로 했다. 클릭하는 재미가 있음...
• 얼핏보면 3개의 바를 만들어야 할 것 같지만, 사실은 가운데 바는 두개를 겹쳐 놓은 것...! 그렇게 해야 클릭했을 때 transform: rotate(45deg)를 적용하여 X자 모양을 만들 수 있다.
• 클릭했을때 .active 클래스를 toggleClass로 주어 햄버거 버튼에서 X 버튼으로 그리고 그 반대로 바뀔 수 있도록 했다.

3. 메뉴 아이콘 클릭 시 메뉴 등장

• 풀페이지 메뉴 만들기. 제이쿼리가 낯선 내게는 정말 어려웠지만 리소스가 충분하지 않아 헤매던 중 유튜브에서 주옥같은 영상을 발견했다.
• 큰 화면에서의 메뉴를 유지한채로 레이아웃을 바꾸는 접근을 하려했기에 더욱 어려웠던 것 같다. 그건 포기하고 메뉴를 두개 만들어 큰 창에서는 풀페이지 메뉴의 높이를 0으로 주고, 작은 창에서는 이것의 높이를 100%(클릭 했을 때)를 줘 이를 해결할 수 있었다.
• 문제는 영상에서는 햄버거버튼을 누르면 풀페이지 메뉴가 나오는 것 까지만 알려줘서 원하는 메뉴 항목을 눌렀을때 풀페이지 메뉴가 접히도록 하는 방법을 몰랐다는 것...
• 이 문제는 li에 click을 줘서 원하는 메뉴가 클릭되면 풀페이지 메뉴에 visible클래스를 제거하여 화면에서 없어지게 하고, 햄버거 버튼도 toggleClass를 통해 활성화 클래스를 제거할 수 있도록 하여 해결했다.

5편을 마치며...

위 기능들을 구현하는 것은 쉽지 않았다. 그렇게 익숙하다고 생각했던 HTML/CSS도 keyframes를 활용한 애니메이션 기능 등은 낯설었당... 앞으로 갈길이 구만리라는 걸 체감했다. 그럼에도 불구하고 하나하나 해결해나가는 기쁨이 힘듦보다 더 큰 것 같다. 앞으로도 열심히 해야지~!

앞으로 해결해야할 것들

• 스크롤 시 fade-in으로 object 나타내기
• home section에서 타이핑 애니메이션 효과주기
• about section에서 skill 부분 원형 progress bar로 효과주기