728x90
01. ๋ฌธ์ ํ์ ์ ์ ํ๊ทธ(Document Type Definition, DTD)
์ถ๋ ฅํ ์น ํ์ด์ง์ ํ์์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋ฌํ๋ ํ๊ทธ
- ๋ฌธ์์ ์ต์์์ ์์นํด์ผ ํ๋ค.
- ๋์๋ฌธ์๋ฅผ ๊ตฌ๋ณํ์ง ์๋๋ค.
HTML5
<!DOCTYPE html>HTML 4.01
<!DOCTYPE HTML PUBLIC "~//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">02. html ํ๊ทธ
- ๋ชจ๋ HTML ์์์ ๋ถ๋ชจ ์์์ด๋ฉฐ ์นํ์ด์ง์ ๋จ ํ๋๋ง ์กด์ฌํ๋ค. → ๋ชจ๋ ์์๋ html ์์์ ์์ ์์
- ๊ธ๋ก๋ฒ ์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ ์ง์
lang์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>๋ฌธ์ ํ์ดํ</title>
</head>
<body>
์ฝํ
์ธ
</body>
</html>03. head ํ๊ทธ
๋ฉํ๋ฐ์ดํฐ๋ฅผ ํฌํจํ๊ธฐ ์ํ ์์์ด๋ฉฐ ์นํ์ด์ง์ ๋จ ํ๋๋ง ์กด์ฌํ๋ ํ๊ทธ
- ๋ฉํ๋ฐ์ดํฐ - HTML ๋ฌธ์์
title,style,link,script์ ๋ํ ๋ฐ์ดํฐ๋ก ํ๋ฉด์ ํ์๋์ง ์๋ ๋ฐ์ดํฐ - ์ด ํ๊ทธ ๋ด์๋ ๋ฉํ๋ฐ์ดํฐ ์ด์ธ์ ํ๋ฉด์ ํ์๋๋ ์์๋ฅผ ํฌํจ์ํฌ ์ ์๋ค.
03-01. title ํ๊ทธ
- ๋ฌธ์์ ์ ๋ชฉ์ ์ ์ → ๋ธ๋ผ์ฐ์ ์ ํญ์ ํ์
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>์ฌ๊ธฐ๊ฐ ๋ฌธ์์ ์ ๋ชฉ</title>
</head>
<body>
์ฝํ
์ธ
</body>
</html>03-02. style ํ๊ทธ
- HTML ๋ฌธ์๋ฅผ ์ํ style ์ ๋ณด๋ฅผ ์ ์
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>์ฌ๊ธฐ๊ฐ ๋ฌธ์์ ์ ๋ชฉ</title>
<style>
body {
background-color: azure;
}
</style>
</head>
<body>
์ฝํ
์ธ
</body>
</html>03-03. link ํ๊ทธ
- ์ธ๋ถ ๋ฆฌ์์ค์์ ์ฐ๊ณ ์ ๋ณด๋ฅผ ์ ์
- ์ฃผ๋ก HTML๊ณผ ์ธ๋ถ CSS ํ์ผ์ ์ฐ๊ณํ ๋ ์ฌ์ฉํ๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>์ฌ๊ธฐ๊ฐ ๋ฌธ์์ ์ ๋ชฉ</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
์ฝํ
์ธ
</body>
</html>03-04. script ํ๊ทธ
- client-side JavaScript๋ฅผ ์ ์
src์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ ํตํด์ ์ธ๋ถ js ํ์ผ์ ๋ก๋ํ ์๋ ์๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>์ฌ๊ธฐ๊ฐ ๋ฌธ์์ ์ ๋ชฉ</title>
<script>
const likeButton = document.querySelector(".main-card button");
console.log('์๋
');
</script>
</head>
<body>
์ฝํ
์ธ
</body>
</html>03-05 meta ํ๊ทธ
description, keywords, author, ๊ธฐํ ๋ฉํ๋ฐ์ดํฐ ์ ์์ ์ฌ์ฉ๋๋ ํ๊ทธ
- ๋ฉํ๋ฐ์ดํฐ๋ ๋ธ๋ผ์ฐ์ , ๊ฒ์์์ง ๋ฑ์ ์ํด ์ฌ์ฉ๋๋ค.
charset์ดํธ๋ฆฌ๋ทฐํธ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ฌ์ฉํ ๋ฌธ์์ ์ ์ ์ํ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>์๋
ํ์ธ์</p>
</body>
</html>04. body ํ๊ทธ
HTML ๋ฌธ์์ ๋ด์ฉ์ ๋ํ๋ด๋ฉฐ ์นํ์ด์ง์ ๋จ ํ๋๋ง ์กด์ฌํ๋ ํ๊ทธ
- ์นํ์ด์ง๋ฅผ ๊ตฌ์ฑํ๋ ๋๋ถ๋ถ์ ์์๊ฐ body ์์ ๋ด์ ์ ์๋๋ค.
728x90
'Web > HTML' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [HTML] Video and audio content (0) | 2022.07.20 |
|---|---|
| [HTML] Images in HTML (0) | 2022.07.19 |
| [HTML] Document and website structure (0) | 2022.06.04 |
| [HTML] Advanced text formatting (0) | 2022.06.04 |
| [HTML] Creating hyperlinks (0) | 2022.06.04 |
