프로젝트의 시작
- 프로젝트를 시작하기 위해 필요한 이미지 파일
- (출처: https://github.com/ParkYoungWoong/starbucks-vanilla-app)을 다운로드 받는다.
- 해당 파일은 위 깃허브 사이트에서 favicon.ico, favicon.png, imaegs 폴더를 압축한 것이다.
압축을 해제한 폴더를 VS ccde에서 열어서 프로젝트를 시작한다.
프로젝트 루트에 index.html 을 생성하여 기본 구조를 생성한다.
-
<html lang=”ko”>로 변경한다.
-
<title> 항목을 Starbucsk Coffee Korea로 변경한다.
-
스타벅스 클론 사이트 만들기 프로젝트 index.html 파일
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Starbucks Coffee Korea</title> </head> <body></body> </html>
파비콘(favorite icon) 사용하기
- live server로 브라우저에서 html 문서를 열어보면, 제목표시줄에 스타벅스 파비콘이 삽입 되어 있다.
- 브라우저는 사이트 루트에서 favicon.ico 파일이 있는 경우 자동으로 브라우저 제목탭에 표시한다.
- 파비콘은 다른 이름으로 설정하면 안되고 반드시 favicon.ico 로 저장한다.
- 고해상도의 이미를 파비콘으로 사용하고 싶으면 다음 태그를 헤더에 삽입한다.
<link rel="icon" href="./favicon.png" />
CSS 초기화 하기
- 브라우저에서 reset css cdn을 검색하여 제일 처음 나오는 jsdeliver(https://www.jsdelivr.com/package/npm/reset-css) 사이트로 이동하여
- 인스톨 영역의 복사 아이콘을 클릭하고, Copy HTML을 선택하여 html을 복사한다.
- 프로젝트의 index.html 문서의 <title> 태그 하단에 복사한 내용을 붙여 넣는다.
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"> 하단에
<link rel=”stylesheet” href=”./css/main.css” /> 태그를 작성한다.
- ./CSS/main.css 링크를 ⌘(ctrl)를 누른 상태로 마우스를 클릭한다.
- 해당 파일이 없어서 이동 할 수 없다는 메시지가 나오면
- “Create File”을 선택하여 main.css파일을 생성한다.
- main.css 파일이 정상 동작 하는 지 확인하기 위해서 index.html 파일의 body 태그 내에 hello world!를 삽입하고 다음과 같이 main.css 파일을 작성하여 live server 로 확인한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starbucks Coffee Korea</title>
<!-- 1. favicon 파일 명시 -->
<link rel="icon" href="./favicon.png" />
<!-- 2. CSS reset -->
<link
rel="stylesheet"
href="<https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css>"
/>
<!-- 3. main.css 연결/생성 -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
Hello world!!
</body>
</html>
- main.css 파일
body {
color: red;
}
-
live server 로 확인하기
