스타벅스 클론(2) - 헤더와 드롭다운 메뉴(1) - 로고, 서브메뉴, 검색

우선 작업할 부분은 헤드 부분입니다.

위에 표시된 거처럼 로고, 서브메뉴, 메인메뉴 3개 큰 덩어리로 나눌 수 있습니다.

이 중 서브메뉴는 검색까지 포함됩니다.

 

이 글에서 로고, 서브메뉴, 검색을 제작할 예정입니다.

 

 

로고

body영역에서 위 이미지처럼 만들어봤습니다.

기본적인 구조는 나왔고 css파일로 넘어가서 예쁘게 꾸며주면 됩니다.

우선 body영역에 내용에 대해 먼저 꾸밀겁니다.

클래스 이름 대신 태그 이름으로 값을 부여하는 거라 body영역에 해당 태그들은 모두 영향을 받을 겁니다.

그래서 주석 COMMON으로 처리했습니다.

 

body 태그 중,

color은 별도 지정하지 않으면 기본값이 검정색입니다. 여기서 좀 있어보이게 #333 넣었습니다.

font-size도 기본값이 보통 16px인데 혹여 나중에 기준이 변경될 수 있으니 지정해줬습니다.

font-weight도 위와 같은 이유로 지정했습니다. (기본값도 400입니다)

line-height는 행간입니다(배수로 표시). 폰트마다 적당한 행간이 다르니 확인해서 넣어주세요.

 

img 태그 중,

img를 블록요소를 변경하려고 display: block를 추가했습니다.

이게 왜냐면, img태그는 인라인요소이며 baseline이란 개념이 있습니다.

Hi, my Name is Skye

위 글을 봐도 아시다시피, y가 라인 밑으로 나갔습니다. 이런 라인은 baseline이라고 부릅니다.

모든 인라인요소가 다 baseline이 존재합니다.

img 태그도 baseline때문에 이미지 출력한 후 하단에 작은 공백이 생깁니다.

공백을 없애려고 해당 태그를 블록요소로 변경했습니다.

 

logo를 inner를 먼저 감싸주고 logo클래스 div를 inner 안에 담았습니다.

 

화면 비율이 100%일 때, 보시면 로고는 헤더부분의 왼쪽에 위치하지만, 완전히 붙어있지 않습니다.

화면을 극단적으로(500%) 확대해보면 로고가 브라우저 뷰포트 왼쪽 상단에 딱 붙어있습니다.

이걸 감싸주는 것을 inner로 했습니다.

 

inner css속성을 확인해보면, 너비와 높이는 별도 설명 필요없는 것 같습니다.

margin는 상하가 0이며 좌우는 auto값이니 가운데 정렬될 겁니다.

position속성은 자식요소인 logo가 배치해야되서 지정해준겁니다.

 

logo css 속성을 확인해보면, 높이는 75px로 지정했습니다.

이게 이미지 파일 자체가 75px이긴합니다.

혹여 또 뭐가 이상하게 찌그러질 수 있어서 지정하는 것이 좋습니다.

position속성은 고정이죠. 부모요소인 inner상대로 고정해서 그대로 있습니다.

더 자세히 보면, inner 상대로 상, 하, 좌 각각 0입니다. margin도 auto로 되어 있습니다.

즉, inner의 상, 하, 좌 방향에서 0인 지점을 만들어놓고 가운데에 배치하겠다는 겁니다.

 

 

서브메뉴

서브메뉴 중 주의해야할 점은 각 링크 중 | 가 연하게 보입니다.

또한 검색을 클릭시, 검색창이 늘어납니다.

각 링크에 focus하면 글 색상이 변합니다.

 

서브메뉴 부분 html 파일입니다.

a태그 중 링크를 아직 확정되지 않았으면  두 가지 방법으로 표시할 수 있습니다.

1. # 2. javascript:void(0)

2번째 방법을 추천합니다.

#을 사용해도 되기는 하는데 브라우저마다 조금씩 변화가 있어서 임시로 사용할 것이면 딱히 상관없습니다.

 

서브메뉴 css 파일입니다.

menu 클래스인 ul 태그는 폰트들 설정해놓고 flex로 수평으로 정렬해줍니다.

li의 position속성은 아래 가상요소선택자의 배치때문에 적어둔겁니다.

 

li::before에서 바로 | 짝대기를 넣어주는 겁니다.

content속성은 필수적으로 넣어야하는 겁니다. 값이 없으면 비어두세요.

너비와 높이는 짝대기가 block요소의 속성을 지니기때문에 설정해 둡니다.

배경색과 배치속성은 따로 설명 안 해도 이해할 것 같으셔서 생략하겠습니다.

 

첫번째 짝대기가 숨겨야 하니까 first-child에 display:none으로 설정했습니다.

 

a 태그의 속성들 중 padding을 넣었습니다.

a태그는 인라인요소라 선택할 수 있는 부분이 글의 길이와 높이인 영역입니다.

하지만 사용자가 글의 옆에 부분에다 클릭할 수 있어서 외부 여백(padding)을 추가한 겁니다.

 

마지막으로 a태그에 마우스를 올리면 hover로 색상 변경해줍니다.

 

검색

검색부분 html에서 google material icons를 사용했습니다.

 

css에서 search 클래스의 position은 하단 icon을 위해 지정해준겁니다.

 

input에서 기본적인 박스 outline이 검정색입니다. 저는 초록색을 원해서 outline: none을 넣었습니다.

transition는 focus때문에 좀 더 부드럽게 변화하려고 넣어준겁니다.

 

icons에도 transition을 넣었습니다.

이거는 더 밑에 보시면 search클래스가 focused가 될 때 투명도가 0으로 천천히 변경될 겁니다.

이거는 js파일 부분에서 따로 설명해드리겠습니다.

 

기타 부분은 css 굳이 설명 안 해도 될 것 같습니다.

 

search 클래스에 속한 두 요소는 input창과 icon였습니다.

.search에 클릭하면 input창에 focus를 하라고 이벤트 추가했습니다.

그럼 클릭한 후 input창이 천천히 늘어나는 시각효과도 생기겠죠.

 

input창에 focus될 때, .search 클래스에 focused 클래스를 추가하며,

해당 input창에 통합검색인 placeholder속성도 넣었습니다.

 

focus의 반대가 blur입니다.

input창에서 더이상 focus가 안 되면 focused클래스를 지우고,

placeholder 값도 비어있는 걸로 했습니다.

 

기본적으로 다 완료되었습니다.

위치 배치 및 배경색은 조금만 더 손 보면 되는 부분이라

따로 안 적어두겠습니다.