이미 예전에 스타벅스 클론 코딩을 한 번 했었는데 본격적으로 JS 강의가 어려워질 것 같아서, 그 전에 복습 겸 강의만 들으면서 기록을 따로 해두려고 한다.
코드
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Starbucks Coffee Korea</title>
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
<link rel="stylesheet" type="text/css" href="./css/main.css" />
</head>
<body>
</body>
</html>문자 인코딩(Character Encoding) 설정
문자가 인코딩되는 방식을 설정
<meta charset="UTF-8"/>UTF-8 : 초성, 중성, 종성으로 구분하여 문자를 작성(권장)
EUC-KR : 하나의 완성된 글자를 인식
뷰포트(Viewport) 렌더링 방식 설정
웹페이지가 화면(Viewport)에 표현되는 방식을 설정
모바일 환경에서 적용
<meta name="viewport" content="width=device-width, initial-scale=1" />width=device-width : 화면의 가로 너비를 각 디바이스(Device)의 가로 너비와 동일하게 적용
initial-scale=1.0 : 화면의 초기 화면 배율(확대 정도)을 설정
user-scalable=no : 사용자가 디바이스 화면을 확대(yes)/축소(no)할 수 있는지 설정
maximum-scale=1 : 사용자가 화면을 확대할 수 있는 최댓값
minimum-scale=1 : 사용자가 화면을 축소할 수 있는 최솟값
Favicon(파비콘, favorites icon)
웹페이지를 나타내는 아이콘, 웹페이지의 로고를 설정
대부분의 경우 루트 경로에 favicon.ico 파일을 위치하면 자동으로 로딩하기 때문에 <link />를 작성할 필요가 없음
favicon.png 파일을 사용시 다음과 같이 <link />를 작성
파비콘 이미지는 루트 경로에 위치!
<!--<link rel="shortcut icon" href="favicon.ico" />-->
<link rel="icon" href="./favicon.png" />favicon.ico64 x 64 (px) 또는 32 x 32 또는 16 x 16favicon.png500 x 500 (px)
.ico 파일 제작
이미지를 업로드하면 손쉽게 .ico 파일 제작 가능
Reset.css
각 브라우저의 기본 스타일 초기화
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
프론트엔드 공부하는 사람