HTML ๊ธฐ๋ณธ ๋ฌธ์ ๊ตฌ์กฐ
1.ํ๊ทธ๋ < > ๋ฅผ ์ด์ฉํด ๊ตฌ๋ถํจ
2.ํ๊ทธ๋ ์๋ฌธ์๋ก ์
๋์๋ฌธ์๋ฅผ ๊ตฌ๋ณํ์ง ์์ง๋ง HTML5 ํ์ค ๋ช ์ธ์์๋
ํ๊ทธ์ ํ๊ทธ์์ ์๋ฌธ์๋ก ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅ
๋ง๋ ์ | ํ๋ฆฐ ์ |
<img src = “images/first.jpg”> | <IMG src = “images/first.jpg”> |
3. ์ฌ๋ ํ๊ทธ์ ๋ซ๋ ํ๊ทธ๋ฅผ ์ ํํ ์ ๋ ฅ
๋ง๋ ์ | ํ๋ฆฐ ์ |
<h1> ์์ </h1> | <h1> ์์ |
4. ์ ๋นํ ๋ค์ฌ ์ฐ๊ธฐ
See the Pen Heading tags by ๋ ธํ๊ฒฝ (@Dewlovely) on CodePen.
์ผ์ชฝ ์ฝ๋๋ค ๋ด์ฉ์ ๋ณด๋ฉด ๋ค์ฌ์ฐ๊ธฐ๊ฐ ์ ๋นํ ๋์ด ์์ผ๋ฉด
๊ฐ๋ ์ฑ๋ ์ข์์ง๊ธฐ ๋๋ฌธ์ด๋ค.
5. ํ๊ทธ๋ ์์ฑ๊ณผ ํจ๊ป ์ฌ์ฉ ๊ฐ๋ฅ
< ํ๊ทธ ์์ฑ = “์์ฑ ๊ฐ” ์์ฑ = “์์ฑ ๊ฐ” .. >
ex) <img src=”images/first.jpg” width=”350” height=”290” alt=”์ด๋ฏธ์ง”>
๋นจ๊ฐ์์ด ์์ฑ ํ๋์์ด ์์ฑ ๊ฐ
6. ํฌํจ ๊ด๊ณ๋ฅผ ๋ช ํํ ํ๊ธฐ
<u><i>ํ ์คํธ์ ๋๋ค</i></u>
HTML ๋ฌธ์ ๊ธฐ๋ณธ ๊ตฌ์กฐ ์ดํด๋ณด๊ธฐ
See the Pen Heading tags by ๋ ธํ๊ฒฝ (@Dewlovely) on CodePen.
<!doctype> - ๋ฌธ์ ์ ํ์ ์ง์ ํ๋ ์ ์ธ๋ฌธ
์ด์ ๋ถํฐ ์ฒ๋ฆฌํ ๋ฌธ์๋ html ๋ฌธ์์ด๊ณ ์ด๋ค ์ ํ์ ์ฌ์ฉํ์ผ๋ ๊ทธ ๋ฒ์ ์ ๋ง๋ ๋ฐฉ๋ฒ์ผ๋ก ํด์ํ๋ผ ๋ผ๊ณ ์๋ ค์ฃผ๋ ๊ฒ
<html> - ์น ๋ฌธ์๋ฅผ ์์์ ์๋ฆฌ๋ ํ๊ทธ
์น ๋ฌธ์์ ์์๊ณผ ๋์ ๋ํ๋ด๋ ํ๊ทธ
<html lang = “ko”> html ํ๊ทธ์๋ lang ์ด๋ผ๋ ์์ฑ์ ์ฌ์ฉํด ๋ฌธ์์์ ์ฌ์ฉํ ์ธ์ด๋ฅผ ์ง์ ํ ์ ์๋ค.
์ฃผ์ ๊ตญ๊ฐ๋ณ ์ธ์ด ์ฝ๋๋ ์ด์ ๊ฐ์ต๋๋ค.
์ฝ๋ | de | en | fr | ja | ko | zh |
์ธ์ด | ๋ ์ผ์ด | ์์ด | ํ๋์ค์ด | ์ผ๋ณธ์ด | ํ๊ตญ์ด | ์ค๊ตญ์ด |
<head> - ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋ณด๋ฅผ ์ฃผ๋ ํ๊ทธ
์น ๋ธ๋ผ์ฐ์ ํ๋ฉด์๋ ๋ณด์ด์ง ์๋ ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์์์ผ ํ ์ ๋ณด๋ค์ ๋ชจ๋ <head> ๋ถ๋ถ์ ์ ๋ ฅํ๋ค.
<title> - ๋ฌธ์ ์ ๋ชฉ
์ ๋ชฉ ํ์์ค์ ํ์๋๋ ํ๊ทธ
<meta> - ๋ฌธ์ ์ธ์ฝ๋ฉ ๋ฐ ๋ฌธ์ ํค์๋, ์์ฝ ์ ๋ณด
ํ๋ฉด์ ๊ธ์๋ฅผ ํ์ํ๋ ๋ฌธ์ ์ธ์ฝ๋ฉ ๋ฐฉ๋ฒ์ ๋น๋กฏํด ์น ๋ฌธ์ ํค์๋ ๋ฑ์ ์ง์ ํ ์ ์์.
<body> - ์ค์ ๋ธ๋ผ์ฐ์ ์ ํ์๋ ๋ด์ฉ
์น๋ฌธ์์์ ํน์ ๋ฌธ์ ๋ฐ ํน์ ๊ธฐํธ ์ฌ์ฉํ๊ธฐ
https://www.w3schools.com/charsets/ref_html_entities_4.asp
์ด ๋งํฌ๋ ํน์ ๋ฌธ์ ๊ดํ HTML ์ฝ๋ ์ ํ์๋ ๊ฑฐ์ ๋๋ค.
์์ ใ ์ ์ด์ฉํด์ ์ฌ์ฉํด๋ ๋์ง๋ง ์นํ์คํ์ ๋ฌธ์ ๊ฐ ๋ ์ ์์ผ๋
์ฝ๋๋ฅผ ์ด์ฉํ์๋ ๊ฑธ ์ถ์ฒ๋๋ฆฝ๋๋ค
์ํฐํฐ ์ด๋ฆ์ด๋ ์ํฐํฐ ์ฝ๋ ๋ค์ ์ค๋ ์ธ๋ฏธ์ฝ๋ก (;)์ ๊ผญ ๋ถ์ฌ์ผ ํ๋ค.