[HTML] HTML - Structure the Web #01
HTML : Getting started with HTML
1. HTML์ด๋
HTML (Hypertext Markup Language,ํ์ดํผํ
์คํธ ๋งํฌ์
์ธ์ด)๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ ์๋๊ณ , ์ฐ๋ฆฌ๊ฐ ๋ณด๋ ์นํ์ด์ง๊ฐ ์ด๋ป๊ฒ ๊ตฌ์กฐํ๋์ด ์๋์ง ๋ธ๋ผ์ฐ์ ๋ก ํ์ฌ๊ธ ์ ์ ์๋๋ก ํ๋ ๋งํฌ์
์ธ์ด์
๋๋ค.
HTML์ elements๋ก ๊ตฌ์ฑ๋์ด ์์ผ๋ฉฐ, ์ด๋ค์ ์ ์ ํ ๋ฐฉ๋ฒ์ผ๋ก ๋ํ๋ด๊ณ ์คํํ๊ธฐ ์ํด ๊ฐ ์ปจํ
์ธ ์ ์ฌ๋ฌ ๋ถ๋ถ๋ค์ ๊ฐ์ธ๊ณ ๋งํฌ์
ํฉ๋๋ค.
ํ๊ทธ(Tags)๋ ์น ์์ ๋ค๋ฅธ ํ์ด์ง๋ก ์ด๋ํ๊ฒ ํ๋ ํ์ดํผ๋งํฌ ๋ด์ฉ๋ค์ ์์ฑํ๊ฑฐ๋, ๋จ์ด๋ฅผ ๊ฐ์กฐํ๋ ๋ฑ์ ์ญํ ์ ํฉ๋๋ค.
My cat is very Grumpy
์ ๋ฌธ์ฅ์ ์๋์ ๊ฐ์ด, <p>
ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฆฌ๋จผํธ๋ฅผ ๋ฌธ๋จ์ผ๋ก ๋ช
์ํ ์ ์๋ค.
<p>My cat is very Grumpy</p>
์ฐธ๊ณ : HTML ์์๋ ๋์๋ฌธ์๋ฅผ ๊ตฌ๋ถํ์ง ์์ต๋๋ค. ์ฆ,
<title>
์์๋<title>, <TITLE>, <Title>, <TiTlE>
๊ณผ ๊ฐ์ด ์ฌ์ฉํ ์ ์์ต๋๋ค. ํ์ง๋ง ๋๊ฒ๋ ๊ฐ๋ ์ฑ๊ณผ ๊ธฐํ ์ด์ ๋๋ฌธ์ ์๋ฌธ์๋ก ์์ฑํฉ๋๋ค.
2. HTML ์์(Element)์ ๊ตฌ์กฐ
์์(Element)์ ๊ธฐ๋ณธ ๊ตฌ์กฐ(Structure)
์๋ฆฌ๋จผํธ์ ์ฃผ์ ๋ถ๋ถ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
-
์ฌ๋ ํ๊ทธ(Opening tag): ์ด๊ฒ์ ์์์ ์ด๋ฆ๊ณผ(์ด ๊ฒฝ์ฐ p), ์ด๊ณ ๋ซ๋ ๊บฝ์ ๊ดํธ๋ก ๊ตฌ์ฑ๋ฉ๋๋ค. ์์๊ฐ ์์(์ด ๊ฒฝ์ฐ ๋จ๋ฝ์ ์์ ๋ถ๋ถ)๋ถํฐ ํจ๊ณผ๊ฐ ์ ์ฉ๋๊ธฐ ์์ํฉ๋๋ค.
-
๋ซ๋ ํ๊ทธ(Closing tag): ์ด๊ฒ์ ์์์ ์ด๋ฆ ์์ ์ฌ๋์(/)๊ฐ ์๋๊ฒ์ ์ ์ธํ๋ฉด ์ฌ๋ ํ๊ทธ(opening tag)์ ๊ฐ์ต๋๋ค. ์ด๊ฒ์ ์์์ ๋(์ด ๊ฒฝ์ฐ ๋จ๋ฝ์ ๋ ๋ถ๋ถ)์ ์์นํฉ๋๋ค. ๋ซ๋ ํ๊ทธ๋ฅผ ์ ์ด์ฃผ์ง ์๋ ๊ฒ์ ํํ ์ด์ฌ์์ ์ค๋ฅ์ด๋ฉฐ, ์ด๊ฒ์ ์ด์ํ ๊ฒฐ๊ณผ๋ฅผ ๋ณ๊ฒ๋ฉ๋๋ค.
-
๋ด์ฉ(Content): ์์์ ๋ด์ฉ์ด๋ฉฐ, ์ด ๊ฒฝ์ฐ ๋จ์ํ ํ ์คํธ์ด๋ค.
-
์์(Element): ์ฌ๋ ํ๊ทธ, ๋ซ๋ ํ๊ทธ, ๋ด์ฉ์ ํตํ์ด ์์(element)๋ผ๊ณ ํ๋ค.
์ค์ฒฉ๋ ์์ Nesting elements
์์ ์์ ๋ค๋ฅธ ์์๊ฐ ๋ค์ด๊ฐ ์ ์์ต๋๋ค. ๊ทธ๋ฐ ์์๋ ๋ดํฌ๋์๋ค๊ณ ํํํฉ๋๋ค. "๊ณ ์์ด๊ฐ ๋งค์ฐ ์ฌ๋ฉ๋ค" ๋ผ๋ ๋ฌธ๋จ์ ๊ฐ์กฐํ๊ธฐ ์ํด์, '๋งค์ฐ'๋ผ๋ ๋จ์ด๋ฅผ ๊ฐ์กฐํ๋ <strong>
์์๋ฅผ ์ค์ฒฉํด์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
<p>My cat is <strong>very</strong> grumpy.</p>
๋ธ๋ญ ๋ ๋ฒจ ์์ vs ์ธ๋ผ์ธ ์์
HTML์๋ ๋๊ฐ์ง ์ข ๋ฅ์ ์์(Element) ๊ฐ ์์ต๋๋ค. ๋ธ๋ก ๋ ๋ฒจ ์์(Block level element) ์ ์ธ๋ผ์ธ ์์(Inline element) ์ ๋๋ค.
-
๋ธ๋ก ๋ ๋ฒจ ์์(Block-level elements) ๋ ์นํ์ด์ง ์์ ๋ธ๋ก(Block)์ ๋ง๋๋ ์์์ ๋๋ค. ๋ธ๋ก ๋ ๋ฒจ ์์๋ ์๋ค ์์ ์ฌ์ด์ ์๋ก์ด ์ค(Line)์ ๋ง๋ค๊ณ ๋ํ๋ฉ๋๋ค. ์ฆ ๋ธ๋ก ๋ ๋ฒจ ์์ ์ด์ ๊ณผ ์ดํ ์์์ฌ์ด์ ์ค์ ๋ฐ๊ฟ๋๋ค. ๋ธ๋ก ๋ ๋ฒจ ์์๋ ์ผ๋ฐ์ ์ผ๋ก ํ์ด์ง์ ๊ตฌ์กฐ์ ์์๋ฅผ ๋ํ๋ผ ๋ ์ฌ์ฉ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด ๊ฐ๋ฐ์๋ ๋ธ๋ก ๋ ๋ฒจ ์์๋ฅผ ์ฌ์ฉํ์ฌ ๋จ๋ฝ(Paragraphs), ๋ชฉ๋ก(lists), ๋ค๋น๊ฒ์ด์ ๋ฉ๋ด(Navigation Menus), ๊ผฌ๋ฆฌ๋ง(Footers) ๋ฑ์ ํํํ ์ ์์ต๋๋ค. ๋ธ๋ก ๋ ๋ฒจ ์์๋ ์ธ๋ผ์ธ ์์(Inline elements)์ ์ค์ฒฉ๋ (Nested inside)์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ธ๋ก ๋ ๋ฒจ ์์๋ ๋ค๋ฅธ ๋ธ๋ก ๋ ๋ฒจ ์์์ ์ค์ฒฉ๋ ์ ์์ต๋๋ค.
-
์ธ๋ผ์ธ ์์(Inline elements)๋ ํญ์ ๋ธ๋ก ๋ ๋ฒจ ์์๋ด์ ํฌํจ๋์ด ์์ต๋๋ค. ์ธ๋ผ์ธ ์์๋ ๋ฌธ์์ ํ ๋จ๋ฝ๊ฐ์ ํฐ ๋ฒ์์๋ ์ ์ฉ๋ ์ ์๊ณ ๋ฌธ์ฅ, ๋จ์ด ๊ฐ์ ์์ ๋ถ๋ถ์ ๋ํด์๋ง ์ ์ฉ๋ ์ ์์ต๋๋ค. ์ธ๋ผ์ธ ์์๋ ์๋ก์ด ์ค(Line)์ ๋ง๋ค์ง ์์ต๋๋ค. ์ฆ ์ธ๋ผ์ธ ์์๋ฅผ ์์ฑํ๋ฉด ๊ทธ๊ฒ์ ์์ฑํ ๋จ๋ฝ๋ด์ ๋ํ๋๊ฒ ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ธ๋ผ์ธ ์์์๋ ํ์ดํผ๋งํฌ๋ฅผ ์ ์ํ๋ ์์์ธ
<a>
, ํ ์คํธ(Text)๋ฅผ ๊ฐ์กฐํ๋ ์์์ธ<em>
,<strong>
๋ฑ์ด ์์ต๋๋ค.
3. ์์ฑ Attributes
์์๋ ๋ค์๊ณผ ๊ฐ์ ์์ฑ์ ๊ฐ์ง ์ ์์ต๋๋ค.
<p class="editor-note">My cat is very Grumpy</p>
์์ฑ์ ์์์ ์ค์ ๋ก ๋ํ๋ด๊ณ ์ถ์ง ์์ง๋ง ์ถ๊ฐ์ ์ธ ๋ด์ฉ์ ๋ด๊ณ ์ถ์ ๋ ์ฌ์ฉํฉ๋๋ค. ์์๋ ๋์ค์ ์คํ์ผ์ ๊ด๋ จ๋ ๋ด์ฉ์ด๋ ๊ธฐํ ๋ด์ฉ์ ์ํด ํด๋น ๋ชฉํ๋ฅผ ๊ตฌ๋ถํ ์ ์๋ class
์์ฑ์ ๋ถ์ฌํ์ต๋๋ค.
- ์์ ์ด๋ฆ ๋ค์์ ๋ฐ๋ก ์ค๋ ์์ฑ์ ์์ ์ด๋ฆ๊ณผ ์์ฑ ์ฌ์ด์ ๊ณต๋ฐฑ์ด ์์ด์ผ ๋๊ณ , ํ๋ ์ด์์ ์์ฑ๋ค์ด ์๋ ๊ฒฝ์ฐ์ ์์ฑ ์ฌ์ด์ ๊ณต๋ฐฑ์ด ์์ด์ผ ํฉ๋๋ค.
- ์์ฑ ์ด๋ฆ ๋ค์์ ๋ฑํธ(=)๊ฐ ๋ถ์ต๋๋ค.
- ์์ฑ ๊ฐ์ ์ด๊ณ ๋ซ๋ ๋ฐ์ดํ๋ก ๊ฐ์ธ์ผ ํฉ๋๋ค.
4. HTML ๋ฌธ์์ ๊ตฌ์กฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
<!DOCTYPE html>
: ๋ฌธ์ ํ์์ ๋ํ๋ธ๋ค.<html></html>
:<html>
์์์ ๋๋ค. ์ด ์์๋ ์ ์ฒด ํ์ด์ง์ ์ฝํ ์ธ ๋ฅผ ํฌํจํ๋ฉฐ, ๊ธฐ๋ณธ ์์๋ก๋ ์๋ ค์ ธ ์์ต๋๋ค.<head></head>
:<head>
์์์ ๋๋ค. ์ด ์์๋ ํํ์ด์ง ์ด์ฉ์์๊ฒ๋ ๋ณด์ด์ง ์์ง๋ง ๊ฒ์ ๊ฒฐ๊ณผ์ ๋ ธ์ถ ๋ ํค์๋, ํํ์ด์ง ์ค๋ช , CSS ์คํ์ผ, character setdeclaration ๋ฑ HTML ํ์ด์ง์ ๋ชจ๋ ๋ด์ฉ์ ๋ด๊ณ ์์ต๋๋ค. ์์ธํ ๋ด์ฉ์ ๋ค์ ์ฅ์์ ๋ค๋ฃน๋๋ค.<meta charset="utf-8">
: ์ด ์์๋ HTML ๋ฌธ์์ ๋ฌธ์ ์ธ์ฝ๋ฉ ์ค์ ์ UTF-8๋ก ์ง์ ํ๋ ๊ฒ์ด๋ฉฐ ์์์์ ์ง์ ํ UTF-8์๋ ์ ์ธ๊ณ์์ ์ฌ์ฉ๋๋ ์ธ์ด์ ๋ํ ๋๋ถ๋ถ์ ๋ฌธ์๊ฐ ํฌํจ๋ฉ๋๋ค. ์ด ์ค์ ์ ์ฌ์ฉํ๋ฉด ํ์ด์ง์ ํฌํจ ๋ ๋ชจ๋ ํ ์คํธ ๋ด์ฉ์ ์ฒ๋ฆฌ ํ ์ ์์ต๋๋ค. ์ด๊ฒ์ ์ค์ ํ๋ฉด ๋์ค์ ๋ฌธ์ ์ธ์ฝ๋ฉ๊ณผ ๊ด๋ จ๋ ์ผ๋ถ ๋ฌธ์ ๋ฅผ ํผํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ผ๋ฏ๋ก ๋ฌธ์ ์ธ์ฝ๋ฉ ์ค์ ์ ํ์ง ์์ ์ด์ ๊ฐ ์์ต๋๋ค.<title></title>
:<title>
์์์ ๋๋ค. ์ด ์์๋ฅผ ์ฌ์ฉํ๋ฉด ํ์ด์ง ์ ๋ชฉ์ด ์ค์ ๋๋ฉฐ ํ์ด์ง๊ฐ ๋ก๋๋๋ ๋ธ๋ผ์ฐ์ ํญ์ ํ์๋๋ ์ ๋ชฉ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค. ํ์ด์ง ์ ๋ชฉ์ ํ์ด์ง๊ฐ ์ฑ ๊ฐํผ ๋ ๋ ํ์ด์ง๋ฅผ ์ค๋ช ํ๋ ๋ฐ์๋ ์ฌ์ฉ๋ฉ๋๋ค.<body></body>
:<body>
์์ ์ฌ๊ธฐ์๋ ํ ์คํธ, ์ด๋ฏธ์ง, ๋น๋์ค, ๊ฒ์, ์ฌ์ ๊ฐ๋ฅํ ์ค๋์ค ํธ๋ ๋ฑ์ ๋น๋กฏํ์ฌ ํ์ด์ง์ ํ์๋๋ ๋ชจ๋ ์ฝํ ์ธ ๊ฐ ํฌํจ๋ฉ๋๋ค.
5. HTML ์ฃผ์
HTML์๋ ์ฝ๋์ ์ฃผ์์ ์์ฑํ๋ ๋ฉ์ปค๋์ฆ์ด ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ์ฃผ์์ ๋ฌด์ํ์ฌ ์ฌ์ฉ์๊ฐ ์ฃผ์์ ๋ณด์ด์ง ์๊ฒํฉ๋๋ค. ์ฃผ์์ ๋ชฉ์ ์ ์ฝ๋์ ๋ฉ๋ชจ๋ฅผ ํฌํจ์์ผ ๋ ผ๋ฆฌ ๋๋ ์ฝ๋ฉ์ ์ค๋ช ํ ์ ์๋๋กํ๋ ๊ฒ์ ๋๋ค.
<p>I'm not inside a comment</p>
<!-- <p>I am!</p> -->
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([HTML] HTML - Structure the Web #01), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@mostlyclear/HTML-HTML-Structure-the-Web-01์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค