KDT 5th 웹개발자 입문 수업 8일차

주말 간 헤더를 세 개의 사이트(인프런과 청년몽땅정보통, 투썸플레이스)에 만들어 보면서 그래도 좀 실력이 늘었을까 싶다.

완벽하게 모작하지는 못했지만(아직 자바스크립트 활용법을 모름..) 모양만 대애충 ...

오늘부턴 스타벅스 페이지를 클론 코딩 한다고 하신다!

 

스타벅스 홈페이지 클론 코딩 - 1

 

1. 문자 인코딩 설정

<meta charset = "UTF-8">

- UTF-8 : 초성, 중성, 종성으로 문자를 구분하여 작성 (ex. ㄱ, ㅏ, ㅇ, ㅇ, ㅏ, ㄴ,...)

- EUC-KR : 하나의 완성된 글자를 인식 (ex. 강, 안, ...)

 

2. 뷰포트 렌더링 방식 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

- width=device-width : 화면의 가로 너비를 각 디바이스의 가로 너비와 동일하게 적용

- initial-scale=1.0 : 화면의 초기 화면 배율(확대 정도)를 설정

- user-scalable=no : 사용자가 디바이스 화면을 확대(yes)/축소(no)할 수 있는 여부

- maximum-scale=1 : 사용자가 화면을 확대할 수 있는 최댓값

- minimum-scale=1 : 사용자가 화면을 축소할 수 있는 최솟값

 

3. Favicon은 Favorite Icon으로, 

탭에 보이는 홈페이지의 아이콘이다.

.ico 파일로 되어 있으며, html 파일과 동일한 위치에 둬야 자동 적용된다.

물론, 고화질의 파비콘을 위해선 <link rel="icon" href="icon.png"> 형식으로 별도로 추가도 가능하다.

 

 

4. 절대 경로

최상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 기입하는 방식

하나의 파일당 하나의 고유한 절대 경로를 보유한다.

 

5. 상대 경로

현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성

[ 상대 경로 접근 방법 ]

1) 최상위 디렉토리(root):  /

2) 현재 디렉토리:  ./

3) 상위 디렉토리:  ../

 

6. Open Graph(OG) + Twitter card

웹 페이지가 SNS로 공유될 때 우선적으로 활용되는 정보를 지정해주는 것

og -> 카카오톡 공유 시

twitter  -> 트위터 공유 시

 

Open Graph의 경우 property와 content가 1:1 대응하는 방식으로 써줘야 한다.

<meta property="og설정" content="내용">

[og]:type  - 페이지 유형

[og]:site_name - 속한 사이트의 이름 / twitter:site 만 다르고 나머진 동일함

[og]:title - 페이지의 이름(제목)

[og]:description - 페이지의 간단한 설명

[og]:image - 페이지의 대표 이미지 주소(URL)

[og]:url - 페이지 주소(URL)

 

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

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

 

seo 이미지는 search engine optimization 의 약자로 공유되는 이미지는 너무 크기가 크면 안되므로 작은 사이즈로 이뤄져 있음

 

7. netlify

깃헙에 올라간 repository를 서버에 무료로 올려서 볼 수 있게 해주는 사이트

https://www.netlify.com/

Develop and deploy websites and apps in record time | Netlify

서버가 메인 html을 'index.html' 이라고 짓지 않으면 찾을 수 없음

 

7. Font family

크롬 : 기본 serif 계열 

사파리 : 기본 sans-serif 계열

같이 브라우저마다 기본 폰트가 다르므로 body 선택자에 font-family를 지정해준다.

구글 폰트 https://fonts.google.com/

 

 

8. 구글 아이콘 사용하기

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

 

Fill : 음각/양각 여부

Grade : 작은 범주의 두께, 세부 두께 조정 가능

Optical size : 광학 크기 기본값 설정(광학적으로 똑같아 보이도록 설정)

 

설정이 끝나면, link로 일단 CDN을 연동해주고

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

css 파일에 style을 지정해줄 필요가 있다.

<style>
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
</style>

내장 방식이 아니라면 css 파일에 <style> 태그를 지우고 써준다.

 

자동적으로 아이콘을 사용할 수 있는 태그는 아래와 같이 class를 포함하고 있다.

<span class="material-symbols-outlined">
search
</span>

font awesome 보다 좀더 자세한 커스터마이징이 가능

 

 

9. Common CSS 설정

 

9-1. 홈페이지의 최대 크기(이 이상 늘어나지 않는 영역)을 지정해준다. (.inner 클래스)

중앙정렬인 margin : 0 auto; 와 width(1100~1200px)를 지정

 

9-2. body 태그 설정

폰트 관련 기본 설정

font-size(16px), font-weight(400), line height(1.4~1.6) 등 기본 설정

 

9-3. a태그 초기화

text-decoration을 none 해주기

 

/*ICONS*/
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/* COMMON */
body {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  font-family: 'Nanum Gothic', sans-serif;
}
a {
  text-decoration: none;
}
.inner {
  width: 1100px;
  margin: 0 auto;
}

 

9-4. img 태그는 inline 이다.

그러므로 글자 취급 받으므로 영어 같은 문자에는 baseline이란게 존재한다.

의미 없는 마진값이 생기므로 이미지 영역에 딱 맞지 않게 된다.

그러므로 미리 img에 display block으로 처리해준다.

 

10. 헤더 구성

로고 부분과 서브메뉴, 메인메뉴로 나누어야 하므로

position으로 로고 위치를 잡아준 다음, menu 부분은 flex를 사용하여 지정해줘야한다.

 

 

11. 로고 수직 중앙 정렬

logo 클래스 안에 position absolute와 inner 클래스에 position relative를 주고

top:0 bottom:0을 준 다음 margin : auto와 height를 주면 수직 중앙 정렬이 가능하다.

 

12. 스타벅스 헤더는 스크롤을 내려도 헤더가 계속 고정되어 있다.

그러므로 position fixed를 사용해주고 컨텐츠의 위에 계속 보일 필요가 있으므로 z-index를 1로 설정해준다.

 

 

13. 헤더 안 서브 메뉴의 위치 잡기

로고에서 그랬듯 inner가 relative 이므로 sub-menu 클래스 또한 absolute로 위치를 잡아준다.

그다음 flex를 사용하여 수평으로 재배치를 시켜주고(바로 아래 자식 태그들에게만 통하게 되므로)

 

input 태그 안의 돋보기의 경우도 position absolute를 사용하여 위치를 잡아준다.

 

서브 메뉴의 사이에 존재하는 | 모양은 첫번째 li 자식을 제외한 나머지 li에 ::before로 content:""를 넣고 position absolute로 위치를 잡아준다. 따로 display block을 사용해서 크기값을 지정해주면 완성

 

 

14. 메인 메뉴 만들기

메인 메뉴의 컨텐츠 전 헤더부분 또한 position absolute와 display flex를 사용하여 만들어준다.

메인 메뉴의 컨텐츠는 hover 됏을 때 계속 보여야 하므로 :hover는 li의 .item 클래스에 줄 필요가 있다.

 

메인 메뉴의 컨텐츠 안 목록을 나타내기 위해선 position absolute가 아닌, position fixed를 주어야 부모 요소를 기준으로 width 100% 를 뷰포트 기준으로 가져올 수 있다.

기본적으로 컨텐츠 안 목록은 display none으로 해줘야하는데, .item이 hover 되었을 때 display block 해주면 된다.