-
โจ HTML5 | HTML ๋ฉํ ํ๊ทธ๋คHTML 2022. 9. 6. 00:39
1. <!DOCTYPE html> ์ ์๋ฏธ
html ๋ฌธ์๋ฅผ ์์ฑํ ๋ ๊ฐ์ฅ ์ฒซ ์ค์ ์ ๋ <!DOCTYPE html>์ ์น ๋ธ๋ผ์ฐ์ ์๊ฒ ์ด๋ค ๋ฒ์ ์ HTML ์ ์ฌ์ฉํ๋์ง ์๋ ค์ฃผ๋ ๋ฌธ๊ตฌ์ด๋ค.
์์
HTML5 ๋ฌธ์
<!DOCTYPE html>
strict HTML 4.01 ๋ฌธ์
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
transitional HTML 4.01 ๋ฌธ์
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
frameset HTML 4.01 ๋ฌธ์
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
What is the DOCTYPE Declaration in HTML?
The HTML document type declaration, also known as DOCTYPE, is the first line of code required in every HTML or XHTML document. The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that
www.freecodecamp.org
2. meta ํ๊ทธ๋ค
meta ํ๊ทธ : ํด๋น ๋ฌธ์์ ๋ํ ์ ๋ณด(metadata)๋ฅผ ์ ์ํ ๋ ์ฌ์ฉํ๋ ํ๊ทธ
meta ํ๊ทธ ์์น : ํญ์ head ํ๊ทธ ์
meta ํ๊ทธ์ ์ญํ
- ํด๋น ๋ฌธ์์ ๋ํ ์ ๋ณด๋ฅผ ์๋ ค์ค
- SEO(๊ฒ์ ์์ง ์ต์ ํ) : metadata๋ฅผ ๋ฐํ์ผ๋ก ์ฌ์ฉ์์๊ฒ ๊ฒ์ ๊ฒฐ๊ณผ ์ ๊ณต
<meta charset="utf-8"> HTML ๋ฌธ์๋ค์ ์ธ์ฝ๋ฉ ๋ฐฉ์ ์ ์
1. ์ฌ๋์ ์ธ์ด๋ฅผ ์ปดํจํฐ๊ฐ ์์๋ค์ ์ ์๋ 0๊ณผ 1๋ก ๋ณํ(์ธ์ฝ๋ฉ) ํด์ฃผ์ด์ผ ํจ.
์์คํค์ฝ๋ ๋ค์๊ณผ ๊ฐ์ด ํ๋ฅผ ์ฌ์ฉํด์ ์ปดํจํฐ๊ฐ ์ธ์ฝ๋ฉ์ ํจ. ํ์ง๋ง ์์คํค์ฝ๋์ ๊ฐ์ ๋ฌธ์์ด ๋ณํ ํ์๋ ์ํ๋ฒณ๊ณผ ์ซ์๋ง ์ ์๋์ด์๊ธฐ ๋๋ฌธ์ ํ๊ธ์ ์์คํค ์ฝ๋๋ก ์ธ์ฝ๋ฉํ ๊ฒฝ์ฐ ๊นจ์ง๋ ํ์ ๋ฐ์ !
2. ์ ๋์ฝ๋์ ํ์
๋๋ผ๋ง๋ค ๋ค๋ฅธ ์ธ์ฝ๋ฉ ๋ฌธ์์ด ํ์ค์ ์ฌ์ฉํ๋ ํธํ์ฑ ๋ฌธ์ ๋ ์๊น. ๋ชจ๋ ๋ฌธ์๋ฅผ ํ ํ์ ๋ฃ์ ์ ๋์ฝ๋๊ฐ ์๊ฒจ๋จ.
3. UTF-8 : 0๊ณผ 1๋ก ์ปดํจํฐ์ ์ ์ฅํ ๋ 8๋นํธ(1๋ฐ์ดํธ)์ฉ ์ฐจ์งํ๋๋ก ์ปดํจํฐ์ ์ ์ฅํ๋ ์ธ์ฝ๋ฉ ๋ฐฉ์(์ ์ธ๊ณ์ ์ผ๋ก ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ๋ฐฉ์)
์ฝ๋ฉ๊ต์ก ํฐ์จํผ์ค์ฟจ
4์ฐจ์ฐ์ ํ๋ช , ์ฝ๋ฉ๊ต์ก, ์ํํธ์จ์ด๊ต์ก, ์ฝ๋ฉ๊ธฐ์ด, SW์ฝ๋ฉ, ๊ธฐ์ด์ฝ๋ฉ๋ถํฐ ์๋ฐ ํ์ด์ฌ ๋ฑ
tcpschool.com
์ ๋์ฝ๋ - ์ํค๋ฐฑ๊ณผ, ์ฐ๋ฆฌ ๋ชจ๋์ ๋ฐฑ๊ณผ์ฌ์
์ํค๋ฐฑ๊ณผ, ์ฐ๋ฆฌ ๋ชจ๋์ ๋ฐฑ๊ณผ์ฌ์ . ์ ๋์ ์๋ฐ์ ๋ํด์๋ U;Nee Code ๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ์ญ์์ค. ์ ๋์ฝ๋(์์ด: Unicode)๋ ์ ์ธ๊ณ์ ๋ชจ๋ ๋ฌธ์๋ฅผ ์ปดํจํฐ์์ ์ผ๊ด๋๊ฒ ํํํ๊ณ ๋ค๋ฃฐ ์ ์๋๋ก ์ค๊ณ๋
ko.wikipedia.org
<meta http-equiv="X-UA-Compatible" content="IE=edge" > ๋ ๋๋ง ๋ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ ๋ฒ์ ์ ์
content="IE=edge" : ๊ฐ์ฅ ์ต์ ๋ฒ์ ์ฌ์ฉ
<meta name="viewport" content="width=device-width, initial-scale=1.0"> viewport ์ธํ
๋ชจ๋ ๋๋ฐ์ด์ค์์ ๋๊ฐ์ด ๋ณด์ด๋๋ก ํ๊ธฐ ์ํด ํ์
width = device-width ๋ก ํ๊ฒ ๋ค. ๋๋ฐ์ด์ค ์คํฌ๋ฆฐ ํฌ๊ธฐ์ ๋ทฐํฌํธ ํฌ๊ธฐ ์ผ์น ์ํค๊ธฐ.
initial-scale=1.0 : ์ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ก๋๋ ๋ ํ๋/์ถ์ ์ค์ผ์ผ ์ค์
<meta name="description" content="๋ด ์นํ์ด์ง ์ค๋ช "> ๊ฒ์์์ง์์ ๋ด ์นํ์ด์ง๋ฅผ ์ฐพ์ ์ ์๋๋ก(SEO)
name, content ์์ฑ ์ฌ์ฉ
content์ ๊ฐ์ผ๋ก ๋ค์ด๊ฐ text์ ๊ฒฝ์ฐ ์๋์ ๊ฐ์ด ๊ฒ์ ๊ฒฐ๊ณผ๋ก ๋ณด์ฌ์ง๋ค.
์น์ฌ์ดํธ description์ ์ ์ ๋ ๊ณ ๋ คํด์ผ ํ ์ ๋ค
1. description์ 160์๋ฅผ ๋์ง ์๋๋ก.
2. ์ฌ์ฉ์๊ฐ ๊ฒ์ํ ๋งํ ํค์๋ ๋ฃ๊ธฐ
3. ์น ์ฌ์ดํธ๊ฐ ์ด๋ค ๊ฑธ ์ ๊ณตํ๋์ง ๊ฐ๋จํ๊ณ ๋ช ํํ๊ฒ ์ค๋ช ํ๊ธฐ
<meta name="author" content="sinyoung"> ์น ์ฌ์ดํธ author's name (SEO)
ํ์ด์ง ์ฃผ์ธ ์ ์ํ๊ธฐ
'HTML' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
โจ HTML5 | ์๋ฉํฑ ํ๊ทธ(sementic tag) (0) 2022.09.03