HTML
😮 <head> 부분
- 뼈대 만들기
- SEO 작업
- OG 작업
- 구글 폰트 셋업 ( 폰트 설정)
- 폰트 어썸 셋업 (아이콘)
- 폴더 구조 잡기 (css, js 연결)
✅ 사이트에 사용할 파비콘이나 이미지 작업해서 이미지 파일에 넣기
[seo&og 작업]
- seo metadata : description, author etc
- og metadata : title, type, url, image etc
[구글 폰트 셋업]
- 구글 폰트에서 원하는 폰트와 사이즈를 지정해서 복붙
- CSS 파일에 연결
[폰트 어썸 셋업]
- 셋업 코드 복붙
- 필요할 때 아이콘 가져와서 사용
[폴더 구조 잡기]
- css 폴더 만들기 - 폴더 안에 CSS 파일 만들기 (style.css)
- src 폴더 만들기 - 폴더 안에 Javascript 파일 만들기(main.js)
- html 파일과 css 파일 링크 연결
- html 파일과 js 파일 링크 연결
✅ 마무리로 git 커밋
<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" />
<!-- SEO -->
<title>CHOWOL</title>
<meta name="description" content="우리의 한계를 뛰어넘는 초월의 삶" />
<meta name="author" content="JIEUN LEE" />
<meta name="keyword" content="CHOWOL" />
<!-- Open Graph-->
<meta property="og:title"content="초월의 삶" />
<meta property="og:type" content="website" />
<meta property="og:url" content="배포후 생성된 URL" />
<meta property="og:image" content="배포후에 생성된 이미지" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Font Awesome-->
<script
src="https://kit.fontawesome.com/e604821901.js"
crossorigin="anonymous"
></script>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Javascript-->
<script src="src/main.js" defer></script>
</head>
https://mateam.net/html-escape-characters/
HTML Escape Characters: Complete List of HTML Entities
In this article, you can find the complete list of the most useful HTML escape characters and cases when escapes should not be used.
mateam.net
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
head 태그에는 무엇이 있을까? HTML의 메타데이터 - Web 개발 학습하기 | MDN
HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 <title> 같은 페이지나, CSS의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면), 파비콘(favicon), 그리고 다른 메타데이터(작성
developer.mozilla.org
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
'공부 모음집 > 실습 기록' 카테고리의 다른 글
| [👩🏻💻 연습] 반응형 Navbar 만들기 (+ 미디어쿼리, 햄버거 메뉴 토글 버튼, 자바스크립트 적용) (0) | 2023.10.21 |
|---|---|
| [레이아웃] Layout 유형 (1) (0) | 2023.10.20 |
| [👩🏻💻 연습] display: flex/ position: absolute/ transform: translate (1) | 2023.10.19 |
| 🙅🏻♀️ [CSS] z-index로 앞뒤로 보내기 (+parallax 효과) (0) | 2023.10.11 |
| [👩🏻💻 연습] 버튼 만들기: 마우스 Hover 효과 + 마우스 Cursor 조절하기 🐭🖱️ (0) | 2023.10.11 |