๐Ÿ“Œ ์šฉ์–ด ์ •๋ฆฌ

์ธํ„ฐ๋„ท(Internet)

  • ๋งŽ์€ ์ˆ˜์˜ ์ปดํ“จํ„ฐ ๋„คํŠธ์›Œํฌ๋ฅผ ์ „์„ธ๊ณ„์ ์œผ๋กœ ์—ฐ๊ฒฐํ•œ ๋„คํŠธ์›Œํฌ

์›น ํŽ˜์ด์ง€

  • ์ธํ„ฐ๋„ท์—์„œ ์›น๋ธŒ๋ผ์šฐ์ €๋กœ ๋ณผ ์ˆ˜ ์žˆ๋Š” ํ•˜๋‚˜์˜ ํ™”๋ฉด
  • ์›น ํŽ˜์ด์ง€๋Š” HTML ๋งˆํฌ์—… ์–ธ์–ด๋กœ ๊ธฐ์ˆ ๋œ ํ…์ŠคํŠธํŒŒ์ผ(HTMLํŒŒ์ผ)

์›น์‚ฌ์ดํŠธ(web site)

  • ์—ฌ๋Ÿฌ ์›นํŽ˜์ด์ง€๋ฅผ ๋ชจ์•„ ํ•˜๋‚˜๋กœ ๋ฌถ์€ ๊ฒƒ

HTML(HyperText Markup Lagnguage)

HTML์€ ์›นํŽ˜์ด์ง€๋ฅผ ๊ธฐ์ˆ ํ•˜๊ธฐ ์œ„ํ•œ ์–ธ์–ด์ด๋‹ค. ์›นํŽ˜์ด์ง€๊ฐ€ ์–ด๋–ค ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ ธ์žˆ๋Š”์ง€ ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด ์ œ๋ชฉ,๋‹จ๋ฝ, ํ‘œ ๋“ฑ์„ ์ •์˜ํ•œ๋‹ค.
๋˜ํ•œ ์ด๋ฏธ์ง€, ํ…์ŠคํŠธ, ๋น„๋””์˜ค, ๋ฒ„ํŠผ ๋“ฑ ์›น์‚ฌ์ดํŠธ์— ๋ณด์—ฌ์ค„ ๋‚ด์šฉ์„ ๊ตฌ์„ฑํ•œ๋‹ค. ๋ธŒ๋ผ์šฐ์ €(safari, chrome, ie..)๋Š” HTMLํŒŒ์ผ์„ ํ†ตํ•ด ์–ด๋–ป๊ฒŒ ํ™”๋ฉด์— ๊ทธ๋ ค๋‚ด๋ฉด ๋˜๋Š”์ง€ ํŒŒ์•…ํ•œ ํ›„์— ์›น ํŽ˜์ด์ง€๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.

2. HTML ํŒŒ์ผ

HTML์€ .html ํ™•์žฅ์ž๊ฐ€ ๋ถ™์€ ํ…์ŠคํŠธ ํŒŒ์ผ์ด๋‹ค.
ํ…์ŠคํŠธํŽธ์ง‘๊ธฐ(Text Editor)๊ฐ™์€ ๊ฐ„๋‹จํ•œ ๋ฉ”๋ชจ์ž‘์„ฑ ์•ฑ์„ ์—ด๊ณ , .html ํ™•์žฅ์ž๋กœ ์ €์žฅํ•œ ํ›„์— ํ•ด๋‹นํŒŒ์ผ์„ ๋ธŒ๋ผ์šฐ์ €(ํฌ๋กฌ)์— drag & drop ํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €์—์„œ HTML๋กœ ์ž‘์„ฑํ•œ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>๋ฌธ์„œ ์ œ๋ชฉ</title>
    <style>
      /* ๋‚ด๋ถ€ CSS */
    </style>
    <script>
      // ๋‚ด๋ถ€ JavaScript
    </script>
  </head>
  <body>
    <header>
      <h1>์ œ๋ชฉ</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">ํ™ˆ</a></li>
        <li><a href="#">์†Œ๊ฐœ</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <h2>์„น์…˜ ์ œ๋ชฉ</h2>
        <p>์„น์…˜ ๋‚ด์šฉ</p>
      </section>
    </main>
    <footer>
      <p>&copy; ํ‘ธํ„ฐ ๋‚ด์šฉ</p>
    </footer>
  </body>
</html>

3. HTML tag

๋ธŒ๋ผ์šฐ์ €๋Š” HTML๋ฌธ์„œ๋ฅผ ์ฝ๊ณ  ์•Œ์•„์„œ tag๋ฅผ ๋ถ™์—ฌ์ฃผ์ง€๋งŒ, ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๋ฌธ๋ฒ•์— ๋งž๊ฒŒ HTML ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค๊ณ ํ•œ๋‹ค.
HTMLํŒŒ์ผ์— ํ•„์š”ํ•œ ์ตœ์†Œํ•œ์˜ ํƒœ๊ทธ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค. ์ถ”๊ฐ€ํ•˜๊ธฐ ํƒœ๊ทธ์™€ ๊ด€๋ จํ•˜์—ฌ HTML ๊ธฐ์ดˆ ์šฉ์–ด(tag, content, attribute, element)๋ฅผ ์•Œ์•„๋ณด์ž.

