[카카오 테크 캠퍼스 2기] 1단계 1주차 WIL - 스타벅스 예제 클론하기(1)

🍪 카카오 테크 캠퍼스 2기

[카카오 테크 캠퍼스 2기] 1단계 1주차 WIL - 스타벅스 예제 클론하기(1)

kangkibong 2024. 4. 15. 18:57

🏁 스타벅스 예제 시작하기

favicon.ico

프로젝트 루트경로에 favicon.ico있으면 브라우저가 자동으로 인식하여 브라우저 탭의 아이콘으로 설정한다.

reset.css

브라우저의 기본 스타일을 초기화 하기 위한 css코드이다.

reset.css을 구글링하면 다양한 브라우저 초기 스타일링을 제거하는 코드들을 찾아볼 수 있다.

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.

www.jsdelivr.com

head 태그 내부에 해당 cdn을 추가하여 기본적인 브라우저 초기 스타일링을 제거한다.

<head>
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css"
  />
</head>

Open Graph

웹 페이지가 소셜 미디어(페이스북 등)에 공유가 될 때 우선적으로 활용되는 정보들을 지정할 수 있다.

추가적인 정보들은 meta 태그를 통해서 정보를 줄 수 있다.

<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

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

<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" />

Google Fonts

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

구글에서 제공하는 Google Fonts는 폰트들 중에서 원하는 무료 폰트를 검색하고 임베드해서 사용할 수 있다.

주의할 점은 폰트의 용량이 생각보다 크기때문에 꼭 사용해야할 폰트와 굵기를 잘 명시해서 임베드해야한다.

또한 구글폰트 이외에 다른 폰트들은 저작권이 있을 수 있기 때문에 라이센스를 잘 확인해서 사용해야한다.

먼저 원하는 폰트를 검색한다.

나눔고딕 사용을 위해 위와 같이 검색하였다.

이후 원하는 폰트의 굵기를 설정한 후 Get Font를 클릭한다.

이후 Get embed code를 클릭한다.

웹에서 사용할 것이기 때문에 위에 있는 link 태그들을 복사하고 폰트 적용을 위해 css 파일에 font-family를 설정해준다.

본인은 body 태그 안에 있는 모든 폰트들을 나눔고딕으로 설정할 수 있도록 body를 셀렉터로 하여 모든 폰트를 나눔 고딕으로 설정되도록 작성하였다.

나눔고딕 폰트가 잘 적용된 것을 확인할 수 있다.

Google Material icons

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

fonts.google.com

자주 사용하는 아이콘은 디자이너의 요청할 필요 없이 기본적으로 Google material icons에서 제공하고 있다.

단순하게 코드를 통해서 아이콘을 삽입할 수 있기 때문에 매우 간편하다.

스타벅스 클론 예제에서 업로드 아이콘을 사용할 것이기 때문에 “upload”를 검색하였다.

upload 아이콘을 클릭하면 Google Fonts와 마찬가지로 임베드코드가 표시되며 아이콘 사용을 위한 위한 태그가 제공된다.

임베드 코드를 head 태그 내부에 작성하고 아이콘 사용을 위해 body 태그 내부에 span 태그를 통해 클래스를 지정하고 upload을 텍스트로 작성하여 upload아이콘을 출력하였다.

만약 upload가 아닌 다른 아이콘을 사용할 경우, 텍스트 부분에 원하는 아이콘의 이름을 작성하면 해당 아이콘이 출력되는 것도 확인할 수 있었다.

upload와 search 아이콘이 잘 나오는 것을 확인할 수 있었다.

1️⃣ 헤더와 드롭메뉴 - 로고

`header` 태그의 사용 & `a` 태그를 통한 페이지 이동

div혹은 span을 가지고 모든 구조를 설계하게되면 해당 구조가 어떤 역할을 하는지 알 수 없다.
기능적으로 역할을 수행하지 않지만 header의 의미를 가지도록 하기 위해 header 태그를 사용한다.
보통 웹사이트에서 로고를 클릭하면 메인페이지로 이동한다.
이를 위해 a태그 속성 src를 통해 절대경로 /을 입력하고 로고를 클릭하면 index.html 페이지로 이동할 수 있다.

<header>
  <div class="inner">
    <a href="/" class="logo">
      <img src="./images/starbucks_logo.png" alt="STARTBUCKS" />
    </a>
  </div>
</header>

공통 부분 스타일링

