파비콘(favorite icon) 이란?
<!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.0">
<title>내 안에 숨어있는 직업캐 찾기!</title>
<link rel="icon" href="favicon.png">
</head>
<body>
</body>
</html>
보통 루트경로에있는 ico 파일을 찾아서 가장 먼저 사용을 하게 되어있고,
가끔 아이콘을 찾아올 수 없는 경우가 있으니 png 파일을 준비해 link 코드를 활용하여 강제로 아이콘을 삽입.
<title>내 안에 숨어있는 직업캐 찾기!</title>
Reset.css
브라우저의 기본 스타일을 초기화하는 법
웹 브라우저는 굉장히 다양해서 화면에 출력되는 글씨의 간격, 크기 등등이 다르게 출력된다.
각 브라우저가 제공하는 css 부분이 다를 수 있기때문에 이 부분들을 해결하기 위해 초기화를 시켜준다.
https://www.jsdelivr.com/package/npm/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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
Web Fonts
페이지에서 사용할 Pretendard 폰트를 가져오도록 지정
https://github.com/orioncactus/pretendard
GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ
어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform - GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative
github.com
index.html 링크 추가
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css" />
<link rel="stylesheet" href="./css/common.css">css - commmon.css 파일생성
body {
font-family: "Pretendard Variable",sans-serif;
}'일단 해보는 코딩 > Project' 카테고리의 다른 글
| [3일차] MBTI 테스트 프로그램만들기 (0) | 2023.05.10 |
|---|---|
| [1일차] vscode 세팅부터 MBTI 테스트 프로그램만들기 (0) | 2023.04.26 |
| [Java Script] 계산기 프로젝트(2) (0) | 2022.07.07 |
| [Java Script] 스톱워치 프로젝트(1) (0) | 2022.07.07 |