๐ŸณHTML / CSS

HTML์€ ์–ด๋””์— ์“ฐ๋Š” ์–ธ์–ด์ธ๊ฐ€?

์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ณ  ๋””์ž์ธํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•จ.

์„ธ์ƒ์— ์กด์žฌํ•˜๋Š” ๋ชจ๋“  ์›นํŽ˜์ด์ง€๋Š” html ์–ธ์–ด๋กœ ์ž‘์„ฑํ•œ๋‹ค.

HTML - Hypertext Markup Language

๋งˆํฌ์—… ์–ธ์–ด๋Š” "์ž๋ฃŒ์˜ ๊ตฌ์กฐ๋ฅผ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์–ธ์–ด"

์›นํŽ˜์ด์ง€์— ์šฐ๋ฆฌ๊ฐ€ ๊ธ€๋„ฃ๊ณ  ๊ทธ๋ฆผ๋„ฃ๊ณ  ๋ฐ•์Šค๋„ฃ๊ณ  ๋ฒ„ํŠผ๋„ฃ๊ณ  ..

์ž๋ฃŒ๋ฅผ ์ž…๋ ฅํ•œ๋‹ค.

๊ทธ ์ž๋ฃŒ๋“ค์ด ์–ด๋””์— ๋ฐฐ์น˜๋˜๋Š”์ง€ ๊ทธ๋Ÿฐ ๊ฒƒ๋“ค์„ ๊ธฐ๋กํ•˜๊ธฐ ์œ„ํ•ด

์กด์žฌํ•˜๋Š” ์–ธ์–ด๊ฐ€ ๋ฐ”๋กœ HTML์ด๋ผ๊ณ  ์ดํ•ดํ•˜๋ฉด ๋œ๋‹ค.

์ •์  ์‚ฌ์ดํŠธ์™€ ๋™์  ์‚ฌ์ดํŠธ

์ทจ์—… ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ, ๊ธฐ์—… ํ™๋ณด ์‚ฌ์ดํŠธ์™€ ๊ฐ™์€ ์ •๋ณด๋ฅผ ๋ณด์—ฌ์ฃผ๊ธฐ๋งŒ ํ•˜๋Š” ์›น์‚ฌ์ดํŠธ๋ฅผ ์ •์  ์‚ฌ์ดํŠธ๋ผ๊ณ  ํ•˜๊ณ  ๋น„๊ต์  ๊ฐ„๋‹จํ•˜๋‹ค.

์‡ผํ•‘๋ชฐ, ์˜ˆ๋งค ์‚ฌ์ดํŠธ. SNS ๋“ฑ๊ณผ ๊ฐ™์€ ์›น์‚ฌ์ดํŠธ๋Š” ๋™์  ์‚ฌ์ดํŠธ ๊ฒ‰์œผ๋กœ ๋ณด์ด๋Š” ๊ป๋ฐ๊ธฐ๋งŒ ์ด์˜๊ฒŒ ๋งŒ๋“ค๋ฉด ๋์ด ์•„๋‹ˆ๋ผ ์„œ๋ฒ„์— ์ €์žฅํ•˜๊ณ  ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ ๋“ค์ด ํ•„์š”ํ•˜๋‹ค. (ex. ์žฅ๋ฐ”๊ตฌ๋‹ˆ, ํŒ”๋กœ์šฐ, ์ข‹์•„์š” ๋“ฑ๋“ฑ)

HTML ํŒŒ์ผ ๊ธฐ๋ณธ ํ…œํ”Œ๋ฆฟ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   
</body>
</html>

<!DOCTYPE> : ํ˜„์žฌ ๋ฌธ์„œ๊ฐ€ HTML ๋ฌธ์„œ ํƒ€์ž…์„ ๋ช…์‹œํ•œ๋‹ค. (HTML5 ๋ฌธ์„œ ํƒ€์ž…์€ <!DOCTYPE html> ์ด๋‹ค.)

<html> : HTML ๋ฌธ์„œ์˜ ๋ฃจํŠธ(root) ์š”์†Œ๋ฅผ ์ •์˜ํ•œ๋‹ค.

<head> : HTML ๋ฌธ์„œ์˜ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ(metadata)๋ฅผ ์ •์˜ํ•œ๋‹ค.

  • ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ(metadata)๋ž€ HTML ๋ฌธ์„œ์— ๋Œ€ํ•œ ์ •๋ณด(data)๋กœ ์›น ๋ธŒ๋ผ์šฐ์ €์—๋Š” ์ง์ ‘์ ์œผ๋กœ ํ‘œํ˜„๋˜์ง€ ์•Š๋Š” ์ •๋ณด๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

  • ์ด๋Ÿฌํ•œ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋Š” <title>, <style>, <meta>, <link>, <script>, <base>ํƒœ๊ทธ ๋“ฑ์„ ์ด์šฉํ•˜์—ฌ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

<title> : HTML ๋ฌธ์„œ์˜ ์ œ๋ชฉ(title)์„ ์ •์˜ํ•˜๋ฉฐ, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์šฉ๋„๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

  • ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ํˆด๋ฐ”(toolbar)์— ํ‘œ์‹œ๋œ๋‹ค.

  • ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ์ฆ๊ฒจ์ฐพ๊ธฐ(favorites)์— ์ถ”๊ฐ€ํ•  ๋•Œ ์ฆ๊ฒจ์ฐพ๊ธฐ์˜ ์ œ๋ชฉ์ด ๋œ๋‹ค.

  • ๊ฒ€์ƒ‰ ์—”์ง„์˜ ๊ฒฐ๊ณผ ํŽ˜์ด์ง€์— ์ œ๋ชฉ์œผ๋กœ ํ‘œ์‹œ๋œ๋‹ค.

<body> : ์›น ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•ด ๋ณด์ด๋Š” ๋‚ด์šฉ(content) ๋ถ€๋ถ„์ด๋‹ค.

<h1>~<h6> : ์ œ๋ชฉ(heading)์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.

<p> : ๋‹จ๋ฝ(paragraph)์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.

HTML / CSS / JavaScript ๋ฅผ ์œ„ํ•œ ํƒ€์ดํ•‘ ์—ฐ์Šต

๊ฐ„๋‹จํ•œ HTML / CSS / JavaScript ์ฝ”๋“œ ์ž‘์„ฑ ํ›„ ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์ข‹์€ ์›น ๊ธฐ๋ฐ˜ํŽธ์ง‘๊ธฐ

Last updated