[๐ฑ๋ชฉ์ฐจ๐ฑ]
- HTML ์ด๋?
- HTML์ ๊ตฌ์กฐ(Structure)
- HTML์ ๊ธฐ๋ณธ๋ฌธ๋ฒ, ์ค์ฒฉ(Nested)
- HTML์ ๊ธฐ๋ณธ๋ฌธ๋ฒ, ์ฃผ์(Comments)
- ์ธ๋ผ์ธ ํ๊ทธ์ ๋ธ๋ก ํ๊ทธ
+ํ๊ธฐ
01. HTML ์ด๋?
:Hypertext Markup Language
์น ํ์ด์ง๋ฅผ ๊ตฌ์ฑํ๋ ๊ฐ์ฅ ๊ธฐ์ด์ ์ธ ์ธ์ด ์ ๋๋ค.
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ ์๋๊ณ , ์ฐ๋ฆฌ๊ฐ ๋ณด๋ ์นํ์ด์ง๊ฐ ์ด๋ป๊ฒ ๊ตฌ์กฐํ๋์ด ์๋์ง ๋ธ๋ผ์ฐ์ ๋ก ํ์ฌ๊ธ ์ ์ ์๋๋ก ํ๋ ๋งํฌ์ ์ธ์ด์ ๋๋ค.
๋จ์ด๋ฅผ ํ๋ํ๋ ์ดํด๋ณด์๋ฉด 'Hypertext' ๋ ์นํ์ด์ง์์ ๋ค๋ฅธ ํ์ด์ง๋ก ์ด๋ํ ์ ์๋๋ก ํ๋ ๋งํฌ๋ฅผ ๋งํฉ๋๋ค.
'Markup'์ ๋ฌธ์๋ ๋ฐ์ดํฐ์ ๊ตฌ์กฐ๋ฅผ ๋ช ๊ธฐํ๋ค ๋ผ๋ ๋ป์ ๋๋ค. ๋งํฌ์ ์ด ์๋ ์๋์ ์ฐจ์ด๋ฅผ ๋ณด๊ธฐ ์ํด์ ์๋๋ฅผ ๋ณด์๋ฉด
- ํ์ (Markup)๊ฐ ์์๋
SeSAC ์น ํ์คํ ๊ณผ์ . ์์๊ธ 13:00 ~ 19:00- ํ์ (Markup)๊ฐ ์์๋
- ๊ณผ์ ๋ช
: SeSAC ์น ํ์คํ ๊ณผ์
- ๊ต์ก์๊ฐ : ์์๊ธ 13:00 ~ 19:0002. HTML ์ ๊ตฌ์กฐ(Structure)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>VS Code ์์ [! + tab๋ฒํผ] ๋๋ฅด๋ฉด ์๋์ผ๋ก ์์ฑ๋๋ ๋ฌธ์ฅ๋ค์ ๋๋ค. ๋จผ์ HTML5 ๋ฌธ์๋ ๋ฐ๋์ <!DOCTYPE html>์ผ๋ก ์์ํ์ฌ ๋ฌธ์ ํ์์ HTML5๋ก ์ง์ ํฉ๋๋ค. ์ค์ ์ ์ธ HTML๋ฌธ์๋ 2๋ฒ์งธ ํ๋ถํฐ ์์ ๋๋ฉฐ <html></html>์ฌ์ด์ ์์ฑ๋ฉ๋๋ค. <head>์ </head>์ฌ์ด์๋ HTML ๋ฌธ์ ์ ๋ณด๋ฅผ ์ ์ํ๋ ์ฝ๋๊ฐ ํฌํจ๋๊ฒ ๋ฉ๋๋ค. (์ ๋ชฉ, ์ ์ฅ๋ฐฉ์, ๋ธ๋ผ์ฐ์ ์ ํฌ๊ธฐ ๋ฑ๋ฑ) ์น ๋ธ๋ผ์ฐ์ ์ ์ถ๋ ฅ๋๋ ๋ชจ๋ ์์๋ <body>์ </body>์ฌ์ด์ ์์นํฉ๋๋ค.
HTML์ <head>๋ ํ์ด์ง๋ฅผ ์ด ๋ ์น ๋ธ๋ผ์ฐ์ ์ธ ํ๋ฉด์ ํ์๋์ง ์์ต๋๋ค. head๋ title ๊ฐ์ ํ์ด์ง๋, CSS์ ๋งํฌ, ํ๋น์ฝ(favicon), ๊ทธ๋ฆฌ๊ณ ๋ค๋ฅธ ๋ฉํ๋ฐ์ดํฐ(๋ฐ์ดํฐ์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ ๋ฐ์ดํฐ)๋ฅผ ํฌํจํฉ๋๋ค. ์ฆ, HTML ๋ฌธ์์ title,style,link,script,meta์ ๋ํ ๋ฐ์ดํฐ๋ก ํ๋ฉด์ ํ์๋์ง ์์ต๋๋ค. title์ HTML ๋ฌธ์์ ์ ๋ชฉ, style
์ HTML๋ฌธ์์ Style ์ ๋ณด ์ ์ ,link๋ ์ธ๋ถ ๋ฆฌ์์ค์์ ์ฐ๊ฒฐ ์ ๋ณด๋ฅผ ์ ์ , script๋ JavaScript๋ฅผ ์ ์ meta๋ ํ์ด์ง์ค๋ช , ํค์๋, ์ ์, ํ๋ฉด ํฌ๊ธฐ ๋ฑ์ ์ ๋ณด. ์ฃผ๋ก ๋ธ๋ผ์ฐ์ ๋๋ฅธ ๊ฒ์ ์์ง์์ ์ฌ์ฉ ๋ฉ๋๋ค.
HTML์ <body>ํ๊ทธ๋ HTML๋ฌธ์์ ์ค์ ์ฝํ ์ธ ๋ฅผ ์ ์ํ๋๋ฐ ์ฌ์ฉ๋๋ ํ๊ทธ๋ก ๋ค์ํ ํ๋ฅผ ์ฌ์ฉํ์ฌ ์น ํ์ด์ง์ ๊ตฌ์กฐ๋ฅผ ์ค๊ณํ ์ ์์ต๋๋ค.
03. HTML์ ๊ธฐ๋ณธ๋ฌธ๋ฒ, ์ค์ฒฉ(Nested)
ํ๊ทธ์ ์ค์ฒฉ์ ํ๊ทธ ์์ ๋ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋๋ค. ํ๊ทธ๋ ์ค์ฒฉ์ ํตํด ๋ถ๋ชจ ํ๊ทธ์ ์์ ํ๊ทธ์ ๊ด๊ณ๊ฐ ๋ง๋ค์ด์ง๋๋ค. ํ๊ทธ ์์ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ์ ์ธํ ์ ์์ง๋ง, ํ๊ทธ๋ฅผ ์ค์ฒฉํด์ ์ฌ์ฉํ ๋ ์ค์ฒฉ๋๋ ํ๊ทธ๋ ๋ถ๋ชจ ํ๊ทธ๋ฅผ ๋ฒ์ด ๋์๋ ์๋ฉ๋๋ค.
[์๋ชป๋ ํ๊ทธ ์ค์ฒฉ]
<h1>Hello,<i>HTML</h1><i>์ ๋ฌธ์ฅ์์ ๋ถ๋ชจ ํ๊ทธ๋< h1> , ์์ ํ๊ทธ๋ <i> ์์ ์ ์ ์์ต๋๋ค. <i> ๋ณด๋ค ๋ถ๋ชจ์ธ <h1>์ ์ข ๋ฃ ํ๊ทธ๊ฐ ๋จผ์ ์ ์ธ ๋์์ต๋๋ค.
(๋ถ๋ชจ๋ ์์์ด ์ด๊ณ ์๋๋ฐ ๋ถ๋ชจ๋์ด ๋ ๋ฆฝ์ ํด์ ๋ณธ๊ฐ๋ฅผ ๋๊ฐ๋ ์ด์ํ ์ํฉ์ ๋๋ค...)
[์ฌ๋ฐ๋ฅธ ํ๊ทธ ์ค์ฒฉ]
<h1>Hello,<i>HTML</i></h1>์์ํ๊ทธ์ธ <i>์ ์ข ๋ฃ ํ๊ทธ๋ฅผ ๋จผ์ ์ ์ธํด์ค๋ค ๋ถ๋ชจํ๊ทธ์ธ <h1>์ ์ข ๋ฃํ๊ทธ๋ฅผ ์ ์ธํด์ผ ํฉ๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<h1>Hello , World !</h1>
<p>์๋
ํ์๋ ต๋๊น. HTML5!!</p>
</body>
</html>• <html></html>์ ์นํ์ด์ง๋ฅผ ๊ตฌ์ฑํ๋ ๋ชจ๋ ์์๋ค์ ํฌํจํฉ๋๋ค. ์์ ๋ฅผ ๋ณด๋ฉด <html>์ <head> ์ <body> ๋ฅผ ํฌํจํ๋ฉฐ <head> ๋ <meta> ์ <title> ์์๋ฅผ <body> ์์๋ <h1>, <p>๋ฅผ ํฌํจํฉ๋๋ค.
• ์ค์ฒฉ ๊ด๊ณ(๋ถ๋ชจ์์ ๊ด๊ณ)๋ก ์นํ์ด์ง์ ๊ตฌ์กฐ(structure)๋ฅผ ํํํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋์ ๋ฐ๋ผ ์ ํด์ง ํ๊ทธ๋ง ์ค์ฒฉํ ์ ์์ต๋๋ค.
์ค์ฒฉ์ด ๋์ง ์๋ ๊ฒฝ์ฐ์ธ block elements ์ inline elements์ ๋ํด์๋ ๋ค์๊ธ tag ์์ ์ค๋ช ํ๊ฒ ์ต๋๋ค.
04. HTML ๊ธฐ๋ณธ๋ฌธ๋ฒ, ์ฃผ์(Comments)
<!-- ์๋
ํ์ธ์ , ์ฃผ์์
๋๋ค -->์ฃผ์(comment)๋ ๊ฐ๋ฐ์์๊ฒ ์ฝ๋๋ฅผ ์ค๋ช ํ๊ธฐ ์ํด ์ฌ์ฉํฉ๋๋ค. ๋ ๋ธ๋ผ์ฐ์ ๋ ์ฃผ์์ ํ๋ฉด์ ํ์ํ์ง ์์ต๋๋ค.
์ฌ์ฉ์๋ ์ปดํจํฐ๋ฅผ ์ํ ๊ฒ์ด ์๋ ๊ฐ๋ฐ์๋ฅผ ์ํ ๊ฒ์ด๋ผ๊ณ ํ ์ ์์ต๋๋ค. ์ฝ๋๋ง์ผ๋ก ์ค๋ช ์ด ์ด๋ ค์ธ ๋ ๋ถ๊ฐ์ ์ผ๋ก ์ค๋ช ํ๊ธฐ ์ํด ์ฌ์ฉํ๊ธฐ๋ ํฉ๋๋ค.
05. ์ธ๋ผ์ธ ํ๊ทธ์ ๋ธ๋ก ํ๊ทธ
๋ธ๋ก ์์๋ ํญ์ ์๋ก์ด line์์ ์์ํ์ฌ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ํ์ด์ง์ ์ ์ฒด ๋๋น๋ฅผ ์ฐจ์งํ ์ ์๊ณ , ์์ ์ ๋ค์ ์ค๋ฐ๊ฟ์ด ์์ต๋๋ค. ๋ธ๋ก ์์์๋ <h1>~<h6>,<li>,<ol>,<il>,<div>ํ๊ทธ ๋ฑ์ด ๋ธ๋ก ์์์ ์ํฉ๋๋ค.
์ธ๋ผ์ธ ์์๋ ๊ฐํ์ ์ผ์ผํค์ง ์๊ณ , ํ์ํ ๋งํผ๋ง ๋๋น๋ฅผ ์ฐจ์งํฉ๋๋ค. ์ฆ, ์ฌ๋ ํ๊ทธ์ ๋ซ๋ ํ๊ทธ๋ก ๋๋ฌ์์ธ ๊ณต๊ฐ๋ง์ ์ฐจ์งํฉ๋๋ค.
์ธ๋ผ์ธ ์์์๋ <img>,<a>,<em>,<span>ํ๊ทธ๋ฑ์ด ์ธ๋ผ์ธ ์์์ ์ํฉ๋๋ค.
์ฝ๋์์ ์ธ๋ผ์ธ ํ๊ทธ์ ๋ธ๋ก ํ๊ทธ์ ์ฐจ์ด์ ์ ์์๋ณด๋ฉด,
<!-- ์ฃผ์ ๋จ์ถํค: ctrl(cmd) + / -->
<!DOCTYPE html>
<!-- DOCTYPE html: html5๋ก ๋ฌธ์๋ฅผ ์์ฑํ๊ฒ ๋ค (Document Type ์ฝ์) -->
<html lang="ko">
<!-- lang ์์ฑ: language (en: english, ko: korean) -->
<head>
<meta charset="UTF-8">
<!-- ์ธ์ฝ๋ฉ ๋ฐฉ์ ์ง์ / ์ธ์ฝ๋ฉ: ์ฐ๋ฆฌ๊ฐ ์์ฑํ ์ฝ๋๋ฅผ ์ปดํจํฐ๊ฐ ์ด์ฉํ ์ ์๋๋ก ๋ณ๊ฒฝ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ๋ชจ๋ฐ์ผ/๋ฐ์ํ์น์์ ์ธ์ํ ์ ์๋ ํ๊ทธ -->
<title>Document</title>
<!-- ๋ฌธ์์ ์ ๋ชฉ -->
</head>
<body>
<!-- ๋ธ๋ผ์ฐ์ ์์ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋ด์ฉ -->
<!-- start tag, end tag ์ฌ์ด์ ๋ฃ๊ณ ์ถ์ content๋ฅผ ์์ฑ -->
<h1>๋์ ์ฒซ HTML ๋ฌธ์์
๋๋ค</h1>
<!-- ์ค์ฒฉ(nested) -->
<!-- div: ๋ธ๋ก์์, span: ์ธ๋ผ์ธ์์ -->
<div style="background-color: red;">
span์ parent
<span style="background-color: blue;">div์ child</span>
</div>
</body>
</html>
๋์ ์ฒซ HTML ๋ฌธ์์ ๋๋ค
์ ์ฒด๋๋น๋ฅผ ์ฐจ์งํ๋ span์ parent์ธ <div>ํ๊ทธ์ ๋ฌ๋ฆฌ inline์์์ธ ์ฆ, div์ child <span>ํ๊ทธ๋ ํ์ํ ๋๋น๋งํผ๋ง ์ฌ์ฉํฉ๋๋ค.
+ํ๊ธฐ
๋ถํธ์บ ํ์ 2ํ์ฐจ ์์ ๋ ์ด ๋ฐ์์ต๋๋ค.. ์ฌ์ค ์ ์ด ๋ ๋ฐค์ ์๊ณ ๊ฐ์ .. ๋ด๊ฐ ๊ต์ก์ ๋ค์ ์ ์์๊น .. ํ๋๋ฐ ๋ง์ ๋ฅ์น๋๊น ํ๊ฒ ๋๋๋ผ๊ตฌ์. ํ์ง๋ง ์ ๋ ๋ฐค์ ์๊ณ ๊ต์ก์ ๋ฃ์ง ์์ผ๋ฆฌ๋ผ.. ๋ค์งํ์ต๋๋ค. ์ด ๋ ์ ์น ๋ธ๋ผ์ฐ์ ์ ๋ผ๋๋ฅผ ๋จผ์ ๋ฐฐ์ ์ต๋๋ค. ์ด์ ๋ถ์ด๋ CSS๋ ๋ค์ ์์ ๋ ์งํ ๋ฉ๋๋ค. ๋ค๋ฅธ ํ๋ก๊ทธ๋๋ฐ์ธ์ด๋ค๊ณผ ๋ฌ๋ฆฌ ์คํ์ ํด๋ ์ค๋ฅ๊ฐ ์ด๋์ ๋ ๊ฑด์ง ์๋ ค์ฃผ์ง๋ฅผ ์์์ ๋ค์ ๋ถ์น์ ํ ๋ ์์ ๋๋ค. ์ฌ์ค ์ html์ ํ๋ฒ๋ ํด๋ณธ ์ ์ด์๋ html๋ด๋น๋ก์ ์กธ๋ฆฌ์ง๋ง ์ค๋ ๋ ๋ง์์ผ๋ก ๊ณต๋ถ ํ์ต๋๋ค. ๋ด๋น์์ ๋๋์ง์๊ธฐ๋ฅผ,,, ๋นจ๋ฆฌ CSS ๋นจ๋ฆฌ JS๋ฐฐ์ฐ๊ณ ์ถ์.,,,,
