02 HTML Basic

  1. ํƒœ๊ทธ

    1. ์š”์†Œ(element): ์—ด๋ฆฌ๊ณ  ๋‹ซํžˆ๋Š” ํƒœ๊ทธ ๊ตฌ์กฐ(ํ•œ ์Œ)

    2. ๋‹ซํžˆ๋Š” ํƒœ๊ทธ ์ด๋ฆ„ ์•ž์— ์Šฌ๋ž˜์‹œ

    3. ๋นˆํƒœ๊ทธ(empty tag): ๋‹ซํžˆ๋Š” ํƒœ๊ทธ๊ฐ€ ์—†์Œ

      ์˜ˆ: <img />

    4. ์›ํ•˜๋Š” ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•˜๋˜, ํ˜ผ์šฉํ•˜์ง€ ๋ง๊ณ  ์‚ฌ์šฉ.

  2. ์†์„ฑ(Attribute)๊ณผ ๊ฐ’(Value)

    1. ํƒœ๊ทธ(์š”์†Œ) ์˜ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•˜๊ธฐ ์œ„ํ•ด '์†์„ฑ' ์‚ฌ์šฉ

       <TAG ์†์„ฑ = '๊ฐ’'></TAG>
    2. ํƒœ๊ทธ A ๊ฐ€ ํƒœ๊ทธ B์˜ ์ฝ˜ํ…์ธ ๋กœ ์‚ฌ์šฉ๋˜๋ฉด

      • ํƒœ๊ทธ B๋Š” ํƒœ๊ทธ A์˜ ๋ถ€๋ชจ์š”์†Œ

      • ํƒœ๊ทธ A๋Š” ํƒœ๊ทธ B์˜ ์ž์‹์š”์†Œ

        <B>
          <A></A>
        </B>
      • ๋ถ€๋ชจ์™€ ์ž์‹ ์š”์†Œ๋Š” ์ƒ๋Œ€์ ์ธ ๊ฐœ๋…

        • ์กฐ์ƒ์š”์†Œ: ๋ถ€๋ชจ์˜ ์ƒ์œ„ ์š”์†Œ

        • ๋ถ€๋ชจ์š”์†Œ

        • ์ž์‹์š”์†Œ

        • ํ›„์†์š”์†Œ: ์ž์‹์˜ ํ•˜์œ„ ์š”์†Œ

  3. HTML ๋ฌธ์„œ์˜ ๋ฒ”์œ„

     <!DOCTYPE html>
     <html>
         <head>
             ๋ฌธ์„œ์˜ ์ •๋ณด
         </head>
         <body>
             ๋ฌธ์„œ์˜ ๊ตฌ์กฐ
         </body>
     </html>
    1. html: ์ „์ฒด ๋ฒ”์œ„, ์›นํ”„๋ผ์šฐ์ €๊ฐ€ ํ•ด์„ํ•  ์‹œ์ž‘๊ณผ ๋์„ ์•Œ๋ ค์ค€๋‹ค.

    2. head: ๋ฌธ์„œ ์ •๋ณด ๋ฒ”์œ„, ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ๋ณธ์„ค์ •

      • title(๋ฌธ์„œ์ œ๋ชฉ)

      • meta(์›น ํŽ˜์ด์ง€ ์ •๋ณด)

        • charset: ๋ฌธ์ž ์ธ์ฝ”๋”ฉ ๋ฐฉ์‹(UTF-8)

        • name: ๊ฒ€์ƒ‰์—”์ง„ ๋“ฑ์— ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ ์ •๋ณด ์ข…๋ฅ˜ (author, description ๋“ฑ)

        • content: name์ด๋‚˜ http-equiv ์†์„ฑ์˜ ๊ฐ’์„ ์ œ๊ณต

      • link: ์™ธ๋ถ€ css ํŒŒ์ผ ์—ฐ๊ฒฐ ์‹œ ์‚ฌ์šฉ, ๋นˆํƒœ๊ทธ

        • rel: ํ˜„์žฌ ๋ฌธ์„œ์™€ ์™ธ๋ถ€๋ฌธ์„œ๊ฐ„์˜ ๊ด€๊ณ„(stylesheet, icon..)

        • href: ์™ธ๋ถ€๋ฌธ์„œ์˜ ์œ„์น˜

      • style: html ๋‚ด๋ถ€์— css ์ž‘์„ฑํ•  ๋•Œ ์‚ฌ์šฉ

      • script: JS ์™ธ๋ถ€ ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ค๊ฑฐ๋‚˜, ๋‚ด๋ถ€์— ์ž‘์„ฑํ•  ๋•Œ ์‚ฌ์šฉ

    3. body: ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•ด์„ํ•ด์•ผํ•  html ๋ฌธ์„œ ๊ตฌ์กฐ๋ฒ”์œ„, (์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๋Š” ๋‚ด์šฉ, ๋ ˆ์ด์•„์›ƒ๋“ฑ)

      • div(division): ๋ฌธ์„œ์˜ ๋ถ€๋ถ„์ด๋‚˜ ์„น์…˜ ์ •์˜, ๋‹จ์ˆœํžˆ wrap ์šฉ๋„

      • img : html์‚ฝ์ž… & css (background) ์‚ฝ์ž… ๊ฐ€๋Šฅ

    4. DOCTYPE(DTD): ๋งˆํฌ์—… ์–ธ์–ด ๋ฌธ์„œ ํ˜•์‹

  4. ์›น ํ‘œ์ค€ ๊ฒ€์‚ฌํ•˜๊ธฐ

    • ํ…Œ์ŠคํŠธ ํ†ต๊ณผ๊ฐ€ ์›นํ‘œ์ค€/์ ‘๊ทผ์„ฑ ์ค€์ˆ˜ ์—ฌ๋ถ€๋ฅผ ์ตœ์ • ๊ฒฐ์ •ํ•˜์ง€ ์•Š๋Š”๋‹ค.

      ๊ธฐ๋ณธ ๋ฌธ๋ฒ• ๊ฒ€์‚ฌ์— ๊ฐ€๊น๋‹ค.

Last updated