https://github.com/ParkYoungWoong/starbucks-vanilla-app

1.

이미지를 github으로부터 가지고 왔다.

live server을 키면 위와 같이 되어 있다. 설정을 안해주어도 root에 favicon.ico가 있으면 이렇게 된다.

만약 고해상도로 내가 이미지를 지정하고 싶으면 다음과 같이 작성하자

reset.css cdn을 검색해서 html을 초기화해주자
https://www.jsdelivr.com/package/npm/reset-css

우리 css 파일을 css 폴더안에 만들어주자.(main.css)

2.

오픈그래프를 설정해주자

• og:type: 페이지의 유형(E.g, website, video.movie)
• og:site_name: 속한 사이트의 이름
• og:title: 페이지의 이름(제목)
• og:description: 페이지의 간단한 설명
• og:image: 페이지의 대표 이미지 주소(URL)
• og:url: 페이지 주소(URL)

뿐만아니라 트위터카드라는 것도 존재한다.

가급적 위쪽에 넣어야 하지 때문에 title과 link사이에 넣어주자

3.

폰트가 브라우저에 따라서 크게 달라진다. 이것을 고정해주기 위해서 폰트를 입력해주자.

google fonts로 가서 nanum gothic을 사용하자
https://fonts.google.com/specimen/Nanum+Gothic?query=nanum#about

이때 폰트는 사이즈가 상당히 크기 때문에 가급적 하나의 종류만 사용하자

그래서 link 태그 부분을 그대로 가지고 오자

4.

특정한 이미지나 아이콘을 매번 디자이너에게 부탁하는 것은 쉽지 않다. 그래서 구글에서 특정 메터리얼 아이콘을 코드로 가지고 오자.

https://material.io/

Get Started를 눌러주자

그리고 쭉 내리다 보면 위와 같이 Web getting started부분이 밑줄처진것을 확인할 수 있다.

또다시 쭉 내리면 한줄짜리의 저것을 확인할 수 있다.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

다시 google material icons라고 검색해서 첫번째 페이지로 들어가지 지금은 사이트가 개편되었는지 google fonts 사이트에 함께 있다.

그래서 arrow의 코드를 복사해서 삽입해주자

그러면 위와 같이 로그인 이미지가 생긴것을 확인할 수 있다. 이 크기를 바뀌기 위해서는 style로 font-size를 지정해주어야한다.

5. 헤더

header 태그를 사용하자 특별한 기능이 있는 것은 아닌데 그냥 div에서 header영역을 지칭할 수 있는 것이다.

특정 class의 div 태그를 빠르게 만들기 위해 .inner이라는 방식으로 작성하고 enter을 누르자

#333333의 폰트 컬러를 사용하지만 같은게 6개이니 3개로 줄일 수 있다.

margin: 0 auto;를 사용해서 inner 영역을 중앙에 놓아주자

그런데 이미지의 아래가 비어있다. 이건 이미지가 inline요소이기 때문이다. inline 요소는 곧 글자이기 때문에 y와 같이 아래로 긴 요소를 다루기 위해 위와 같이 아래쪽에 약간의 공간이 생기게된다.

이를 해결하기 위해서 다음과 같이 작성하자

이미지를 블록으로 처리하겠다고 작성하니 이미지가 정확하게 맞추어지는것을 확인할 수 있다.

그래서 이부분은 우리가 공통으로 사용하는 부분이니 COMMON이라는 주석을 붙여주자.

로고의 위치 조절을 위해 위와 같이 작성하면

로고가 이상한 위치로 간다. 이것은 position absoulte 때문이다. 그래서 이것을 헤더의 중앙으로 맞추기 위해 부모 클래스인 inner에 position relative를 입력해주자

그럼 위와 같이 이미지가 어떻게 중앙에 배치될 수 있었을까? 그건 top, bottom, margin, position이 있기 때문이다.
position이 absolute이기 때문에 위치는 부모요소를 기준으로 작성되게 된다. 하지만 이때 부모요소의 position
top과 bottom으로 0이기때문에 logo가 들어가는 칸의 위와 아래 지점을 찍고
margin이 auto이기 때문에 자동으로 위치를 계산해준다.
그리고 이때 가장중요한것이 이미지의 height가 정확하게 지정이 되어야만 배치를 해줄 수 있다.

