๐ป์นํ์ด์ง(์น๋ฌธ์)๋ฅผ ์ ์ํ๋ ์ธ์ด๐ป
1. HTML
- ์น ๋ฌธ์๋ฅผ ์์ฑํ๋ค.
- ํ์ด์ง์ ๊ณจ๊ฒฉ์ ์์ฑํ๋ค.
- ํ์ด์ง์ ์ถ๋ ฅํ ๋ด์ฉ์ ์์ฑํ๋ค.
2. CSS
- ๋์์ธ ์ธ์ด
- HTML ํ์ด์ง์ ์์์ ์์ฑํ๋ ์ญํ ์ ํ๋ค.
3. JavaScript
- ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
- JavaScript ์๋ ํ์ด์ง๋ ์ ์ ํ์ด์ง
- ์ ์ ์ธ ํ์ด์ง์ ํ๋ก๊ทธ๋๋ฐ ๊ธฐ๋ฅ์ ๋ํด์ฃผ๋ ์ญํ ์ ํ๋ค.
๐ปHTML๐ป
- Hyper Text Markup Languge์ ์ฝ์ด
- ํ์ดํผ ํ ์คํธ ๋งํฌ์ ์ธ์ด
- ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ์๋๋ค
- ํ๋ฆฌ์ ํ ์ด์ ์ธ์ด๋ผ๊ณ ํ๋ฉฐ, ๋ฌด์ธ๊ฐ๋ฅผ ํํํ๋ ๊ธฐ๋ฅ์ ๊ฐ์ง๋ค.
- Hyper Text : ๋งํฌ
- Markup : ์ธ์ด ํ๊ธฐ๋ฒ <> ๊บฝ์ ๊ดํธ๋ก ๋ช
๋ น์ด๋ฅผ ๋ด๋ฆฐ๋ค.
- HTML, XTHML, XML, VoiceXML, **ML
- SGML(๋ฉํ ์ธ์ด) : ๋ค๋ฅธ ์ธ์ด๋ฅผ ์ ์ํ ์ ์๋ ๊ธฐ๋ฅ์ ๊ฐ์ง ์ธ์ด
- HTML, XML ๋ฑ
HTML ์ฃผ๊ด ๋จ์ฒด
- W3C, World Wide Web Consortium
- wwwWWW ๋ชจ๋ ๊ธฐ์ ์์ฑํ๊ณ ์ฃผ๊ดํ๋ค.
- WHATWG (์๋๊ทธ?)
HTML ๋ฐ์ ๊ณผ์
- HTML 1.0 ~ HTML 5
- HTML 4.01
- ๊ฐ์ฅ ๋์คํ๋ ๋ฒ์
- XHTML 1.0
- HTML๊ณผ XML์ ํฉ์น ๋ฒ์
- HTML 4.01์ด ๋๋ฌด ๋ฐฉ๋ํ๊ณ ๊ด๋ฆฌ๊ฐ ํ๋ค์ด ๋์ด์ค๊ฒ ๋์๋ค.
- ๋ฌธ๋ฒ์ ๊ฐ๋ ฅํ๊ฒ ์ค์ํด์ผํ๋ค.
- ๊ฐ๋ฐ์๋ค์ด ์น ํ์คํ ์งํ
- HTML 5
- HTML Living Standard
- ๋ฒ์ ์ ๋ช ์ํ์ง ์๊ณ ๊ธฐ๋ฅ์ ์กฐ๊ธ์ฉ ์ถ๊ฐํ์ฌ ๋ฐ์ ํ๋ค.
HTML ๊ฐ๋ฐ ํ๊ฒฝ
- ํ
์คํธ ํธ์ง๊ธฐ
- ๋ฉ๋ชจ์ฅ
- IDE : Eclipse, IntelliJ, Visual Studio ๋ฑ
- ๋ฉ๋ชจ์ฅ๊ณผ IDE ์์ค ์ฌ์ด์ ํด : Sublime Text, Atom, Brakets, Visual Studio Code ๋ฑ...
- Visual Studio Code์์ ํ์ฅํฉ ๊ธฐ๋ฅ์ด ๋ฐ์ด๋ ์ ์ ์จ์ด ๊ฐ์ฅ ๋๋ค.
์คํ ํ๊ฒฝ/๋๊ตฌ
- ํฌ๋กฌ
- ์ฃ์ง
- ํ์ด์ดํญ์ค
- ์ฌํ๋ฆฌ
- ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ (*)
HTML ์ธ์ด ๊ตฌ์ฑ ์์
- ํ๊ทธ(Tag), ์๋ฆฌ๋จผํธ(Element)
- ์์ฑ(Atrribute)
- ํ ์คํธ(PCDATA)
- ์ํฐํฐ(Entity)
- ์ฃผ์(Comment)
- ์ ์ธ๋ฌธ(Declaration)
- ์ธ๋ถ์์
- ๊ธฐํ
HTML ๋ฌธ์ ํ์ฅ์
- *.html
- *.htm ('l' ์๋ต ๊ฐ๋ฅ)
๐ปHTML ๊ตฌ์กฐ ๋ถ์๐ป
HTML ๋ฌธ์ ๊ตฌ์กฐ
- ํ๊ทธ๋ ๊ณ์ธต๊ตฌ์กฐ๋ก ๋์ด ์๋ค(************)
- ๋ฉ๋ชจ๋ฆฌ์ ์ค์ฒดํ ๋์ด ์ฌ๋ผ๊ฐ๊ฒ ๋๊ณ ๋ฉ๋ชจ๋ฆฌ์ ๋ก๋ฉ๋ ํธ๋ฆฌ๊ตฌ์กฐ๋ฅผ DOM์ด๋ผ๊ณ ํ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>์ฒซ๋ฒ์งธ ์์ </h1>
</body>
</html>
<!DOCTYPE html>
- ํด๋น ๋ฌธ์๊ฐ HTML5๋ก ์์ฑ๋ ๋ฌธ์
- DOCTYPE
- ๋ฌธ์ ์ ํ ์ค ํ๋์ด๋ค.
- DTD๋ผ๋ ์ธ์ด๋ก ์ ์ธ๋์๋ค.
- ์ ์ธ๋ฌธ์ด๋ผ๊ณ ๋ ํ๋ค.
- ๋ฌธ์๋ฅผ ์ฝ๋ ๋ธ๋ผ์ฐ์ ์๊ฒ ํด๋น ๋ฌธ์์ ์ ๋ณด๋ฅผ ์๋ ค์ฃผ๋ ์ญํ ์ด๋ค.
<html>
- ๋ฌธ์ ์ ์ฒด๋ฅผ ๊ฐ์ธ๊ณ ์๋ ์ญํ
- ์ค์ค๋ก ํ๋ ์ผ์ ์์ผ๋ฉฐ ๋ฌธ์ ์ปจํ ์ด๋ ์ญํ ์ ํ๋ค.
<head>
- ๋ฌธ์์ ๋จธ๋ฆฟ๋ง ์ญํ
- ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋ฌํ ๋ด์ฉ์ ์์ฑํ๋ค.
- ๋ด๋ถ์ ๋ณด๋ฅผ ์ ๋๋ค.
<meta charset="UTF-8">
- ๋ธ๋ผ์ฐ์ ์๊ฒ ์ด ๋ฌธ์๋ฅผ UTF-8๋ก ์ฝ์ด๋ผ
<body>
- ๋ฌธ์์ ๋ณธ๋ฌธ ์ญํ
- ์ฌ๋์๊ฒ ์ ๋ฌํ ๋ด์ฉ(์ถ๋ ฅํ ๋ด์ฉ)์ ์์ฑํ๋ค.