html 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>App</title>
</head>
<body>
</body>
</html>DTD | Document Type Declaration
브라우저에게 html의 형식이 가장 최신 웹 표준인 "html 5" 임을 알리는 태그로 <!DOCTYPE html>로 작성한다.
meta
meta 태그를 작성할 때에는 반드시 name과 content 속성의 값을 지정해 주어야 한다. name에는 meta data의 종류를, content에는 그에 해당하는 값을 작성한다.
viewport는 화면 사이즈, 즉 웹 사이트를 이용하고 있는 디바이스의 화면 사이즈를 말한다. meta 태그에 viewport가 없으면, css에서 작성한 반응형 디자인이 아무런 소용이 없다. 이 외에도 다양한 meta data를 입력할 수 있다.
<meta name="author" content="HyeonJurassic">
<meta name="keywords" content="웹 페이지의 키워드를, 여러개, 작성할 수 있다">
<meta name="description" content="웹 페이지에 대한 설명을 작성한다">+) meta 데이터의 title과 description은 SEO에 도움이 된다.
html
html 문서의 root 태그이다. html 태그는 자식 요소로 head와 body 태그만을 가질 수 있다.
head
head 태그에는 html 문서에 대한 meta data를 작성한다. +) body 태그에는 사용자에게 보여줄 data를 작성한다.
title | html 문서의 제목, 즉 브라우저 탭의 제목이 된다. SEO에 중요한 역할을 한다.
link | html에 css 파일을 첨부할 때, font를 연결할 때 사용된다.
<link
href='https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css'
rel='stylesheet'
type='text/css'
>
style | style 태그를 작성하면, 해당 코드 내부에서 css 코드를 작성할 수 있다. html 문서의 성격을 고려해 보면, 굳이 사용할 필요가 없다는 결론.
script | html 문서 내에서 javascript 파일을 첨부할 때 사용할 수 있다. 또는 해당 코드 내부에서 js 코드를 작성할 수 있다.
'Study > HTML' 카테고리의 다른 글
| Sectioning Elements (0) | 2022.05.10 |
|---|---|
| Text | abbreviation, pre-formatted, code etc (0) | 2022.05.06 |
| Media | Image, Audio, Video (0) | 2022.05.06 |
| Table (0) | 2022.05.06 |
| Form (0) | 2022.05.06 |
