๐ก 1. HTML์ด ๋จผ๋ฐ?
HTML์ด๋ (HyperText Markup Language)์ ์ฝ์๋ก์ ์นํ์ด์ง์ ๋ด์ฉ๊ณผ ๊ตฌ์กฐ๋ฅผ ํํํ๋ ๋งํฌ์ ์ธ์ด์ ๋๋ค. ์ด๊ฒ ๋จผ์๋ฆฌ์ผ ๐ง ๊ฐ๋ฐ์ ์์ํ ์ง ๊ทผ 7๋ ์ ๋(ํ๊ต ํฌํจ..) ๋๋๋ฐ, ๋ํ๋จผํธ๋ MDN์์ ์ค๋ช ํด์ฃผ๋ ๋ง์ ๋ฌด์จ ๋ง์ธ์ง ๋ํต ๋ชจ๋ฅด๊ฒ ๋ค...
๋ด๊ฐ ์๊ฐํ๋ HTML์ ์ฝ๊ฒ ์๊ฐํด์ ๊ฑด๋ฌผ์ ๋ผ๋๋ผ๊ณ ์๊ฐํ๋ค.
์ฌ์ง๊ณผ ๊ฐ์ด ์ํํธ๋ ๊ฑด๋ฌผ์ ์ง๊ธฐ ์ํด์๋ ๋ผ๋(์ฒ ๊ณจ)๋ฅผ ๋จผ์ ์ธ์์ ํ์ ๋ง๋ค์ด์ค๋ค. HTML๋ ๋ง์ฐฌ๊ฐ์ง๋ก ์นํ์ด์ง๋ฅผ ์ ์ํ๋ ๊ณผ์ ์์ ๋ผ๋์ด์ ํ์ ๋ง๋ค์ด์ฃผ๋ ์ธ์ด์ด๋ค. ๊ทธ๋ผ ๋งํฌ์ ์ธ์ด๊ฐ ๋ญ์ง? ๋งํฌ์ ์ธ์ด๋, ํ๊ทธ ๋ฑ์ ์ด์ฉํ์ฌ ๋ฌธ์๋ ๋ฐ์ดํฐ์ ๊ตฌ์กฐ๋ฅผ ํ๊ธฐํ๋ ์ธ์ด์ด๋ค.
<HTML>
</HTML>
<></> ์ด๋ฌํ ๋ชจ์์ ํ๊ทธ๋ผ๊ณ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ํ๊ทธ๋ ํญ์ ์์ํ๊ทธ(start tag), ์ข ๋ฃ ํ๊ทธ(end tag)๋ก ํ์์ ์ด๋ฃฌ๋ค. ํ๊ทธ์ ํ๊ทธ ์ฌ์ด์ ์ํ๋ ์ฝํ ์ธ ๋ฅผ ๋ฃ์ผ๋ฉด ๋๋ค. ๋ฌผ๋ก ์ด๋ค ํ๊ทธ๋์ ๋ฐ๋ผ ์ฝํ ์ธ ๊ฐ ์ ๋ค์ด๊ฐ ์ ๋ ์๋ค. ๊ทธ๊ฑด ๋ค์ ๊ฐ์ ์์ธํ๊ฒ ๋ค๋ค๋ณด์.
์ ๋ฆฌํ์๋ฉด, HTML์ ํ๊ทธ๋ผ๋ ๊ฒ์ ์ด์ฉํด์ ์น ์ดํ์ด์ผ์ด์ (์น์ฌ์ดํธ)์ ๋ผ๋๋ฅผ ๊ตฌ์ถํ๋ ์ธ์ด์ด๋ค.
๐ก 2. HTML5 ๊ธฐ๋ณธ๋ฌธ๋ฒ
- HTML5๋ 2014๋ 10์ 29์ผ์ ํ์ ๋ ์น ํ์ค์ด๊ณ , HTML์์ ์ฌ๋ฌ ๊ฐ์ง ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋๊ณ ๋ณด์๋ ๋ฒ์ ์ด๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML WORLD!</title>
</head>
<body>
<h1>Hello HTML World!</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaaFHevmzfOFkQUgWJmkG_kHKFmGtoQPG35w&usqp=CAU" alt="์ค์ง์ด๊ฒ์"/>
</body>
</html>
- HTML5๋ <!DOCTYPE html>ํ๊ทธ๋ฅผ ์ฐ๋ ๊ฒ์ผ๋ก ์์์ด ๋๋ค. <html></html>๊ฐ ์ ์ผ ๋ฐ๊นฅ ํ ๋๋ฆฌ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ ์์ <head>, <body> ํ๊ทธ๋ค์ด htmlํ๊ทธ ์์ ์์ฑ์ด ๋๋ค.
- headํ๊ทธ ์์๋ title, ๋ฉํ๋ฐ์ดํฐ์ ์ค์ ๋ฑ์ ๋ฃ์ ์ ์๋ค. head๋ถ๋ถ์ title์ด ์ธ์ ์์๋ค์ ๋ธ๋ผ์ฐ์ ์ ํํ๋์ง ์๋๋ค. (์ ํํ ๋ฐ์ง๋ค๋ฉด ๋นจ๊ฐ ๋ถ๋ถ๋ง head ์์ญ์ด๋ผ๊ณ ํ ์๋ ์๋ค. ์ง๊ด์ ์ผ๋ก ๋ณด๊ธฐ ์ํด์ ์ ๋ ๊ฒ ํ์ํจ.)
- bodyํ๊ทธ ์์๋ ์ฐ๋ฆฌ๊ฐ ๋์ผ๋ก ๋ณผ ์ ์๋ ๋ฒํธ, ๊ฒ์ ์ ๋ ฅ์ฐฝ, ์ฌ์ง ๋ฑ์ ์์๋ฅผ ๋ฃ๋ ๋ถ๋ถ์ด๋ค.
- HTML ํ์ผ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ฉ๋ชจ์ฅ์ ์์ ์์ค๋ฅผ ๋ณต์ฌํ์ฌ ๋ถ์ธ ํ ์ ์ฅ์ ํ ๋ ํ์ผ ํ์ฅ์์๋ค๊ฐ .html๋ก ์ ์ฅํ๋ฉด ๋๋ค. ํ์ง๋ง ์์ผ๋ก ๊ฐ๋ฐ์ ๊ณ์ํ ๊ฑฐ๋ผ๋ฉด Editor๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ์ ๊ทน ์ถ์ฒํ๋ค. (๋๋ณด๊ธฐ๋ฅผ ๋๋ฅด๋ฉด ์๋ํฐ ์ข ๋ฅ๊ฐ ๋์ด)
โพ VSCODE(Visual Studio Code)
โพ WebStorm
โพ Brackets
์ด์ธ์๋ ์ฌ๋ฌ ๊ฐ์ง ์ข ๋ฅ๊ฐ ์์ง๋ง, ๊ฐ์ธ์ ์ผ๋ก vscode๋ฅผ ์ถ์ฒํ๋ค. ์ค์น๋ฐฉ๋ฒ์ด๋ ์ฌ์ฉ๋ฒ์ ๊ตฌ๊ธ์ ๊ฒ์ํ๋ฉด ์์ธํ๊ณ ์ฝ๊ฒ ์ค๋ช ํด๋์ ๊ธ์ด ๋ง์ผ๋๊น ์ฐธ๊ณ ํด์ ์ค์นํ๋ฉด ๋๋ค.
๐ก 2-1. ํ๊ทธ(Tag)
- ํ๊ทธ๋, ์์์ ์ค๋ช ํ๋ฏ์ด <a> ์ด๋ฐ ์์ผ๋ก ์๊ธด ๊ฒ์ ํ๊ทธ๋ผ๊ณ ํ๋ค. '<'์ '>'๋ก ๋ฌถ์ธ ๋ช ๋ น์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค.
- ํ๊ทธ์ ์ข
๋ฅ
* ์์ ํ๊ทธ : <a>, <head>, <body> ๋ฑ
* ์ข
๋ฃ ํ๊ทธ : </a>, </head>, <body> ๋ฑ
* ๋น ํ๊ทธ(empty tag) : <br/>, <img/>, <hr/> ๋ฑ
-> ์๋ ํ๊ทธ๋ ์์ํ๊ทธ-์ข
๋ฃ ํ๊ทธ๊ฐ ํ ์์ ์ด๋ฃจ์ด์ผ ํ์ง๋ง, ์์ํ๊ทธ์ ์ข
๋ฃํ๊ทธ ์ฌ์ด์ ์ฝํ
์ธ (๋ด์ฉ)๋ฅผ ๋ฃ์ ๊ฒ ์๊ฑฐ๋ ํน์ํ ๊ฒฝ์ฐ์ ๋น ํ๊ทธ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
- ์์ ํ๊ทธ๋ ์์ฑ(attribute)์ ๊ฐ(value)๋ฅผ ๊ฐ์ง ์ ์๋ค.
ex) <a href="https://www.naver.com"> a๋ผ๋ ์์ํ๊ทธ ์์ href๋ผ๋ '์์ฑ'๊ณผ https://www.naver.com๋ผ๋ ๊ฐ์ ๊ฐ์ง ๊ฒ์ ๋ณผ ์ ์๋ค. aํ๊ทธ๋ ํด๋ฆญ์ ํ ์ ์๋ ํ๊ทธ์ด๋ค(ํ์ดํผ๋งํฌ๋ผ๊ณ ์๊ฐํ๋ฉด ํธํ๋ค) ๊ทธ๋ฆฌ๊ณ href๋ ์ฃผ์๋ผ๋ ์์ฑ์ด๊ณ ๊ทธ ์์ฑ์ ๊ฐ์ด ๋ค์ด๋ฒ ํํ์ด์ง์ธ ๊ฒ์ด๋ค. ๊ฒฐ๊ตญ ์ aํ๊ทธ๋ฅผ ํด๋ฆญํ๋ฉด ๋ค์ด๋ฒ ํํ์ด์ง๋ก ์ด๋ํ๋ ๊ฒ์ด๋ค. ๋ง์ด ์ด ๊ธธ์ด์ก๋๋ฐ, ๊ฒฐ๊ตญ ์์ ํ๊ทธ์๋ ์์ฑ๊ณผ ๊ฐ์ ๊ฐ์ง ์ ์๋ค.
๐ก 2-2. ์ฝํ ์ธ (Content)
- ์ฝํ
์ธ ๋ ์์ ํ๊ทธ์ ์ข
๋ฃ ํ๊ทธ ์ฌ์ด์ ์๋ ๋ด์ฉ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค.
ex) <a href="https://www.naver.com">๋ค์ด๋ฒํํ์ด์ง๋ก ๊ณ ๊ณ !</a> "๋ค์ด๋ฒํํ์ด์ง๋ก ๊ณ ๊ณ !"๊ฐ ์ฝํ
์ธ ์ด๋ค.
๐ก 2-3. ์์(Element)
- ์์ ํ๊ทธ(์์ฑ, ๊ฐ) + ์ฝํ ์ธ + ์ข ๋ฃ ํ๊ทธ์ ํ ๋ฌถ์์ ์์๋ผ๊ณ ๋ถ๋ฅธ๋ค.
- ๋น ์์(Empty element or Self-Closing element) : ๋น ํ๊ทธ(<br/>, <img/> ๋ฑ)๋ ๋น ์์๋ผ๊ณ ๋ถ๋ฅด๊ธฐ๋ ํ๋ค. ์์ฑ์ ๊ฐ์ง ์ ์๋ค.
ex) <meta charset="utf-8">
- ๋น ์์์ ์ข ๋ฅ : br, hr, img, input, link, meta (์์ธํ ์ค๋ช ์ ํํธ์์ ์ด์ด์ ํ๋ ๊ฑธ๋ก..)
๐ก 2-4. ์์์ ์ค์ฒฉ
- ์์๋ ๋ค๋ฅธ ์์๋ฅผ ํฌํจํ ์ ์๋ค. ์ฆ ์์ ์์ ๋ค๋ฅธ ์์๋ฅผ ๋ฃ์ ์ ์๋ค๋ ๊ฒ์ด๋ค.
<body>
<a href="https://www.naver.com">๋ค์ด๋ฒ ํํ์ด์ง ๊ฐ์ฆ์!</a>
</body>
์ ์ฝ๋์์ <body> ์์ ์์ <a>~~ ์์๊ฐ ํฌํจ์ด ๋ผ์๋ ๊ฒ์ ๋ณผ ์ ์๋ค. ์ด๋ด ๋, ์์ ๊ฐ์ ๋ถ์๊ด๊ณ๊ฐ ํ์ฑ์ด ๋๋ค. ์ฆ <body> ์์๋ <a> ์์์ ๋ถ๋ชจ๊ฐ ๋๋ค.
๐ก 3. ์ฃผ์(Comments)
- ์ฃผ์(Commnents)์ ์ฝ๋์ ์ค๋ช ์ ์ํด ์ฌ์ฉ๋๊ณ , ๋ธ๋ผ์ฐ์ ํ๋ฉด์๋ ํ์๋์ง ์๋๋ค.
<!-- ๊ฐ๋ฐํ ๋ ์ฃผ์ ์ ๋ฌ์์ฃผ์ธ์! -->
<p>๋๋ ์ปจํ
์ธ !</p>
* ํผ์ ํ๋ก์ ํธ๋ฅผ ํ๋, ํ์ฌ์์ ์ ๋ฌด๋ฅผ ํ๋ ์ฃผ์์ ๊ผผ๊ผผํ ์ ๋ฌ์์ฃผ์ธ์! ๊ทธ๋ฆฌ๊ณ ๋จ๋ค์ด ์ฃผ์๋ง ์ฝ์์ ๋ "์~ ์ด๋ฐ ์ฝ๋๊ตฌ๋~"๋ผ๊ณ ์์๋ค์ ์ ์๋๋ก ์ ์ด์ฃผ๋ฉด ์ ์ ๊ฐ๋ฐ์๋คํํ ์ฌ๋ ๋ฌ๋ฟ ๋ฐ์ผ์ค ๊ฑฐ์์ ใ ใ ใ ใ
๊ธด ๊ธ ์ฝ์ด์ฃผ์
์ ๊ฐ์ฌํฉ๋๋ค :)
ํ๋ฆฐ ๋ด์ฉ์ด ์๊ฑฐ๋, ๋ง๋ถ์ผ ๋ด์ฉ์ด ์๋ค๋ฉด ์ธ์ ๋ ์ง ๋๊ธ ๋ฌ์์ฃผ์ธ์!
์ ๊ธ์ด ์กฐ๊ธ์ด๋๋ง ์ฝ์ ์ ๋ถ๋ค์๊ฒ ๋์์ด ๋๋๋ก ๋
ธ๋ ฅํ๊ฒ ์ต๋๋ค
๋ค์ ํธ์ ๋ดฌ์~
'Front-End > HTML' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HTML] 06. LIST & TABLE (1) | 2021.11.17 |
---|---|
[HTML] 05. Hyperlink (0) | 2021.11.15 |
[HTML] 04. ํ ์คํธ ๊ด๋ จ ํ๊ทธ2 (0) | 2021.11.12 |
[HTML] 03. ํ ์คํธ ๊ด๋ จ ํ๊ทธ (0) | 2021.11.10 |
[HTML] 02. ๊ธฐ๋ณธ Tag (2) | 2021.11.08 |