Client/HTML

[HTML] HTML์ด๋ž€? HTML ๊ฐœ๋… ๋ฐ ์š”์†Œ์™€ ๊ตฌ์กฐ

meeeeejin 2021. 4. 27. 10:55

๋ชฉ์ฐจ

  • HTML์ด๋ž€?
  • HTML ์š”์†Œ
  • HTML ๊ตฌ์กฐ

 

 

HTML์ด๋ž€?

  • HyperText Markup Language์˜ ์•ฝ์ž
  • HyperText
    - ํ•˜์ดํผ๋งํฌ๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ์ˆœ์„œ๋กœ ํ•œ ๋ฌธ์„œ์—์„œ ๋‹ค๋ฅธ ๋ฌธ์„œ๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ํ…์ŠคํŠธ
    - ์˜ˆ์‹œ) ์•„๋ž˜์˜ ์บก์ฒ˜์—์„œ ๋ชฉ์ฐจ์˜ ๋งํฌ๋ฅผ ๋ˆ„๋ฅด๋ฉด ํ•ด๋‹น ๋‚ด์šฉ์œผ๋กœ ์ด๋™

https://ko.wikipedia.org/wiki/ํ•˜์ดํผ๋งํฌ

  • Markup Language
    - ํƒœ๊ทธ(๋งˆํฌ, ํ‘œ์‹œ)๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฌธ์„œ๋‚˜ ๋ฐ์ดํ„ฐ์˜ ๊ตฌ์กฐ๋ฅผ ๋ช…์‹œํ•˜๋Š” ์–ธ์–ด
    - ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๊ธฐ ์ข‹๊ฒŒ ๋ฌธ์„œ๋ฅผ ๊ตฌ์กฐํ™”
  • HyperText Markup Language
    - ์›น ํŽ˜์ด์ง€์˜ ๊ตฌ์กฐ ํ˜น์€ ๋ฐ์ดํ„ฐ ์ž‘์„ฑ์„ ์œ„ํ•œ ๋งˆํฌ์—… ์–ธ์–ด

 

 

 

 

HTML ์š”์†Œ(element)

<h1>์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐ•์ขŒ</h1>
  • ์š”์†Œ๋Š” ์‹œ์ž‘ ํƒœ๊ทธ(Start Tag), ๋‚ด์šฉ(Contents), ์ข…๋ฃŒ ํƒœ๊ทธ(End Tag)๋กœ ์ด๋ฃจ์–ด์ง
  • ์œ„์˜ ์˜ˆ์‹œ์—์„œ ์‹œ์ž‘ ํƒœ๊ทธ๋Š” <h1>, ๋‚ด์šฉ์€ ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐ•์ขŒ, ์ข…๋ฃŒ ํƒœ๊ทธ๋Š” </h1>
  • ํƒœ๊ทธ๋Š” ๋ฌธ์„œ์˜ ๋‚ด์šฉ์„ ๊ตฌ๋ถ„ํ•˜๊ณ  ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋จ
  • ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ์ปดํ“จํ„ฐ(๋ธŒ๋ผ์šฐ์ €)์—๊ฒŒ ์–ด๋””๋ถ€ํ„ฐ ์–ด๋””๊นŒ์ง€๊ฐ€ ํ•˜๋‚˜์˜ ๊ตฌ์กฐ์ธ์ง€ ์•Œ๋ ค์ค„ ์ˆ˜ ์žˆ์Œ

 

 

 

 

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

<!--๋ฌธ์„œ ํ˜•์‹์„ ์ •์˜-->
<!DOCTYPE html>
<!--html ๋ฌธ์„œ ๋‚ด ํƒœ๊ทธ์˜ ์‹œ์ž‘, ์‚ฌ์šฉ ์–ธ์–ด ์ •์˜-->
<!--๋ชจ๋“  ๋‹ค๋ฅธ ํƒœ๊ทธ๋Š” <html></html> ์•ˆ์— ์ž‘์„ฑ-->
<html lang="kr">
    <head>
        <!--๋ฌธ์„œ์™€ ๊ด€๋ จ๋œ ์ •๋ณด-->
        <meta charset="UTF-8">
        <!--์›น ํŽ˜์ด์ง€์˜ ์ œ๋ชฉ-->
        <title>Page Title</title>
    </head>
    <body>
        <h1>h1 ํƒœ๊ทธ ์•ˆ์— ์žˆ๋Š” ์ œ๋ชฉ์ž…๋‹ˆ๋‹ค</h1>
        <p>p ํƒœ๊ทธ ์•ˆ์— ์žˆ๋Š” ๋ณธ๋ฌธ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค</p>
    </body>
</html>
<!--html, head, body ํƒœ๊ทธ๋Š” ๋ฌธ์„œ์—์„œ ํ•œ ๋ฒˆ์”ฉ๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅ-->

 

 

 

728x90