VSC 에서 ! + tab 을 누르면 기본적인 html구조가 나옴.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
이 문서는 html Living Standard 문서 라는 의미.
<html lang="en">
html태그는 HTML문서의 루트, 최상단 요소.
lang 속성을 통해 페이지의 주 언어가 무엇인지 설정 ex) lang="ko", lang="ko-KR"
<head>
기계가 식별할 수 있는 문서 정보 담는곳.
검색엔진을 위한 다양한 정보들이 담기는 곳.
meta
어떤 목적을 위해 만들어진 데이터
검색엔진은 메타정보를 살펴보고 다양한 정보를 가져감.
charset
문자 코드의 종류를 설정.
utf-8은 국제적인 코드 규약. 전세계적인 언어를 지원
viewport
width : 뷰포트의 너비를 제어. width=600 처럼 픽셀값으로 지정 가능.
initial-scale : 페이지가 처음 로드될때 확대/축소 수준을 제어. 최소 0.1 - 기본 1 - 최대 10
title
브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의. 텍스트만 포함(특수문자X)
link
현재 문서와 외부 리소스의 관계를 명시.
외부 스타일 시트, 폰트, 파비콘(웹페이지에 접속했을때 상단에 보여지는 아이콘)을 연결할 때 사용.
빈 태그, 속성만을 포함.
<!-- 스타일 시트 링크 -->
<link rel="stylesheet" href="style.css">
<!-- 폰트 링크 -->
<link rel="stylesheet" href="font.ttf">
<!-- 파비콘 링크 -->
<link rel="shortcut icon" href="favicon.ico">
<body>
사용자에게 보이는 영역. 몸통.
'HTML&CSS > HTML' 카테고리의 다른 글
| HTML(6) 표(table) (0) | 2023.08.19 |
|---|---|
| HTML(5) form (0) | 2023.08.19 |
| HTML(4) 태그 종류 (0) | 2023.08.19 |
| HTML(3) 블록 레벨 요소와 인라인 레벨 요소 (0) | 2023.08.19 |
| HTML(1) 기본 (0) | 2023.08.19 |