Frontend ๐Ÿ“š/HTMLโงตCSS

[HTML] DOCTYPE

leejaejae 2024. 7. 6. 10:23

1. DOCTYPE ๋ž€

<!-- HTML5 -->
<!DOCTYPE html>
  • DOCTYPE
    • HTML์ด ์–ด๋–ค ๋ฒ„์ „์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ๋Š”์ง€ ๋ฏธ๋ฆฌ ์„ ์–ธํ•ด, ์›น๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‚ด์šฉ์„ ์˜ฌ๋ฐ”๋กœ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ๊ฒƒ
    • ์‰ฝ๊ฒŒ ๋งํ•˜์ž๋ฉด ๋ฌธ์„œํ˜•์‹์„ ์ •์˜ํ•ด์ฃผ๋Š” ๊ฒƒ์ž„

 

2. meta ํƒœ๊ทธ๋ž€

  • meta ํƒœ๊ทธ
    • HTML ๋ฌธ์„œ๊ฐ€ ์–ด๋–ค ๋‚ด์šฉ์„ ๋‹ด๊ณ  ์žˆ๊ณ , ํ‚ค์›Œ๋“œ๋Š” ๋ฌด์—‡์ด๋ฉฐ, ๋ˆ„๊ฐ€ ๋งŒ๋“ค์—ˆ๋Š”์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ํƒœ๊ทธ

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

 

head ํƒœ๊ทธ์—๋Š” ๋ฌด์—‡์ด ์žˆ์„๊นŒ? HTML์˜ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ - Web ๊ฐœ๋ฐœ ํ•™์Šตํ•˜๊ธฐ | MDN

HTML์˜ head๋Š” ํŽ˜์ด์ง€๋ฅผ ์—ด ๋•Œ ์›น ๋ธŒ๋ผ์šฐ์ €์— ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. head๋Š” <title> ๊ฐ™์€ ํŽ˜์ด์ง€๋‚˜, CSS์˜ ๋งํฌ(HTML ์ปจํ…์ธ ๋ฅผ CSS๋กœ ์Šคํƒ€์ผ๋งํ•˜๊ธฐ๋ฅผ ์›ํ•œ๋‹ค๋ฉด), ํŒŒ๋น„์ฝ˜(favicon), ๊ทธ๋ฆฌ๊ณ  ๋‹ค๋ฅธ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ(์ž‘์„ฑ

developer.mozilla.org

 

3. meta ํƒœ๊ทธ ์š”์†Œ

<meta charset="utf-8" />
  • charset
    • charset: ๋ฌธ์„œ์—์„œ ํ—ˆ์šฉํ•˜๋Š” ๋ฌธ์ž ์ง‘ํ•ฉ์— ๋Œ€ํ•ด์„œ ๊ฐ„๋‹จํžˆ ํ‘œ์‹œ
    • utf-8: ์ „์„ธ๊ณ„์ ์ธ character ์ง‘ํ•ฉ์œผ๋กœ ๋งŽ์€ ์–ธ์–ด์˜ ๋ฌธ์ž๋“ค์„ ํฌํ•จ

<meta name="author" content="Chris Mills" />

<meta
  name="description"
  content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."
/>
  • name
    • name: ๋ฉ”ํƒ€ ์š”์†Œ๊ฐ€ ์–ด๋–ค ์ •๋ณด์˜ ํ˜•ํƒœ๋ฅผ ๊ฐ–๊ณ  ์žˆ๋Š”์ง€ ์•Œ๋ ค์คŒ
    • content: ์‹ค์ œ ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ์˜ ์ปจํ…์ธ , ๋จธ๋ฆฟ๋ง์„ ์š”์•ฝํ•˜๋Š”๋ฐ ์œ ์šฉ
  • Q) ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด ๋ฉ”ํƒ€ ํƒœ๊ทธ์˜ ์–ด๋–ค ๊ฒƒ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€
<head>
  <meta charset="UTF-8" />
  <meta name="keyword" content="HTML, meta, tag, element, reference" />
  <meta name="description" content="HTML meta tag page" />
  <meta name="author" content="TCPSchool" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML meta tag</title>
</head>
  • A) โ‘  ๊ฒ€์ƒ‰ ์—”์ง„์„ ์œ„ํ•œ ํ‚ค์›Œ๋“œ ์ •์˜
         โ‘ก ์›น ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์„ค๋ช…(description) ์ •์˜
         โ‘ข ๋ฌธ์„œ์˜ ์ €์ž(author) ์ •์˜
         โ‘ฃ 5์ดˆ ๋’ค์— ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ(redirect) ์‹œํ‚ค๊ธฐ
         โ‘ค ๋ชจ๋“  ์žฅ์น˜์—์„œ ์›น ์‚ฌ์ดํŠธ๊ฐ€ ์ž˜ ๋ณด์ด๋„๋ก ๋ทฐํฌํŠธ(viewport) ์„ค์ •

 

์ €์ž‘์žํ‘œ์‹œ

'Frontend ๐Ÿ“š > HTMLโงตCSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[HTML] SVG etc.  (1) 2024.07.12
[HTML] ์›น ํ‘œ์ค€ ๋ฐ ์ ‘๊ทผ์„ฑ II - ํ…์ŠคํŠธ ๊ด€๋ จ ํƒœ๊ทธ, ๊ธฐํƒ€ ํƒœ๊ทธ, ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• etc.  (0) 2024.07.06
[HTML] ์›น ํ‘œ์ค€ ๋ฐ ์ ‘๊ทผ์„ฑ I - ์›น ํ‘œ์ค€, ์›น ์ ‘๊ทผ์„ฑ, ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ etc.  (0) 2024.07.06
[HTML] HTML ์ฃผ์š” ํƒœ๊ทธ  (0) 2023.03.29

'Frontend ๐Ÿ“š/HTMLโงตCSS'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€[HTML] DOCTYPE

๊ด€๋ จ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”