3.1 HTML ํƒœ๊ทธ

๋‹น์‹ ์ด ์ด ๊ธ€์„ ์ฝ๊ณ  ์žˆ๋‹ค๋ฉด ๋‹น์‹ ์€ ์žฅ๋ž˜์— ์ž๋ฐ” ๊ฐœ๋ฐœ์ž๋กœ ์ผํ•˜๊ฑฐ๋‚˜ ํ’€์Šคํƒ ์ž๋ฐ” ๊ฐœ๋ฐœ์ž๋กœ ์ผํ•  ๊ฒƒ์ด๋ผ๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. HTML ๋ฌธ์„œ๋Š” ๊ฑฐ์˜ ์ž‘์„ฑํ•˜์ง€ ์•Š์ง€๋งŒ ์ž์ฃผ ์ฝ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค . ์ด๊ฒƒ์ด ์„ธ์ƒ์ด ์ž‘๋™ํ•˜๋Š” ๋ฐฉ์‹์ด๋ฏ€๋กœ HTML ๋ฌธ์„œ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ฐฐ์—ด๋˜์–ด ์žˆ๋Š”์ง€ ํŒŒ์•…ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

HTML ๋ฌธ์„œ์˜ ์‹œ์ž‘์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? html๊ฐ HTML ๋ฌธ์„œ์—๋Š” ์„ธ ๊ฐœ์˜ ์ค‘์ฒฉ ํƒœ๊ทธ( , head๋ฐ ) ๋กœ ๊ตฌ์„ฑ๋œ ๊ตฌ์กฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค body. ๋‹ค์Œ์€ ํ‘œ์ค€ ์˜ˆ์ž…๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html>
    <head>
        Service tags
    </head>
    <body>
        Main document
    </body>
</html>

๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ‘œ์‹œํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์€ ์Œ ํƒœ๊ทธ body(๋ฌธ์„œ ๋ณธ๋ฌธ) ์•ˆ์— ์žˆ์Šต๋‹ˆ๋‹ค. ํƒœ๊ทธ ๋‚ด๋ถ€์—๋Š” head๋ธŒ๋ผ์šฐ์ €์— ๋Œ€ํ•œ ์„œ๋น„์Šค/๋ณด์กฐ ์ •๋ณด๊ฐ€ ํฌํ•จ๋œ ํƒœ๊ทธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

DOCTYPE๋˜ํ•œ ํŒŒ์„œ๊ฐ€ ์˜ค๋ฅ˜๋ฅผ ํ•ด์„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋” ์ž˜ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ฌธ์„œ์˜ ์‹œ์ž‘ ๋ถ€๋ถ„์— ๋ฌธ์„œ ์œ ํ˜•์„ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค(์„ ํƒ ์‚ฌํ•ญ) . ๋งŽ์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊นจ์ง„ ๋ฌธ์„œ๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜๋Š” ๋ฐ˜๋Œ€๋กœ XHTML = XML+HTML์ผ๋ฐ˜์ ์ธ ๊ฒƒ๋ณด๋‹ค ๋” ์—„๊ฒฉํ•œ ๊ทœ์น™์ด ์žˆ๋Š” ํ‘œ์ค€์ด ์žˆ์Šต๋‹ˆ๋‹ค HTML. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๋Ÿฌํ•œ ์ •๋ณด๋Š” ๊ท€ํ•˜๊ฐ€ ์ž์‹ ์˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ž‘์„ฑํ•˜๊ฑฐ๋‚˜ ์ ์–ด๋„ ์ž์‹ ์˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ•  ๋•Œ ์œ ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค HTML-parser.

3.2 ํ—ค๋“œ ํƒœ๊ทธ

ํƒœ๊ทธ ๋‚ด๋ถ€์—๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ , , , ... headํƒœ๊ทธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.titlemetastyle

ํƒœ๊ทธ๋Š” <title> ๋ธŒ๋ผ์šฐ์ € ํƒญ์— ํ‘œ์‹œ๋˜๋Š” ๋ฌธ์„œ์˜ ์ด๋ฆ„์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

ํƒœ๊ทธ๋Š” <meta>๊ฐ์ข… ์„œ๋น„์Šค ์ •๋ณด๋ฅผ ์„ค์ •ํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ HTML ๋ฌธ์„œ์˜ ์ธ์ฝ”๋”ฉ์„ ์ดํ•ดํ•˜๋„๋ก ๋„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(๊ธฐ์–ตํ•œ๋‹ค๋ฉด ์—ฌ๊ธฐ์—๋Š” ์ผ๋ฐ˜ ํ…์ŠคํŠธ๊ฐ€ ํฌํ•จ๋จ).


<html>
    <head>
        <title> Escape character</title>
           <meta charset="utf-8" />
   </head>
    <body>
 
    </body>
</html>

3.3 ๋ณธ๋ฌธ, p, b ํƒœ๊ทธ

ํƒœ๊ทธ์—๋Š” <body>๋ธŒ๋ผ์šฐ์ €์— ํ‘œ์‹œ๋  ๋ชจ๋“  html ํ…์ŠคํŠธ๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ๋ฌธ์„œ๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ํƒœ๊ทธ๋Š” , <h1>, <p>,<b><br>

<h1>- ์ด๊ฒƒ์€ ์Œ ํƒœ๊ทธ์ด๋ฉฐ ํŽ˜์ด์ง€/๊ธฐ์‚ฌ์˜ ์ œ๋ชฉ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ์‚ฌ๊ฐ€ ๊ธธ๊ณ  ๋ถ€์ œ๋ชฉ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์ด ๊ฒฝ์šฐ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค <h2>.<h3><h6>

์˜ˆ:


<body>
     <h1>Cats</h1>
          <h2> Description of cats</h2>
            detailed description of cats
          <h2> Origin of cats</h2>
              Information about the origin of cats.
          <h2> Cat paws</h2>
              Huge article about the paws of cats
</body>

๊ธฐ์‚ฌ๊ฐ€ ํฌ๊ณ  ๋‹จ๋ฝ์œผ๋กœ ๋‚˜๋ˆ„์–ด ์ฝ๊ธฐ ์‰ฝ๋„๋ก ํ•˜๋ ค๋ฉด ์ด๋ฅผ ์œ„ํ•ด ( <p>๋‹จ๋ฝ์ด๋ผ๋Š” ๋‹จ์–ด์—์„œ) ์Œ ํƒœ๊ทธ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํ…์ŠคํŠธ๋ฅผ ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ๊ธฐ๋งŒ ํ•˜๋ฉด <p>๋ธŒ๋ผ์šฐ์ € </p>์—์„œ ๋ณ„๋„์˜ ๋‹จ๋ฝ์œผ๋กœ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

์ฃผ๋ชฉ! ๋ธŒ๋ผ์šฐ์ €๋Š” ์ค„ ๋ฐ”๊ฟˆ ๋ฐ/๋˜๋Š” ํ…์ŠคํŠธ์˜ ์ถ”๊ฐ€ ๊ณต๋ฐฑ์„ ๋ฌด์‹œํ•ฉ๋‹ˆ๋‹ค. ์ค„ ๋ฐ”๊ฟˆ์„ ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด ํ…์ŠคํŠธ์— ๋‹จ์ผ ํƒœ๊ทธ <br>( ์ค„ ๋ฐ”๊ฟˆ์—์„œ)๋ฅผ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.

์Œ, ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋ถ€๋ถ„์€ ํ…์ŠคํŠธ๋ฅผ ๊ตต๊ฒŒ ๊ฐ•์กฐ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ…์ŠคํŠธ๋ฅผ ๊ตต๊ฒŒ ํ‘œ์‹œํ•˜๋ ค๋ฉด ํƒœ๊ทธ๋กœ ๋ฌถ์Šต๋‹ˆ๋‹ค <b> </b>(from b old).