<!DOCTYPE html>
<html lang="ko">
<!-- 태그는 여는 태그와 닫는 태그로 이루어져 있음, 닫는 태그가 없는 요소도 존재함 -->
<!-- 속성명, 속성값 -->
<!-- 속성명과 속성값이 동일한 경우에는 생략이 가능함 -->
<head>
<!-- meta 요소, 해당 문서 혹은 애플리케이션의 metadata를 담는 요소 -->
<!-- charset, 문자 인코딩을 어떻게 할 것인지 결정-->
<!-- UTF-8, 전세계 언어 대부분을 지원 -->
<!-- EUC-KR, 한국어와 영문을 지원 -->
<!-- 사용하고 있는 DB의 charset과 맞춰서 작업 -->
<meta charset="UTF-8" />
<!-- viewport, 모바일 브라우저에서 화면을 어떻게 노출시킬지-->
<!-- viewport가 없으면 모바일 브라우저에서 화면 렌더링이 이상하게 동작 -->
<!-- 모바일 브라우저 = 태블릿 PC 포함 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- SEO에 도움을 주는 metadata -->
<meta
name="description"
content="메타데이터 요소에 대한 설명을 다루는 웹페이지입니다"
/>
<!-- Social Metadata: Facebook - Open Graph -->
<!-- Open Graph Protocol: -->
<meta property="og:title" content="메타데이터 타이틀" />
<meta
property="og:description"
content="메타데이터 요소에 대한 설명을 다루는 웹페이지입니다"
/>
<meta property="og:url" content="https://www.naver.com/" />
<meta property="og:image" content="https://www.naver.com/image" />
<!-- title 요소: 해당 애플리케이션의 제목 -->
<title>Document TITLE</title>
<!-- link 요소: 외부 문서 혹은 외부 콘텐츠와 이 콘텐츠를 연결해주는 요소-->
<!-- CSS를 연결할 때 주로 사용 -->
<link rel="stylesheet" href="./style.css" />
<!-- style 요소: 페이지 내에서 사용하는 CSS를 정의하는 요소 -->
<!-- 하나라도 많은 HTTP request는 성능 저하를 일으킬 여지가 있음 -->
<!-- style 요소를 사용하면 페이지 내에서 CSS를 사용하기 때문에 link 요소를 사용하여 CSS를 불러오는 것보다 성능이 좋음 -->
<!-- style 요소 내부에 렌더링에 꼭 필요한 스타일만 담아두면 성능 개선에 좋음 -->
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif;
}
</style>
</head>
<body>
Hello2
<p>Hello</p>
</body>
</html>
Backend Engineer