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 ํ•ญ๋ชฉ
ํฐ๋”ฐ์˜ดํ‘œ " "
์•ฐํผ์ƒŒ๋“œ & &
๋ณด๋‹ค ์ž‘์Œ ๊ธฐํ˜ธ < <
๋” ๋งŽ์€ ๊ธฐํ˜ธ > >
๊ณต๊ฐ„  
์ž‘์€๋”ฐ์˜ดํ‘œ ' '