패스트캠퍼스 챌린지 30일차 - Part1. Ch10

이제 헤더 오른쪽 상단의 서브 메뉴를 작업해보자. 수평 정렬 되어있는 네 개의 메뉴 사이에 미세하게 구분선이 있고 오른쪽의 돋보기를 클릭하면 검색창이 뜨는 모습을 확인할 수 있다.

 

먼저 google material icons 에서 search를 검색해서 원하는 돋보기 아이콘을 가져온다. 가져올 때 해당 코드를 전부 복사해와도 되지만, material-icons 클래스를 생성하고(div 태그든 span 태그든 상관없음) 여기에 해당 아이콘이 가진 이름만 복사해와도 된다. 내가 사용할 돋보기 이름은 search이므로 이것만 복사해오면 된다.

 

다음으로 서브 메뉴들을 li 태그 안에 a 태그로 생성한다. 만약 a 태그 안에 연결할 링크 주소가 준비되어 있지 않을 때 입력할 수 있는 방법이 2가지 있다. # 이라는 해시 기호를 넣는 방법과, javascript:void(0) 라고 적는 방법(자바스크립트로 아무 동작도 하지 않겠다고 선언하는 것과 같다)이 있다. #는 해시라는 특정한 기능을 가지고 있으므로 페이지에 어떠한 변화가 있을 수 있다. 따라서 두번째 방법을 권장한다!

 

그리고 서브 메뉴들에 css를 입힐건데, 선택자를 명시할 땐 상위 선택자들을 분명하게 명시해주는게 좋다. 또한 html에 작성한 구조를 나중에 작성하지 않더라도, 아래 사진과 같이 css 선택자로 모두 정리하고 나서 코드를 추가하는게 좋다. 스타일들이 추가되기 시작하면 선택자들을 알아보기가 힘드니까!!

이런식으로 선택자들을 선언하고 코드 추가하자

a 태그로 링크를 연결할 땐 클릭해야 사이트가 넘어가는데 클릭 범위가 좁으면 선택하기 힘드므로 padding으로 사이즈를 넓혀주는 게 좋다. 그 전에 인라인 요소이므로 block으로 변경해주는 것도 잊지말자.

 

그러면 서브 메뉴들 정리 끝!!

---

 

30일차 -The end- ^_^  ㅋ_ㅋ ㅎ_ㅎ

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa