๐Ÿ“– HTML(0) ๋ฌธ์„œ ์ •๋ณด

4962 ๋‹จ์–ด htmlhtml

HTML์€ ๋ฌธ์„œ์˜ ๊ตฌ์กฐ๋ฅผ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์•Œ๋ ค์ฃผ๋Š” ๋งˆํฌ์—… ์–ธ์–ด๋‹ค. ์—ด๊ณ  ๋‹ซ๋Š” ํƒœ๊ทธ, ๋ถ€๋ชจ์™€ ์ž์‹ ๊ด€๊ณ„ ๋“ฑ์˜ ์š”์†Œ๋“ค์ด ๊ฒฐํ•ฉํ•˜์—ฌ ์ตœ์ข…์ ์œผ๋กœ DOM ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๊ฒŒ ๋˜๊ณ (์ถ”ํ›„ ์ƒ์„ธํ•œ ๋‚ด์šฉ์„ ์•Œ์•„๋ด์•ผ๊ฒ ๋‹ค.) ๋ธŒ๋ผ์šฐ์ €์— ๋ Œ๋”๋ง ๋œ๋‹ค.

Emmet?

vscode๋Š” ํŽธํ•˜๋‹ค. ๋„ˆ๋ฌด ํŽธํ•ด์„œ ์‚ฌ๋žŒ์„ ์•ฝํ•˜๊ฒŒ ๋งŒ๋“ ๋‹ค. ๐Ÿ˜

Vscode์— ๋‚ด์žฅ๋œ Emmet์€ ์ •๋ง ํŽธ๋ฆฌํ•œ ๊ธฐ๋Šฅ์ด๋‹ค. Emmet์ด ์—†์—ˆ๋‹ค๋ฉด ๋‹จ์ˆœํ•œ ๋งˆํฌ์—… ์ž‘์—…์— ์Ÿ๋Š” ์‹œ๊ฐ„์ด ์–ด๋งˆ์–ด๋งˆํ•˜์ง€ ์•Š์•˜์„๊นŒ?

๋ฌธ๋“ ๋Š๋ผ๋Š” ๊ฑฐ์ง€๋งŒ ์ด๋Ÿฐ Emmet์€ ์ฝ”๋“œ ์ƒ์‚ฐ์„ฑ์„ ๋†’์—ฌ์ฃผ๋Š” ์ข‹์€ ์นœ๊ตฌ์ด์ง€๋งŒ ์ดˆ๋ณด์ž์—๊ฒŒ๋Š” ์–‘๋‚ ์˜ ๊ฒ€์ด๊ธฐ๋„ ํ•œ ๊ฒƒ ๊ฐ™๋‹ค.

์—ฌ๋Š ๋•Œ์™€ ๋‹ค๋ฆ„์—†์ด ! + tab์„ ์ž…๋ ฅํ•ด DTD ํ˜•์‹์„ ๋งž์ถ˜ ํฌ๋งท์„ ์ƒ์„ฑํ•˜๋ ค๋Š”๋ฐ ๋ฌธ๋“ ์ด๋Ÿฐ ์ƒ๊ฐ์ด ๋“ ๋‹ค.

๋‚ด๊ฐ€ ๋ญ˜ ์ž…๋ ฅํ•˜๊ณ  ์žˆ๋Š” ๊ฑฐ์ง€?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

์ต์ˆ™ํ•œ ๊ธ€์ž๋“ค์ด๋‹ค. ๊ทผ๋ฐ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๋‚˜์—๊ฒŒ ์ด ํ•ญ๋ชฉ๋“ค์„ ํ•˜๋‚˜ํ•˜๋‚˜ ์„ค๋ช…ํ•ด๋ณด๋ผ๊ณ  ํ•˜๋ฉด ์ž์‹ ์ด ์—†๋‹ค.

๊ฟ€๋จน์€ ๋ฒ™์–ด๋ฆฌ๊ฐ€ ๋  ์ƒํ™ฉ์„ ๋ฏธ๋ฆฌ ๋ฒ—์–ด๋‚˜์ž.

DOCTYPE

๋ฌธ์„œ์˜ HTML ๋ฒ„์ „

ํ˜„์žฌ๋Š” HTML5๋กœ ๋Œ€๋ถ€๋ถ„ ์‚ฌ์šฉ ์ค‘์ด์ง€๋งŒ ์—ฌ์ „ํžˆ ๊ณผ๊ฑฐ์˜ HTML ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฌธ์„œ๊ฐ€ ์žˆ์„ ์ˆ˜๋„ ์žˆ๋‹ค.

