rigood

[HTML] ์ž๋™์™„์„ฑ ๊ธฐ๋ณธ ํ…œํ”Œ๋ฆฟ ๋ณธ๋ฌธ

๐ŸŽจ ํ”„๋ก ํŠธ์—”๋“œ/html & css

[HTML] ์ž๋™์™„์„ฑ ๊ธฐ๋ณธ ํ…œํ”Œ๋ฆฟ

rigood 2023. 6. 3. 09:49

VS Code์—์„œ !์„ ๋ˆ„๋ฅด๊ณ  ์—”ํ„ฐ๋ฅผ ์น˜๋ฉด ๋‚˜์˜ค๋Š” HTML ๊ธฐ๋ณธ ํ…œํ”Œ๋ฆฟ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋‹ค.

 

 

<!DOCTYPE html>
  • DOCTYPE ์„ ์–ธ๋ฌธ์€ ์›น๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ HTML ๋ฒ„์ „์„ ์•Œ๋ ค์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ๋ฒ„์ „๋งˆ๋‹ค ์„ ์–ธ ๋ฐฉ์‹์ด ๋‹ค๋ฅด๋ฉฐ, HTML5์—์„œ๋Š” ์œ„์™€ ๊ฐ™์ด ๊ฐ„๋‹จํžˆ ์„ ์–ธํ•  ์ˆ˜ ์žˆ๋‹ค.
  • HTML ํƒœ๊ทธ๋Š” ์•„๋‹ˆ๋‚˜, <html> ํƒœ๊ทธ ์ „์— ๊ฐ€์žฅ ๋จผ์ € ์„ ์–ธํ•ด์ค˜์•ผ ํ•œ๋‹ค.

 

<html lang="en"></html>
  • html ํƒœ๊ทธ๋Š” HTML ๋ฌธ์„œ์˜ ๋ฃจํŠธ ์š”์†Œ๋ฅผ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋ฉฐ, DOCTYPE ์„ ์–ธ์„ ์ œ์™ธํ•œ ๋ชจ๋“  HTML ์š”์†Œ๋ฅผ ํฌํ•จํ•˜๊ธฐ ์œ„ํ•œ ์ปจํ…Œ์ด๋„ˆ์ด๋‹ค.
  • lang ์†์„ฑ์€ ์›น๋ฌธ์„œ ์ „์ฒด ๋˜๋Š” ์ผ๋ถ€์— ์–ธ์–ด๋ฅผ ์ง€์ •ํ•ด์ฃผ๋Š” ์†์„ฑ์œผ๋กœ, ์–ธ์–ด ์„ค์ •์— ๋”ฐ๋ผ ์Šคํฌ๋ฆฐ๋ฆฌ๋”, ๊ฒ€์ƒ‰์—”์ง„ ๋ฐ ๋ธŒ๋ผ์šฐ์ € ์ง€์›์ด ๋‹ฌ๋ผ์ง„๋‹ค. ISO ์–ธ์–ด์ฝ”๋“œ(ex: ko) ๋˜๋Š” ์–ธ์–ด์ฝ”๋“œ-๊ตญ๊ฐ€์ฝ”๋“œ(ex: en-US)๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

 

<meta charset="UTF-8" />
  • meta ํƒœ๊ทธ์˜ charset ์†์„ฑ์€ HTML ๋ฌธ์„œ์˜ ๋ฌธ์ž ์ธ์ฝ”๋”ฉ ๋ฐฉ์‹์„ ๋ช…์‹œํ•  ๋•Œ ์‚ฌ์šฉ๋œ๋‹ค.
  • UTF-8์ด๋ž€ ์œ ๋‹ˆ์ฝ”๋“œ(์ „์„ธ๊ณ„ ๋ฌธ์ž๋ฅผ ํ‘œ์ค€์ฝ”๋“œ๋กœ ๋‚˜ํƒ€๋‚ธ ํ‘œ)๋ฅผ ์ธ์ฝ”๋”ฉ(์œ ๋‹ˆ์ฝ”๋“œ๋ฅผ ์ปดํ“จํ„ฐ ๋ถ€ํ˜ธ๋กœ ๋ณ€ํ™˜)ํ•˜๋Š” ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค.

 

  • ASCII: ์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž+ํŠน์ˆ˜๋ฌธ์ž 128๊ฐœ๋ฅผ 1byte๋กœ ํ‘œํ˜„, ํ•œ๊ธ€ ํ‘œํ˜„๋ถˆ๊ฐ€
  • EUC-KR: ํ•œ๊ธ€์„ 2byte๋กœ ํ‘œํ˜„, ์™„์„ฑํ˜•์ฝ”๋“œ(๊ธ€์ž์™€ ์ฝ”๋“œ 1:1 ๋งค์นญ)์ด๋ฏ€๋กœ ์ฝ”๋“œํ‘œ์— ์—†๋Š” ํ•œ๊ธ€ ํ‘œํ˜„๋ถˆ๊ฐ€
  • ์œ ๋‹ˆ์ฝ”๋“œ: ์ „์„ธ๊ณ„ ๋ชจ๋“  ๋ฌธ์ž๋ฅผ ํ‘œํ˜„ํ•˜๋ฉฐ ํ•œ๊ธ€์€ 3byte๋กœ ํ‘œํ˜„, ๋ฌธ์ž์— ๋”ฐ๋ผ ํ‘œํ˜„ํ•˜๋Š” byte๊ฐ€ ๋‹ฌ๋ผ์ง€๋ฏ€๋กœ ๋‹ค์–‘ํ•œ ์ธ์ฝ”๋”ฉ ๋ฐฉ์‹์ด ์กด์žฌ, ๊ฐ€์žฅ ๋Œ€ํ‘œ์ ์ธ ๊ฒƒ์ด UTF-8 ๋ฐฉ์‹์œผ๋กœ ์•„์Šคํ‚ค์ฝ”๋“œ๋Š” 1byte๋กœ ํ‘œํ˜„ํ•˜๊ณ , ์ฒซ๋ฒˆ์งธ byte์˜ ์‹œ์ž‘ bit์— ๋”ฐ๋ผ ๋ช‡ byte๋กœ ์ธ์ฝ”๋”ฉํ• ์ง€๋ฅผ ๊ฒฐ์ •

 

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  • meta ํƒœ๊ทธ์˜ X-UA-Compatible ์†์„ฑ๊ฐ’์€ ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ๊ฐ€ ์›นํŽ˜์ด์ง€๋ฅผ ํ‘œ์‹œํ•  ๋•Œ content์— ๋ช…์‹œ๋œ ์†์„ฑ๊ฐ’์— ๋”ฐ๋ผ ๋ Œ๋”๋ง ํ•˜๋„๋ก ํ•  ๋•Œ ์‚ฌ์šฉ๋œ๋‹ค.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • viewport๋ž€ ์›นํŽ˜์ด์ง€๊ฐ€ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” ์˜์—ญ์„ ์˜๋ฏธํ•œ๋‹ค. meta ํƒœ๊ทธ์˜ viewport ์†์„ฑ๊ฐ’์€ ๋ชจ๋ฐ”์ผ์—์„œ viewport ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋œ๋‹ค. PC์—์„œ๋Š” ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์˜ ํฌ๊ธฐ๋ฅผ ๋ณ€๊ฒฝํ•˜์—ฌ viewport๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์ง€๋งŒ, ๋ชจ๋ฐ”์ผ์—์„œ๋Š” ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์˜ ํฌ๊ธฐ๊ฐ€ ๊ณ ์ •๋˜๋ฏ€๋กœ viewport์˜ ๋„ˆ๋น„์™€ ๋ฐฐ์œจ์„ ์กฐ์ ˆํ•ด์•ผ ํ•œ๋‹ค. ์œ„ ํƒœ๊ทธ๋Š” viewport ๋„ˆ๋น„๋Š” ๊ธฐ๊ธฐ ๋„ˆ๋น„๋กœ, ์ดˆ๊ธฐ ๋ฐฐ์œจ์€ 1๋กœ ์„ค์ •ํ•œ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.

 

<link rel="stylesheet" href="" />
<link rel="shortcut icon" href="" type="image/x-icon" />
  • link ํƒœ๊ทธ๋ž€ ํ˜„์žฌ ๋ฌธ์„œ์™€ ์™ธ๋ถ€ ๋ฆฌ์†Œ์Šค์˜ ๊ด€๊ณ„๋ฅผ ๋ช…์‹œํ•˜๋ฉฐ, ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ์—ฐ๊ฒฐํ•  ๋•Œ ์ œ์ผ ๋งŽ์ด ์‚ฌ์šฉ๋˜์ง€๋งŒ, ์•„์ด์ฝ˜ ์—ฐ๊ฒฐ ๋“ฑ ๋‹ค์–‘ํ•œ ์šฉ๋„๋กœ๋„ ์“ฐ์ธ๋‹ค.

 

์ฐธ๊ณ 
http://www.tcpschool.com/html-tags/intro

'๐ŸŽจ ํ”„๋ก ํŠธ์—”๋“œ > html & css' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[CSS] word-wrap, overflow-wrap, word-break ์ฐจ์ด์   (0) 2023.06.06
[HTML] script ํƒœ๊ทธ์˜ defer, async  (0) 2023.04.30
[CSS] flex-wrap  (0) 2023.01.02
Comments