[프로젝트] WantU (3/15 - 2 일차)
1. Nav 만들기
1) 화면 상단 고정
position : fixed 사용해서 화면 상단에 고정시켰다. (스크롤을 해서 밑으로 내리더라도, 상단에 계속 존재할 수 있게 만들었다.)
2) nav 햄버거 버튼 생성
햄버거 버튼에 hover 하면, 드롭 다운 2단 메뉴가 나올 수 있도록 구현했다.
3) My page 버튼 생성
My page 버튼을 클릭하면 , my page 로 이동할 수 있도록 navigate를 사용해서 구현했다.
2. Footer 만들기
원티드 공식홈페이지 footer와 똑같이 만들어보려고 노력했다. 원티드 공홈의 footer를 보면, 오른쪽 사이드 하단부분에 select와 option을 사용해서 웹사이트 언어를 user가 선택할 수 있는 부분이 있었다.
select 와 option 으로 언어를 선택할 수 있는 부분이었다. 이 부분에는 "한국어, 영어, 일본어, 싱가포르(영어)" 와 관련한 선택사항이 있었다. option안의 처음 부분에 각 나라별 국기가 붙어져있었다. 이를 똑같이 구현해보고 싶어서 사진을 열심히 찾았다. 그 후, 이미지를 넣어보고 했지만, 알고보니, select태그에는 이미지사용이 불가하다는 원칙이 있었다. 그래서 해결방안을 찾고자 구글링을 했고, 이와 관련한 해결방안이 background-image로 이미지를 사용하면 해결가능하다고 나와있었다. 하지만, 해결은 여전히 되지 않았다.
그래서, 마지막으로 시도해보자 한 방법이 이모티콘을 넣는 것이었다. 작년에 이모티콘을 넣어 웹싸이트를 만들어보려했을 때, 이모티콘이 전혀 들어가지 않았던 기억이 있어서 이모티콘을 사용할 생각을 못했었다. 하지만, 이번 기회에 이모티콘도 들어갈 수 있다는 것을 알게 되어서 앞으로 이러한 작업에는 이모티콘을 사용해야겠다는 해결책을 알게 되었다. 또한, select태그에는 이미지를 사용할 수 없다는 것도 알게 되었다.
내일은 nav바에 추가기능을 구현해 볼 생각이다. drop down menu를 만들고, 로그인 모달창도 만들어볼 계획이다. 오늘만큼 내일도 조금의 발전이 있기를 바란다.