๐ HTML(0) ๋ฌธ์ ์ ๋ณด
HTML์ ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ ค์ฃผ๋ ๋งํฌ์ ์ธ์ด๋ค. ์ด๊ณ ๋ซ๋ ํ๊ทธ, ๋ถ๋ชจ์ ์์ ๊ด๊ณ ๋ฑ์ ์์๋ค์ด ๊ฒฐํฉํ์ฌ ์ต์ข ์ ์ผ๋ก DOM ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ฒ ๋๊ณ (์ถํ ์์ธํ ๋ด์ฉ์ ์์๋ด์ผ๊ฒ ๋ค.) ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ๋๋ค.
Emmet?
vscode๋ ํธํ๋ค. ๋๋ฌด ํธํด์ ์ฌ๋์ ์ฝํ๊ฒ ๋ง๋ ๋ค. ๐
Vscode์ ๋ด์ฅ๋ Emmet์ ์ ๋ง ํธ๋ฆฌํ ๊ธฐ๋ฅ์ด๋ค. Emmet์ด ์์๋ค๋ฉด ๋จ์ํ ๋งํฌ์ ์์ ์ ์๋ ์๊ฐ์ด ์ด๋ง์ด๋งํ์ง ์์์๊น?
๋ฌธ๋ ๋๋ผ๋ ๊ฑฐ์ง๋ง ์ด๋ฐ Emmet์ ์ฝ๋ ์์ฐ์ฑ์ ๋์ฌ์ฃผ๋ ์ข์ ์น๊ตฌ์ด์ง๋ง ์ด๋ณด์์๊ฒ๋ ์๋ ์ ๊ฒ์ด๊ธฐ๋ ํ ๊ฒ ๊ฐ๋ค.
์ฌ๋ ๋์ ๋ค๋ฆ์์ด ! + tab์ ์ ๋ ฅํด DTD ํ์์ ๋ง์ถ ํฌ๋งท์ ์์ฑํ๋ ค๋๋ฐ ๋ฌธ๋ ์ด๋ฐ ์๊ฐ์ด ๋ ๋ค.
๋ด๊ฐ ๋ญ ์ ๋ ฅํ๊ณ ์๋ ๊ฑฐ์ง?
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
</body>
</html>
์ต์ํ ๊ธ์๋ค์ด๋ค. ๊ทผ๋ฐ ๋๊ตฐ๊ฐ๊ฐ ๋์๊ฒ ์ด ํญ๋ชฉ๋ค์ ํ๋ํ๋ ์ค๋ช ํด๋ณด๋ผ๊ณ ํ๋ฉด ์์ ์ด ์๋ค.
๊ฟ๋จน์ ๋ฒ์ด๋ฆฌ๊ฐ ๋ ์ํฉ์ ๋ฏธ๋ฆฌ ๋ฒ์ด๋์.
DOCTYPE
๋ฌธ์์ HTML ๋ฒ์
ํ์ฌ๋ HTML5๋ก ๋๋ถ๋ถ ์ฌ์ฉ ์ค์ด์ง๋ง ์ฌ์ ํ ๊ณผ๊ฑฐ์ HTML ๋ฒ์ ์ ์ฌ์ฉํ๋ ๋ฌธ์๊ฐ ์์ ์๋ ์๋ค.
์ด์ ๋ฒ์ ๋ ํฌ์คํธ์๋ ์๋ ๋ด์ฉ์ด์ง๋ง ์ซ์๊ฐ ๋ฐ๋๋ค๋ ๊ฑด ์ํํธ์จ์ด ์์ผ๋ก ์์ฒญ๋ ์๋ฏธ๋ผ๊ณ ํ๋ค.
์ด๋ค ๊ธฐ๋ฅ์ด ์ถ๊ฐ, ๋ณ๊ฒฝ๋์๊ณ ์ญ์ ๋์๋์ง ๋ฒ์ ์ ํ์์ผ๋ก ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ ค์ฃผ๋ ๊ฒ์ด DOCTYPE์ด๋ค.
<!DOCTYPE html>
์ HTML5๋ก ์ฐ์ธ ๋ฌธ์๋ผ๋ ๊ฑธ ๋ํ๋ธ๋ค.
head์ body
์ต์์์ธ html ํ๊ทธ, html์ ๋ ์์ head์ body
head๋ ์ฌ์ฉ์์๊ฒ ์ง์ ์ ์ผ๋ก ๋ํ๋๋ ๋ถ๋ถ์ด ์๋๋ค. ๋์ ์ ๋ชฉ, ์ค๋ช , ์ฌ์ฉํ ํ์ผ๋ค์ ์์น, ์คํ์ผ ๋ฑ ๋ฌธ์ ์์ฒด์ ๋ํ ์ ๋ณด(๋ฉํ ๋ฐ์ดํฐ)๋ฅผ ๋ด๊ณ ์๋ค.
body๋ ์ฌ์ฉ์์๊ฒ ์ง์ ์ ์ผ๋ก ๋ณด์ด๋ ๋ถ๋ถ์ด๋ฉฐ ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ๋ํ๋ธ๋ค.
๐ meta, link
๋ฌธ์์ ๋ํ ์ ๋ณด, ๋ฌธ์์ ์ฐ๊ฒฐ๋ ํ์ผ์ ์ ๋ณด
meta๋ ํ๊ทธ์ ์ด๋ฆ ๊ทธ๋๋ก ๋ฌธ์์ ๋ฉํ ๋ฐ์ดํฐ๋ฅผ ๋ณด์ฌ์ฃผ๋ ํ๊ทธ๋ค.
์์ ์์์์ charset์ ๋ฌธ์ ์ธ์ฝ๋ฉ ๋ฐฉ์
<meta http-equiv="X-UA-Compatible" content="IE=edge">
์ IE ๋ธ๋ผ์ฐ์ ์์ ๊ฐ์ฅ ์ต์ ์ 'ํ์ค' ๋ฌธ์ ๋ฒ์ (IE๋ ๋ฒ์ ๋ง๋ค ๋ฌธ์ ํ์ค์ด ๋ฌ๋๋ ๋ณด๋ค.)์ ์ ํํ๋ผ๋ ์๋ฏธ์ด๋ค.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
๋ ๋ทฐํฌํธ(์ฌ์ฉ์๊ฐ ๋ณผ ์ ์๋ ์์ญ)์ ์ค์ ํ๋ ํ๊ทธ์ด๋ค. ๊ธฐ๊ธฐ์ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋๋น๋ฅผ ๋ง์ถ๊ณ ์ค์ผ์ผ๋ง ๊ฐ์ ์กฐ์ ํ ์ ์๋ค.
๋ค์๊ณผ ๊ฐ์ด viewport ์ค์ ์ฌ๋ถ์ ๋ฐ๋ผ ํ๋ฉด์ด ๋ค๋ฅด๊ฒ ๋ํ๋๋ค.
link๋ ์ฐ๊ฒฐ๋ ํ์ผ๊ณผ ํ์ฌ ๋ฌธ์์ ๊ด๊ณ๋ฅผ ๋งํ๋ค.
<link rel="stylesheet" href="./style.css" />
๋ค์๊ณผ ๊ฐ์ด CSSํ์ผ์ ์ฐ๊ฒฐํ๊ฑฐ๋ ํน์ ํ๋น์ฝ์ ์ค์ ํ ์ ์๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ HTML(0) ๋ฌธ์ ์ ๋ณด), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ja960508/HTML0-๋ฌธ์-์ ๋ณด์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค