๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“บ Front End/-- HTML & CSS

1. Html ๊ธฐ์ดˆ

by Wonit 2019. 11. 27.

HTML

HyperTextMarkupLanguage ์€ ์›น์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํ•˜์ดํผํ…์ŠคํŠธ ๋ฌธ์„œ ๋˜๋Š” ํŽ˜์ด์ง€๋ฅผ ํƒœ๊ทธ(Tag) ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ž‘์„ฑํ•˜๋Š” ๋งˆํฌ์—… ์–ธ์–ด์ด๋‹ค.

HTML ์ข…๋ฅ˜ ๋ฐ ๋ฐœ์ „ ๊ณผ์ •

  • HTML 2.0

    HTML 2.0 ์€ ์ด์ „๊นŒ์ง€ ์‚ฌ์šฉ๋˜๋˜ HTML์„ ํ‘œ์ค€ํ™” ์‹œ์ผฐ๊ณ  ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌธ์„œ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•˜๋„๋ก ํ•˜๋ฉฐ ์ œ๋ชฉ, ๋ฌธ๋‹จ, ๋ชฉ๋ก, form์„ ์ด์šฉํ•˜์—ฌ ์ž‘์„ฑ, ์ด๋ฏธ์ง€ ์‚ฝ์ž…, ํ•˜์ดํผ ๋งํฌ ๋“ฑ์˜ ๊ธฐ๋Šฅ์„ ํฌํ•จํ•œ๋‹ค

  • HTML 3.2

    HTML 2.0์— ๋ช…์‹œ๋œ ๊ธฐ๋Šฅ ์™ธ์—ฉ ํ…Œ์ด๋ธ”, ํ”„๋ ˆ์ž„, ์ฒจ์ž ํ‘œํ˜„ ๋“ฑ์„ ์ถ”๊ฐ€ํ•˜์˜€์œผ๋ฉฐ ๋‚˜์•„๊ฐ€ ์ž๋ฐ” ์• ํ”Œ๋ฆฟ ์„ ์›น ๋ฌธ์„œ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜์˜€๋‹ค.

  • HTML 4.01

    ์ตœ์ดˆ๋กœ CSS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํฐํŠธ, ๋ ˆ์ด์•„์›ƒ๋“ฑ์˜ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์—ˆ๊ณ  ํ…Œ์ด๋ธ” ๋ฐ ํ”„๋ ˆ์ž„์˜ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•˜์˜€๋‹ค. ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์Œ์„ฑ ํ•ฉ์„ฑ๊ณผ ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ์š”์†Œ๋ฅผ ์›น์— ํฌํ•จ์‹œ ํ‚ฌ ์ˆ˜ ์žˆ์—ˆ๊ณ  ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๋ฅผ ์ œ๊ณตํ•˜์˜€๋‹ค.

  • HTML 5

    ์ตœ๊ทผ ์›น์˜ ์ง„ํ™”๋กœ ์ธํ•ด ์›น์€ ๋‹จ์ˆœํžˆ ์ •๋ณด๋ฅผ ์–ป๋Š” ๊ฒƒ์—์„œ ๋‹ค์–‘ํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•œ ๊ฒƒ์œผ๋กœ ๋ณ€ํ™”ํ•˜์˜€๋‹ค. ๊ธฐ์กด์—๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์‹คํ–‰์„ ์œ„ํ•˜์—ฌ ActiveX๋‚˜ flash๊ณผ ๊ฐ™์€ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๋”ฐ๋กœ ์„ค์น˜ํ•ด์•ผ ํ–ˆ์ง€๋งŒ ์ด๋ฅผ ๊ทน๋ณตํ•˜์—ฌ ํ”Œ๋Ÿฌ๊ทธ์ธ ์—†๋Š” ๋™์˜์ƒ, ์‚ฌ์šด๋“œ, ๊ทธ๋ž˜ํ”ฝ ๋“ฑ ๋‹ค์–‘ํ•œ ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ์ฝ˜ํ…์ธ ๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

  • XML

  • XHTML

    ์ƒ๋žต

HTML ํƒœ๊ทธ

ํƒœ๊ทธ

HTML์€ ํƒœ๊ทธ๋กœ ๊ตฌ์„ฑ๋˜๋ฉฐ < > ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ‘œ๊ธฐ๋œ๋‹ค.