완전한 검정색 대신 어두운 회색을 선호한다.(#333)
기본적인 font-size와 font-weigh는 16px, 400이므로 작성을 안해도 상관없다.
하지만 명시적으로 나타내기 위해 값을 작성하였다.

가로, 수직을 기준으로 중앙 배치하기

margin: 0 auto; 를 사용하면 요소를 가로 기준으로 중앙 배치를 할 수 있다.
logo를 수직 중앙 배치하기위해 logo의 position을 absolute로 지정하고 부모 요소를 지정해야하기 때문에 inner의 position을 relative로 설정한다.
이후 logo를 top, bottom을 0으로 지점을 설정하고 이를 기준으로 margin: auto 0; 을 주여 자동으로 수직 여백을 주도록 설정한다. 추가적으로 요소의 너비 또한 (width, height)를 명시해주어야 한다.

/* COMMON */
body {
  color: #333;
  font-family: "Nanum Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

img {
  display: block;
}

header .inner {
  position: relative;
  width: 1100px;
  height: 120px;
  margin: 0 auto;
  background-color: orange;
}

header .logo {
  height: 75px;
  position: absolute;
  top: 0; 
  left: 0;
  bottom: 0;
  margin: auto;
}

결과

1️⃣ 헤더와 드롭메뉴 - 서브 메뉴

페이지 이동 임시로 막기

링크는 준비가 안되어 있는데 특정 페이지를 연결할 예정이라면 a태그에 src속성에 #(해쉬)를 넣거나 javascript:void(0)을 넣는다.

<header>
  <div class="inner">
    <a href="/" class="logo">
      <img src="./images/starbucks_logo.png" alt="STARTBUCKS" />
    </a>
    <div class="sub-menu">
      <ul class="menu">
        <li><a href="/signin">Sign In</a></li>
        <li><a href="javascript:void(0)">My Starbucks</a></li>
        <li><a href="javascript:void(0)">Customer Service & Ideas</a></li>
        <li><a href="javascript:void(0)">Find a Store</a></li>
      </ul>
      <div class="search">
        <input type="text" />
        <span class="material-symbols-outlined"> search </span>
      </div>
    </div>
  </div>
</header>

스타일링 안전성 챙기기

상위 선택자를 명시하지 않으면 자주 사용하는 클래스로 선택 될 수 있기 때문에, 선택자를 작성할때는 부모의 클래스나 특정 요소를 명시적으로 작성하면 안전하게 스타일링 가능하다.
추후에 css 전처리도구인 scss를 학습하게 되면 중복되는 부분을 해결할 수 있다.

각 서브메뉴 구분선 넣기

각각의 서브메뉴마다 구분선을 주기 위해 ::before 가상요소 클래스를 통해 구분선을 설정할 수 있다.
position을 absolute 혹은 fixed로 지정하면 자동으로 block요소로 바뀌므로, 따로 명시하지 않아도 된다.
첫번째 서버메뉴의 구분선은 제외해야하므로 :first-child 가상클래스로 첫번째 요소를 지정하고 ::before 가상 요소 클래스를 통해 display를 none으로 설정하여 제거한다.

서브메뉴 UX 고려하기

서브 메뉴 클릭의 정확성을 높이기 위해 padding을 넓혀준다.
하지만 서브메뉴는 a태그인 inline 요소이기 때문에 상하여백을 줄 수 가 없다.
때문에 display를 block으로 지정하여 상하 여백을 줄 수 있도록 설정한다.
a태그의 기본 스타일인 밑줄을 제거하려면 text-decoration을 none을 주면 제거할 수 있다.
모든 a태그의 밑줄을 제거하기 위해 a태그를 선택자로 text-decoration을 none으로 설정한다.
이전처럼 밑줄이 있다면, 다른 페이지로 이동할 수 있는 것으로 예측할 수 있지만, 제거되었으니 :hover 가상 클래스를 통해 해당 서브메뉴를 포인터로 올렸을 때 폰트 색깔을 바꿔주는 효과를 준다.

header .sub-menu ul.menu {
  font-family: Arial, sans-serif;
  display: flex;
}

header .sub-menu ul.menu li {
  position: relative;
}

/* 각 서브메뉴 마다 구분선을 추가한다. */
header .sub-menu ul.menu li::before {
  content: "";
  /* display: block; */
  width: 1px;
  height: 12px;
  background-color: #e5e5e5;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* 첫번째 서브메뉴의 구분선을 제거한다. */
header .sub-menu ul.menu li:first-child::before {
  display: none;
}

header .sub-menu ul.menu li a {
  display: block;
  font-size: 12px;
  padding: 11px 16px;
  color: #656565;
}

header .sub-menu ul.menu li a:hover {
  color: #000;
}

결과

✍️ 소감

이전에 독학하면서 배웠던 내용들을 다시 되새기는 느낌이었다.

전체적으로 어려운 부분은 없었지만, position: absolute를 이용한 수직 중앙 배치 부분에서 어려움을 겪었다.

요소의 너비를 명시하고 top, bottom, right, left로 지점을 설정하여 margin 속성을 통해 상하좌우에 대한 여백을 설정하면 수직, 수평을 기준으로 배치가 가능하다는 것을 알게 되었다.