6.

헤더의 추가적인 작업을 해주자

먼저 검색바를 만들어주자

이렇게 생긴 아이콘을 가지고 왔다.

그 다음 메뉴들을 만들어주자.

만약에 주소가 준비되지 않았다면 그냥 #을 넣어주자. URL 해시는 CSS ID 선택자를 이용해 페이지 내 특정 위치로 이동할 수 있게해주다. 나중에 알아보자. 혹은 javascript:void(0)을 입력해주자. 이건 진짜로 아무기능도 없다.

잠시 logo를 보기 싫으니 display:none으로 해주자.

css 선택자로 모두다 정의해 놓고 시작하는 것도 좋은 방법이다. 이렇게 하지 않으면 나중에 헷갈릴 수 있다. 물론 익숙해지면 안해도 된다.
css 속성을 선택은 반드시 정확하게 우리가 사용하는 부분만 명시해주자.

위와같이 font를 작게 잡으면 사용자가 클릭할 수 있는 영역이 줄어든다. 이것을 늘려주기 위해서 padding과 dispaly를 입력해주자.

그렇게하니 block 속성이다보니 최대크기가 되었다.

또한 하이퍼링크는 자꾸만 밑줄이 처지기 때문에 이를 없애기 위해서 text-decoration:none으로 전역속성으로 넣어주자.

그리고 hover 가상 클래스도 추가해주어서 변화가 이루어지도록 만들어주자.

그리고 각 메뉴가 수평이 되도록 바꾸어주자.

그리고 각 성분마다 구분선이 있기 때문에 이역시 before 가상 요소선택자를 사용하자

해서 가상 요소선택자로 위와같이 우리가 가로줄을 놓아야하는 위치에 맞추어 css 코드를 짜주자.
position때문에 이 가로선은 block 요소가 된다. 그래서 display는 없애주자.

그런데 이렇게 하면 Sign In 앞에 구분선이 생기는 문제점이 있다.

그래서 이것을 first-child로 없애주자.

마지막으로 background-color을 다시 white로 바꾸어주고
font-family로 글자 폰트를 Arial 없으면 sans-serif가 되도록 만들어주자.

7.

이번에 검색바를 건들어보자. 이때 클릭시 파랑/검정 outline이 생기기 때문에 outline:none으로 없애주자.

이번에는 추가적으로 background-color, color, font-size, transition을 설정해주고

focus 가상클래스를 추가해주어서 크기가 커지도록 만들어주자.

돋보기의 위치도 정해주자. 이때 부모속성 search의 position도 relative로 만들어주자.

이번에 right:5px로 하면 위와 같이 된다. 이상하다. 이것을 위의 menu들과 일치시키어보자.

그래서 부모요소를 flex로 바꾸어주었다.

하지만 어째서인지 돋보기를 눌러도 바뀌지가 않는다. 이건 우리가 이미지를 클릭한거지 search input을 클릭한게 아니기 떄문이다. 그래서 이를 해결하기 위해 js파일을 만들어주어야한다.

그래서 js 파일을 js 폴더안에 main.js를 생성하고 index.html에 script도 추가해주자.

그래서 태그를 위와 같이 선택한다음 focus함수를 사용하면 제대로 늘어나는 것을 확인할 수 있다.

이번에는 이렇게 focus되었을때 focused class를 추가하고 속성중에 placeholder에 통합검색이라는 내용이 포함되도록 만들어주자.

문제는 한번 focus되고나면 이런식으로 바뀐다 ㅠ

그래서 blur되었을때 위와 같이 바뀌도록 새로운 EventListener을 추가해주자.

또한 돋보기도 없애주기 위해서 새로운 클래스를 추가해주고 transition도 추가해서 천천히 없어지도록 해주자.

이러한 메뉴가 우측정렬이 되도록 위치를 조절해주자.

마지막으로 logo도 띄어주면서 header부분을 바꾸어주자 이때 inner부분의 orange도 없애주자. 그러면 header을 완성했다.