2.1 ํ๊ทธ ์๊ฐ
๋งํฌ์
์ ํ๊ทธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก HTML-documents
ํฉ๋๋ค . ํ๊ทธ ๋ ๋ฌด์์
๋๊น ?
์ฌ๋๋ค์ด ์ด๋ฌํ ๋ฌธ์๋ฅผ ์ฒ๋ฆฌํ๋ ํ๋ก๊ทธ๋จ์ ๋ฌธ์์ ์๋น์ค ์ ๋ณด๋ฅผ ์ถ๊ฐํ ์ ์๋๋ก ํ๊ทธ๊ฐ 70๋ ๋์ ๋ฐ๋ช ๋์์ต๋๋ค.
Tag
- ์ด๊ฒ์ ํ๋ก๊ทธ๋จ์ด ํ๊ทธ์ ์์ด์ ์ผ๋ฐ ๋จ์ด๋ฅผ ํผ๋ํ์ง ์๋๋ก ๊บพ์ ๊ดํธ(์์๊ฐ ๋ง๊ฑฐ๋ ์ ์)๋ก ๋๋ฌ์ธ์ธ ์ฃผ์(๊ธฐ๋ฅ์ ) ๋จ์ด์
๋๋ค.
ํ๊ทธ์๋ ๋ฌธ์๋ฅผ ์ฒ๋ฆฌํ๋ ํ๋ก๊ทธ๋จ์ ์ ์ฉํ ๋ค์ํ ์๋น์ค ์ ๋ณด๊ฐ ํฌํจ๋ ์๋ ์์ต๋๋ค.
ํ๊ทธ๊ฐ ์๋ ์์ ํ ์คํธ:
<a href="http://codegym.cc/about">
Link to something interesting
</a>
์ด ์์์๋ ํ ์คํธ "a" ํ๊ทธ์ ์๋น์ค ์ ๋ณด(ํ๊ทธ ์์ฑ)๋ฅผ ๋ณผ ์ ์์ต๋๋ค. ์๋์์ ๊ทธ๋ค์ ๋ํด ์์ธํ ์์๋ณผ ๊ฒ์ ๋๋ค.
2.2 ํ๊ทธ ์ ํ: ์ด๊ธฐ, ๋ซ๊ธฐ, ๋น ํ๊ทธ
ํ๊ทธ๋ ๋ค๋ฅธ ์ ํ์ ๋๋ค. ์ฒซ์งธ, ๊ทธ๋ค์ ์ฑ๊ธ๊ณผ ๋๋ธ์ ๋๋ค. ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ๊ฒ์ ์์ ์ด๋ฃฌ ํ๊ทธ ์ ๋๋ค . ์ด๋ฏธ ์ง์ํ์ จ๊ฒ ์ง๋ง, ๊ทธ๋ค์ ํญ์ ์์ผ๋ก ์์ง์ ๋๋ค. ์ด๋ฆผ๊ณผ ๋ซํ์ด๋ผ๊ณ ๋ ํฉ๋๋ค.
์ฌ๋ ํ๊ทธ๋ ์ผ๊ฐํ ๊ดํธ ์์ ํค์๋์ผ ๋ฟ์ ๋๋ค. ์:
<h1>
๋ซ๋ ํ๊ทธ๋ ์ฌ๋ ํ๊ทธ์ ๋น์ทํ์ง๋ง ํค์๋ ์์ ์ฌ๋์๊ฐ ๋ถ์ต๋๋ค. ์:
</h1>
์ฌ๋ ํ๊ทธ์๋ ์๋น์ค ์ ๋ณด(์์ฑ, ๋ซ๋ ํ๊ทธ)๊ฐ ํฌํจ๋ ์ ์์ต๋๋ค . ์์ ํ๊ทธ๋ ํญ์ ์์ ์ฒซ ๋ฒ์งธ ํ๊ทธ์
๋๋ค. ๋ซ๋ ํ๊ทธ๋ ํ
์คํธ์์ ๋จผ์ ์ฌ ์ ์์ผ๋ฉฐ ์ฌ๋ ํ๊ทธ ๋ค์์ ์ฌ ์ ์์ต๋๋ค. HTML-document
์ ํจํ์ง ์์ต๋๋ค .
๋จ์ผ ํ๊ทธ์๋ ๋ซ๋ ํ๊ทธ๊ฐ ์์ต๋๋ค. ์ด๋ฌํ ํ๊ทธ ๋ชฉ๋ก์ ์ ์ํด ์ ์๋ฉ๋๋ค HTML-standard
. ์ด๋ฌํ ํ๊ทธ์ ์:
<br>
- ์ค ๋ฐ๊ฟ;<img>
- ๊ทธ๋ฆผ.
๊ทธ๊ฑด ๊ทธ๋ ๊ณ , ์์ ์ด๋ฃฌ ํ๊ทธ๋ ๋ด๋ถ์ ์ ๋ณด๊ฐ ํฌํจ๋์ด ์์ง ์์ผ๋ฉด ์ฝ์์ผ๋ก ์์ฑํ ์ ์์ต๋๋ค . ์:
<h1/>
์ด๊ฒ์ ๋จ์ผ ํ๊ทธ๊ฐ ์๋๋ผ ๋น ์ ํ๊ทธ์ ๋๋ค. ๋ซํ ํ๊ทธ์ ์ด๋ฆฐ ํ๊ทธ๊ฐ ๋์์ ์๋ ๊ฒ๊ณผ ๊ฐ์ต๋๋ค. ์ฌ๋์๊ฐ ๋(๋ ๋ฒ์งธ ์ผ๊ฐ ๊ดํธ ์)์ ์๋ค๋ ์ ์์ ๋ซํ ํ๊ทธ์ ๋ค๋ฆ ๋๋ค.
2.3 ํ๊ทธ ํธ๋ฆฌ
ํ์ด๋ง๋ ํ๊ทธ์ ๋ํ ๋ ์ค์ํ ์ ๋ณด์
๋๋ค. ๋ฌธ์์ ์ฌ๋ฌ ๊ฐ๊ฐ ์์ ์ ์์ผ๋ฉฐ ์ค์ฒฉ๋ ์ ์์ต๋๋ค. ๋ฌด์จ ๋ป์ด์์? ์ฆ, HTML-document
๋ค๋ฅธ ํ๊ทธ๊ฐ ํฌํจ๋์ด ์๋๋ผ๋ ํ
์คํธ ๋ด์ ๋ชจ๋ ํ
์คํธ๋ฅผ ํ๊ทธ๋ก ๋๋ฌ์ ์ ์์ต๋๋ค. ์:
<html>
plain text
<a href="http://codegym.cc/about">
Link to something interesting
</a>
some other text
</html>
๋๋ต์ ์ผ๋ก ๋งํ๋ฉด html ํ ์คํธ์์ ์ผ๋ จ์ ํ๊ทธ๊ฐ ๋ํ๋ ์ ์์ต๋๋ค.
<h1> <h2> </h2> </h1>
๊ทธ๋ฌ๋ ๋ค์๊ณผ ๊ฐ์ ์๋ ์์ต๋๋ค.
<h1> <h2> </h1> </h2>
์์ ํ๊ทธ๊ฐ -tag ์ <h2>
์์ ์์ผ๋ฉด <h1>
์ผ์นํ๋ ๋ ํ๊ทธ ๋ -tag ์ </h2>
์์ ์์ด์ผ ํฉ๋๋ค .<h1>
๋ฐ๋ผ์ ๋ชจ๋ ๋ฌธ์ ํ๊ทธ๋ ์ผ์ข
์ ํ๊ทธ ํธ๋ฆฌ๋ฅผ ํ์ฑํฉ๋๋ค . ๋จผ์ ์ผ๋ฐ์ ์ผ๋ก ๋ผ๊ณ ํ๋ ์ ์ฒด ๋ฌธ์๋ฅผ ๊ฐ์ธ๋ ์ต์์ ํ๊ทธ๊ฐ ์ต๋๋ค <html>
. ์ฌ๊ธฐ์๋ ํ์ ํ๊ทธ ์์ด ์๊ณ ๊ณ ์ ํ ํ๊ทธ ์์ด ์์ต๋๋ค.
์ค์ ๋ก ํ๊ทธ๊ฐ ์๋ ๋ฌธ์๋ฅผ ์ฒ๋ฆฌํ๋ ํ๋ก๊ทธ๋จ์ ๋ด๋ถ์ ์ผ๋ถ ํ ์คํธ๊ฐ ์๋ ํ๊ทธ ํธ๋ฆฌ์ ๊ฐ์ด ๋ฌธ์๋ฅผ ์ ํํ๊ฒ ์ธ์ํฉ๋๋ค.
2.4 ์์ฑ
์์ฑ์ ๋ํด ์ด์ผ๊ธฐํ์ง ์์ผ๋ฉด ํ๊ทธ์ ๋ํ ์ ๋ณด๊ฐ ์์ ํ์ง ์์ต๋๋ค. ๋จ์ผ ํ๊ทธ์ ์์ ์ด๋ฃฌ ํ๊ทธ์ ์์ ํ๊ทธ๋ . ์ด๋ฌํ ์์ฑ์๋ ํ๊ทธ ๋ด์ฉ์ ๋ํ ์ ์ฉํ ์ ๋ณด๊ฐ ํฌํจ๋์ด ์์ต๋๋ค.
ํ๊ทธ๋ ์ฌ๋ฌ ์์ฑ์ ํฌํจํ ์ ์์ผ๋ฉฐ ๋ค์๊ณผ ๊ฐ์ ์ผ๋ฐ ํ์์ ๊ฐ์ต๋๋ค.
<tag name1="value1" name2="value2">
Name
๊ฐ ์์ฑ์ ๋ฐ ์ ์์ผ๋ก ์ง์ ๋ฉ๋๋ค meaning
. ์ฌ๋ฌ ์์ฑ์ด ์์ ์ ์์ต๋๋ค.
ยซ<ยป
๊ทธ๋ฌ๋ ์๋ จ๋ ํ๋ก๊ทธ๋๋จธ๋ ์ฆ์ ๋ค์๊ณผ ๊ฐ์ ์ง๋ฌธ์ ํ ๊ฒ์
๋๋ค. ๋ฌธ์ ๋ ยซ>ยป
๋ฐ์ดํ๋ฅผ ํฌํจํ๋ ํ
์คํธ๋ฅผ ์์ฑ ๊ฐ์ผ๋ก ์ฌ์ฉํด์ผ ํ๋ ๊ฒฝ์ฐ ์ด๋ป๊ฒ ํด์ผ ํฉ๋๊น?
๊ธฐํธ ์ด๋ฆ | ์์ง | HTML ํญ๋ชฉ |
---|---|---|
ํฐ๋ฐ์ดํ | " | " |
์ฐํผ์๋ | & | & |
๋ณด๋ค ์์ ๊ธฐํธ | < | < |
๋ ๋ง์ ๊ธฐํธ | > | > |
๊ณต๊ฐ | ||
์์๋ฐ์ดํ | ' | ' |