์‹œ์ž‘ ํƒœ๊ทธ

< >

์ข…๋ฃŒ ํƒœ๊ทธ

</ >

๋‚ด์šฉ

<tag> context </tag>

ex) ํƒœ๊ทธ์˜ ํ˜•์‹ ๋ฐ ์˜ˆ

<Tag> ๋‚ด์šฉ(context) </Tag>
----------------------------
<title> ์•„์ด๋”” ์ฐพ๊ธฐ </title>

ํƒœ๊ทธ์˜ ํŠน์ง•

  • ํƒœ๊ทธ๋ฅผ ์ค‘์ฒฉํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
    Html์—์„œ ํƒœ๊ทธ๋ฅผ ์ค‘์ฒฉํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ํƒœ๊ทธ์˜ ๋“ฑ์žฅ ์ˆœ์„œ์— ๋”ฐ๋ผ ์‹œ์ž‘ ํƒœ๊ทธ, ์ข…๋ฃŒ ํƒœ๊ทธ์˜ ์œ„์น˜๊ฐ€ ๋งž์•„์•ผ ํ•œ๋‹ค. ๋˜ํ•œ ํƒœ๊ทธ๋Š” ํฌํ•จ๊ด€๊ณ„๋ฅผ ๊ฐ–๋Š”๋‹ค.
<center> <font size="2"> ์˜ฌ๋ฐ”๋ฅธ ํƒœ๊ทธ </font></center>
<center> <font size="2"> ์˜ฌ๋ฐ”๋ฅด์ง€ ์•Š์€ ํƒœ๊ทธ> </center></font>
  • ํƒœ๊ทธ์˜ ์ด๋ฆ„์€ ๋Œ€์†Œ๋ฌธ์ž๋ฅผ ๊ตฌ๋ถ„ํ•˜์ง€ ์•Š๋Š”๋‹ค.

    <TITLE> ์ด๋‚˜ <title>์ด๋‚˜ ๊ฐ™์€ ํƒœ๊ทธ๋กœ ์ธ์‹ํ•œ๋‹ค.
  • ์—ฐ์ด์€ ์—ฌ๋Ÿฌ๊ฐœ์˜ ๊ณต๋ฐฑ ๋ฌธ์ž๋Š” ํ•˜๋‚˜๋กœ ์ถœ๋ ฅ๋œ๋‹ค.


HTML ๋ฌธ์„œ ๊ธฐ๋ณธ ๊ตฌ์กฐ

๋ชจ๋“  HTML ๋ฌธ์„œ๋Š” ๋จธ๋ฆฌ(head)์™€ ๋ชธํ†ต(body)์˜ ๋‘ ๋ถ€๋ถ„์œผ๋กœ ๊ตฌ์„ฑ ๋œ๋‹ค.

<html> ----------------------------------------------- html ๋ฌธ์„œ์˜ ์‹œ์ž‘
  <head>---------------------------------------------- ๋ฌธ์„œ์˜ ๋จธ๋ฆฌ
    <title> ๋ฌธ์„œ์˜ ์ œ๋ชฉ </title>---------------------- ๋ฌธ์„œ์˜ ์ œ๋ชฉ
    <meta>-------------------------------------------- ๋ฌธ์„œ์˜ ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ
  </head>
  <body>---------------------------------------------- ๋ฌธ์„œ์˜ ๋ชธํ†ต
    -------------------------------------------------- ๋ฌธ์„œ์˜ ๋‚ด์šฉ
  </body>
</html> ---------------------------------------------- ๋ฌธ์„œ์˜ ์ข…๋ฃŒ

'๐Ÿ“บ Front End > -- HTML & CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

6. HTML ํผ ํƒœ๊ทธ  (0) 2019.11.29
5. HTML ํ”„๋ ˆ์ž„  (0) 2019.11.29
4. HTML ํ…Œ์ด๋ธ”  (0) 2019.11.29
3. HTML ์ด๋ฏธ์ง€ ์‚ฝ์ž…  (0) 2019.11.28
2. HTML ๊ธฐ๋ณธ ํƒœ๊ทธ  (0) 2019.11.27

๋Œ“๊ธ€