3-1. tag(ํƒœ๊ทธ), content(๋‚ด์šฉ)

HTML์—์„œ๋Š” <>๋กœ ๊ฐ์‹ผ ํƒœ๊ทธ ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์›นํŽ˜์ด์ง€์— ํ‘œ์‹œํ•  ํ…์ŠคํŠธ๋‚˜ ์ด๋ฏธ์ง€, ๋งํฌ ๋“ฑ์„ ๊ธฐ์ˆ  ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” ํƒœํฌ ์•ˆ์˜ ๋‚ด์šฉ์„ ์ฝ๊ณ  โ€˜์•„, ์ด๊ฒƒ์€ ํ…์ŠคํŠธ๊ตฌ๋‚˜, ์ €๊ฒƒ์€ ์ด๋ฏธ์ง€๊ตฌ๋‚˜โ€™ํ•˜๊ณ  ์•Œ ์ˆ˜ ์žˆ๋‹ค.
ํƒœ๊ทธ๋Š” <> ๋กœ ๊ฐ์‹ธ์ ธ ์žˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ €์—์„œ ํƒœ๊ทธ(tag)(<ํƒœ๊ทธ์ด๋ฆ„>๊ณผ )์€ ๋ณด์—ฌ์ฃผ์ง€ ์•Š๋Š”๋‹ค. ์ฆ‰, ๋‚ด์šฉ(content) ๋ถ€๋ถ„๋งŒ ๋ณด์—ฌ์ค€๋‹ค. ๋‚ด์šฉ์˜ ์™ผ์ชฝ์— ์žˆ๋Š” ๊ฒƒ์ด ์‹œ์ž‘ ํƒœ๊ทธ(opening tag)์ด๊ณ , ๋‚ด์šฉ ์šฐ์ธก์— ์žˆ๋Š” ๊ฒƒ์ด ์ข…๋ฃŒ ํƒœ๊ทธ(closing tag)์ด๋‹ค. ์ข…๋ฃŒํƒœ๊ทธ ๊ด„ํ˜ธ๋ฅผ ๋‹ซ๊ธฐ์ „์— /(slash)๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๊ผญ ๊ธฐ์–ตํ•˜์ž. ๋Œ€๋ถ€๋ถ„์˜ ํƒœ๊ทธ๋Š” ์‹œ์ž‘ํ•˜๋ฉด ๊ผญ ๋๋งบ์Œ์„ ํ•ด์•ผํ•œ๋‹ค. ์ฆ‰, ์‹œ์ž‘ํƒœ๊ทธ๊ฐ€ ์žˆ์œผ๋ฉด ๋ ํƒœ๊ทธ๋„ ๊ผญ ์žˆ์–ด์•ผํ•œ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.

์•„๋ž˜์˜ ํƒœ๊ทธ๋Š” ์‹œ์ž‘๊ณผ ๋ ํƒœ๊ทธ๊ฐ€ ์กด์žฌํ•œ๋‹ค.

์ถ”๊ฐ€ํ•˜๊ธฐ

๋ฐ˜๋ฉด์— ์‹œ์ž‘๊ณผ ๋™์‹œ์— ์ข…๋ฃŒ๋˜๋Š” ํƒœ๊ทธ๋„ ์กด์žฌํ•œ๋‹ค. ์ด๋Ÿฐ ํƒœ๊ทธ๋Š”, ํƒœ๊ทธ์™€ ํƒœ๊ทธ ์‚ฌ์ด์— ๋‚ด์šฉ๋ถ€๋ถ„์ด ํ•„์š” ์—†๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋‚˜์ค‘์— ์ง์ ‘ ์จ๋ณด๋ฉฐ ๋” ์ž์„ธํžˆ ์‚ดํŽด๋ณด์ž.

https://www.w3schools.com/tags/tag_a.asp ์—์„œ ํƒœ๊ทธ๋“ค์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค.

3-2. attribute(์†์„ฑ)

์†์„ฑ์€ ์‹œ์ž‘ ํƒœ๊ทธ์— ์œ„์น˜ํ•˜๋ฉฐ ํ•œ ํƒœ๊ทธ์— ์—ฌ๋Ÿฌ ์†์„ฑ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. div, a, img๋Š” ํƒœ๊ทธ์ด๊ณ  class, href, src, alt๋Š” ์†์„ฑ์ด๋‹ค.

์นดํ…Œ๊ณ ๋ฆฌ:

์—…๋ฐ์ดํŠธ:

๋Œ“๊ธ€๋‚จ๊ธฐ๊ธฐ