☕️Starbucks Site, sign-in

이 프로젝트는 스타벅스 홈페이지를 클론코딩한 프로젝트 입니다. HTML, CSS, JS를 사용해서 구현하였습니다.

완성본

프로젝트 소개

• 이 프로젝트는 웹 개발 학습의 기초를 다지기 위해 진행했습니다.
• 기존의 스타벅스 홈페이지의 기능와 디자인을 최대한 재현하려 노력했습니다.

학습 내용

• HTML5

HTML5 에 대해 이해하고 각 요소의 태그들의 의미를 파악했습니다. 구조적으로 최대한 시멘틱한 요소를 사용하기 위해 노력했습니다.

twitter card 와 Open Graph 를 이용한 소셜미디어 공유 정보

  <meta property="twitter:card" content="summary" />
  <meta property="twitter:site" content="Starbucks" />
  <meta property="twitter:title" content="Starbucks Coffee Korea" />
  <meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="twitter:image" content="./images/starbucks_seo.jpg" />
  <meta property="twitter:url" content="https://starbucks.co.kr" />

  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Starbucks" />
  <meta property="og:title" content="Starbucks Coffee Korea" />
  <meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="og:image" content="./images/starbucks_seo.jpg" />
  <meta property="og:url" content="https://starbucks.co.kr" />

twitter card 와 Open Graph를 이용한 소셜미디어 공유 정보에 대해 공유되는 내용을 공부하였으며, 시멘틱한 태그의 사용과, meta 태그의 사용으로 검색엔진최적화에 기여할 수 있다는 것을 공부했습니다.

• CSS

CSS의 선택자의 종류, 우선 순위, ID, Class 선택자를 주로 사용했고, Flexbox를 사용해서 웹페이지의 레이아웃과 디자인을 구성하는데 사용하였습니다.

• JavaScript

CDN 방식을 이용한 Swiper, gsap, scrollMagic을 사용하였습니다. DOM 조작, 이벤트핸들러, 내장객체 등 Javascript의 기본적인 내용을 배우고 활용했습니다.

• 배포

Netlify를 통해 정적인 웹사이트 배포하는 방법에 대해 공부했습니다.