์ด์ „ ๋ฒ„์ €๋‹ ํฌ์ŠคํŠธ์—๋„ ์žˆ๋Š” ๋‚ด์šฉ์ด์ง€๋งŒ ์ˆซ์ž๊ฐ€ ๋ฐ”๋€๋‹ค๋Š” ๊ฑด ์†Œํ”„ํŠธ์›จ์–ด ์ƒ์œผ๋กœ ์—„์ฒญ๋‚œ ์˜๋ฏธ๋ผ๊ณ  ํ•œ๋‹ค.

์–ด๋–ค ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€, ๋ณ€๊ฒฝ๋˜์—ˆ๊ณ  ์‚ญ์ œ ๋˜์—ˆ๋Š”์ง€ ๋ฒ„์ „์˜ ํ˜•์‹์œผ๋กœ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์•Œ๋ ค์ฃผ๋Š” ๊ฒƒ์ด DOCTYPE์ด๋‹ค.

<!DOCTYPE html>์€ HTML5๋กœ ์“ฐ์ธ ๋ฌธ์„œ๋ผ๋Š” ๊ฑธ ๋‚˜ํƒ€๋‚ธ๋‹ค.

head์™€ body

์ตœ์ƒ์œ„์ธ html ํƒœ๊ทธ, html์˜ ๋‘ ์ž์‹ head์™€ body

head๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ์ง์ ‘์ ์œผ๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ๋ถ€๋ถ„์ด ์•„๋‹ˆ๋‹ค. ๋Œ€์‹  ์ œ๋ชฉ, ์„ค๋ช…, ์‚ฌ์šฉํ•  ํŒŒ์ผ๋“ค์˜ ์œ„์น˜, ์Šคํƒ€์ผ ๋“ฑ ๋ฌธ์„œ ์ž์ฒด์— ๋Œ€ํ•œ ์ •๋ณด(๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ)๋ฅผ ๋‹ด๊ณ  ์žˆ๋‹ค.

body๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ์ง์ ‘์ ์œผ๋กœ ๋ณด์ด๋Š” ๋ถ€๋ถ„์ด๋ฉฐ ๋ฌธ์„œ์˜ ๊ตฌ์กฐ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.

๐Ÿ”‘ meta, link

๋ฌธ์„œ์— ๋Œ€ํ•œ ์ •๋ณด, ๋ฌธ์„œ์™€ ์—ฐ๊ฒฐ๋œ ํŒŒ์ผ์˜ ์ •๋ณด

meta๋Š” ํƒœ๊ทธ์˜ ์ด๋ฆ„ ๊ทธ๋Œ€๋กœ ๋ฌธ์„œ์˜ ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ํƒœ๊ทธ๋‹ค.

์œ„์˜ ์˜ˆ์‹œ์—์„œ charset์€ ๋ฌธ์ž ์ธ์ฝ”๋”ฉ ๋ฐฉ์‹

<meta http-equiv="X-UA-Compatible" content="IE=edge">์€ IE ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ฐ€์žฅ ์ตœ์‹ ์˜ 'ํ‘œ์ค€' ๋ฌธ์„œ ๋ฒ„์ „(IE๋Š” ๋ฒ„์ „๋งˆ๋‹ค ๋ฌธ์„œ ํ‘œ์ค€์ด ๋‹ฌ๋ž๋‚˜ ๋ณด๋‹ค.)์„ ์„ ํƒํ•˜๋ผ๋Š” ์˜๋ฏธ์ด๋‹ค.

<meta name="viewport" content="width=device-width, initial-scale=1.0">๋Š” ๋ทฐํฌํŠธ(์‚ฌ์šฉ์ž๊ฐ€ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์˜์—ญ)์„ ์„ค์ •ํ•˜๋Š” ํƒœ๊ทธ์ด๋‹ค. ๊ธฐ๊ธฐ์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋„ˆ๋น„๋ฅผ ๋งž์ถ”๊ณ  ์Šค์ผ€์ผ๋ง ๊ฐ’์„ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ๋‹ค.

๋‹ค์Œ๊ณผ ๊ฐ™์ด viewport ์„ค์ • ์—ฌ๋ถ€์— ๋”ฐ๋ผ ํ™”๋ฉด์ด ๋‹ค๋ฅด๊ฒŒ ๋‚˜ํƒ€๋‚œ๋‹ค.

link๋Š” ์—ฐ๊ฒฐ๋  ํŒŒ์ผ๊ณผ ํ˜„์žฌ ๋ฌธ์„œ์˜ ๊ด€๊ณ„๋ฅผ ๋งํ•œ๋‹ค.

<link rel="stylesheet" href="./style.css" />

๋‹ค์Œ๊ณผ ๊ฐ™์ด CSSํŒŒ์ผ์„ ์—ฐ๊ฒฐํ•˜๊ฑฐ๋‚˜ ํ˜น์€ ํŒŒ๋น„์ฝ˜์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