스타벅스 클론(1) - 시작하기

오늘부터 스타벅스 홈페이지 클론 포플을 만들어보겠습니다.

프젝 진행할 때 작업 순서대로 캡처해서 올릴 예정이고

어려운 부분이나 주의해야할 점은 표시하겠습니다.

 

프로젝트 시작 준비를 해보겠습니다.

기본적으로 lang="ko", 언어를 ko로 변경하고

title부분에도 프젝맞게 변경했습니다.

그리고 중요한 것 작업하기 전에 css 초기화하기!

 

왼쪽 폴더 보면 이번 프젝 필요한 모든 이미지, 그리고 파비콘 파일들 준비했습니다.

파비콘

favicon은 위 이미지처럼 탭에 나타난 로고입니다.

일반적으로 favicon.ico파일과 html파일이 같은 폴더, 즉 루트폴더 안에 있으면

html파일 head부분에 링크 따로 걸 필요없이 바로 적용이 됩니다.

 

간혹 ico파일 해상도가 떨어지면 png파일로 대체해야 되는데

이때 head부분에 링크를 걸어서 연결해줘야 됩니다.

rel는 icon으로 지정합니다.

 

css 파일도 만들고 연결해줍니다.

 

모든 빈 태그들을 다 /를 추가해서 더 엄격한 문법을 지켜줍니다.

html5 문법이 엄격하지 않아서 안 넣어도 되긴 합니다.

 

오픈 그래프(The Open Graph protocol)

웹페이지가 소셜 미디어(페이스북, 카톡등)로 공유될 때 우선적으로 활용되는 정보를 지정합니다.

사용시, title태그와 link태그 사이에 넣으면 됩니다.

오픈 그래프 기본 정보

오픈 그래프 속성 참조

 

트위터 카드(Twitter Cards)

웹페이지가 소셜 미디어(트위터)로 공유될 때 우선적으로 활용되는 정보를 지정합니다.

사용시, title태그와 link태그 사이에 넣으면 됩니다.

트위터 카드 기본 정보

트위터 카드 속성 참조

 

구글 폰트(Google Fonts)

페이지에서 사용할 폰트를 지정할 수 있습니다.

폰트용량이 생각보다 큽니다. 무작정 다 가져온 것보다,

필요한 것만 가져오세요.

예를 들어, 굵기 400와 700은 가장 많이 사용됩니다.

해당 굵기까지 선택하고 불러오세요.

그래야 페이지 최적화할 수 있습니다.

 

사용시, css파일 연결링크 전으로 삽입하는 것을 권장합니다.

구글 폰트

구글 폰트 참조

 

Google Material Icons

구글에서 제공하는 머터리얼 아이콘을 무료로 사용할 수 있습니다.

예를 들면, 검색 아이콘입니다.

실무에서 매번 디자이너에게 요청할 수 없으니 구글에서 제공한 것으로 대체하는 것도 편합니다.

사용시, css파일 연결링크 전으로 삽입하는 것을 권장합니다.

Google Material Icons

Google Material Icons 참조

버전이 계속 업그레이드하고 있어서 사이트안에 Developer guide도 참조해서 사용하세요.