[๐Ÿฆ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ] 5๊ธฐ DAY 03 - TIL & ํšŒ๊ณ 

Hoon Kangยท2023๋…„ 3์›” 2์ผ
0
post-thumbnail

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป TIL

โœ… WEB

์›น๊ณผ ์ธํ„ฐ๋„ท

์›น์€ ์ธํ„ฐ๋„ท์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š” ์ˆ˜๋งŽ์€ ์„œ๋น„์Šค ์ค‘ ํ•˜๋‚˜์ด๋‹ค.
๋„คํŠธ์›Œํฌ๋Š” ์ปดํ“จํ„ฐ์™€ ์ปดํ“จํ„ฐ๋ฅผ ์—ฐ๊ฒฐํ•ด ์ฃผ๋Š” ๋ง์ด๊ณ , ์ด ๋„คํŠธ์›Œํฌ๊ฐ€ ๋ชจ์—ฌ ๋” ํฐ ๋„คํŠธ์›Œํฌ์ธ ์ธํ„ฐ๋„ท์ด ๋œ๋‹ค.

โœ… HTML

HTML์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ ์•„๋‹Œ ์ฝ˜ํ…์ธ ์˜ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•˜๋Š” ๋งˆํฌ์—… ์–ธ์–ด์ด๋‹ค.

(์ถœ์ฒ˜: ์œ„๋‹ˆ๋ธŒ)

HTML ์š”์†Œ

HTML ์š”์†Œ๋Š” ์—ฌ๋Š” ํƒœ๊ทธ, ์ฝ˜ํ…์ธ , ๋‹ซ๋Š” ํƒœ๊ทธ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋‹ค.

  • ์—ฌ๋Š” ํƒœ๊ทธ ๋‚ด๋ถ€์—๋Š” ์†์„ฑ์„ ์ค„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์†์„ฑ๋ช… = ์†์„ฑ๊ฐ’์˜ ํ˜•ํƒœ๋กœ ์ฃผ์–ด์ง„๋‹ค.
  • ๋‹ซ๋Š” ํƒœ๊ทธ๊ฐ€ ๋”ฐ๋กœ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ํƒœ๊ทธ๋„ ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ํƒœ๊ทธ๋ฅผ ์…€ํ”„ ํด๋กœ์ง• ํƒœ๊ทธ(Self-closing tag)๋ผ๊ณ  ํ•œ๋‹ค.

์ฃผ์„

์ฃผ์„(Comment)์€ ํ”„๋กœ๊ทธ๋žจ์˜ ๋™์ž‘์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š” ์ฝ”๋“œ์ด๋‹ค. ๊ฐœ๋ฐœํ•  ๋•Œ ์ฃผ์„์€ ์ตœ์†Œํ•œ์œผ๋กœ ๋‚จ๊ธฐ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋‚˜ ์ง๊ด€์ ์ธ ํด๋ž˜์Šค ๋ช…์„ ์‚ฌ์šฉํ•˜์ž.

<!-- ์ฃผ์„์€ ์ด๋ ‡๊ฒŒ ์ ๋Š”๋‹ค. -->

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ƒํ™ฉ์—์„œ ์ฃผ์„์„ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹๋‹ค:

  • ํƒœ๊ทธ์˜ ์‹œ์ž‘๊ณผ ๋์„ ์ ์„ ๋•Œ
  • ํ˜‘์—… ๊ณผ์ •์—์„œ ๋ฉ”์„ธ์ง€๋ฅผ ๋‚จ๊ธธ ๋•Œ
  • ์ง€๊ธˆ ๋‹น์žฅ์€ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ์ฝ”๋“œ๋ฅผ ์ž„์‹œ๋กœ ์ฒ˜๋ฆฌํ•  ๋•Œ

๋ถ€๋ชจ, ํ˜•์ œ, ์ž์‹, ์ž์†


(์ถœ์ฒ˜: ์œ„๋‹ˆ๋ธŒ)

HTML์„ ์‚ฌ์šฉํ• ๋•Œ๋Š” ์š”์†Œ๋“ค๋ผ๋ฆฌ์˜ ๊ด€๊ณ„์— ์ฃผ์˜ํ•˜์ž. ์ž์‹๊ณผ ์ž์†์€ ๋‹ค๋ฅด๋‹ค.

HTML ๋ฌธ์„œ์˜ ๋ผˆ๋Œ€

HTML ๋ฌธ์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ ธ์žˆ๋‹ค.

<!DOCTYPE html>
<html> 
  <head>
  </head>
  
  <body>
  </body>
</html>
  • <\!DOCTYPE html>: ์ด ๋ฌธ์„œ๋Š” html์˜ living standard๋ฅผ ์ง€ํ‚ค๋Š” ๋ฌธ์„œ๋ผ๋Š” ๋œป์ด๋‹ค.
  • html: HTML๋ฌธ์„œ์˜ ์ตœ์ƒ๋‹จ ์š”์†Œ์ด๋‹ค.
  • head: ๊ธฐ๊ณ„๊ฐ€ ์‹๋ณ„ ๊ฐ€๋Šฅํ•œ ์ •๋ณด(๋ฉ”ํƒ€๋ฐ์ดํ„ฐ)๋ฅผ ๋‹ด๋Š”๋‹ค. ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค.
  • body:์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์ด๋Š” ์˜์—ญ์ด๋‹ค.

๋‹ค์–‘ํ•œ HTML ํƒœ๊ทธ๋“ค

HTML ํƒœ๊ทธ๋Š” ๊ทธ ์ข…๋ฅ˜๊ฐ€ ๋งค์šฐ ๋งŽ๋‹ค. ํ•˜์ง€๋งŒ ์ž์ฃผ ์“ฐ๋Š” ํƒœ๊ทธ๋“ค์€ ๋Œ€๋ถ€๋ถ„ ์ •ํ•ด์ ธ ์žˆ๊ณ , ๋ชจ๋ฅด๋Š” ํƒœ๊ทธ๋ฅผ ๋งŒ๋‚˜๊ฒŒ ๋๋‹ค๋ฉด MDN์—์„œ ์ฐพ์•„๋ณด๋ฉด ๋œ๋‹ค.
HTML์˜ ๋” ๋งŽ์€ ํƒœ๊ทธ์— ๋Œ€ํ•ด์„œ๋Š” MDN ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์ž

HTML์—์„œ ํƒœ๊ทธ๊ฐ€ ์ค‘์š”ํ•œ ์ด์œ 

HTML์—์„œ ํƒœ๊ทธ๊ฐ€ ์ค‘์š”ํ•œ ์ด์œ ๋Š” ์›น ์ ‘๊ทผ์„ฑ ๋•Œ๋ฌธ์ด๋‹ค.
์›น ์ ‘๊ทผ์„ฑ์ด๋ž€ ์›น ์‚ฌ์ดํŠธ, ๋„๊ตฌ, ๊ธฐ์ˆ ์ด ์žฅ์• ๋ฅผ ๊ฐ€์ง„ ์‚ฌ์šฉ์ž๋“ค์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„ ๋ฐ ๊ฐœ๋ฐœ๋œ ๊ฒƒ์„ ๋งํ•œ๋‹ค.

์›น ์ ‘๊ทผ์„ฑ์„ ํ…Œ์ŠคํŠธํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์ดํŠธ: https://validator.w3.org/unicorn/

โœ… CSS

CSS๋Š” ์›นํŽ˜์ด์ง€๋ฅผ ๊พธ๋ฉฐ์ค€๋‹ค. ๋ฒ„ํŠผ์˜ ์ƒ‰์ด๋‚˜ ํฐํŠธ ์ข…๋ฅ˜, ๋ฐฐ๊ฒฝ์ƒ‰ ๋“ฑ ๋‹ค์–‘ํ•œ ๋””์ž์ธ์„ ๊พธ๋ฏธ๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉ๋œ๋‹ค. CSS์—์„œ ์Šคํƒ€์ผ์˜ ์ ์šฉ ์ˆœ์„œ๋Š” ์œ„ โžก๏ธ ์•„๋ž˜์ด๋ฉฐ, ๋”ฐ๋ผ์„œ ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰ CSS๊ฐ€ ๋ฐ˜์˜๋œ๋‹ค.

CSS ์ž‘์„ฑ๋ฐฉ๋ฒ•


(์ถœ์ฒ˜: ์œ„๋‹ˆ๋ธŒ)

  • CSS๋ฅผ ์ ์šฉํ•  HTML์š”์†Œ๋Š” ์„ ํƒ์ž๋กœ ๊ณ ๋ฅธ๋‹ค.
  • ์†์„ฑ์— ๋Œ€์‘ํ•˜๋Š” ์†์„ฑ๊ฐ’์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

CSS๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ์‹์€ ๋„ค ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค:

  1. ์ธ๋ผ์ธ โžก๏ธ ๊ฐ€์ƒ ์š”์†Œ ๋“ฑ์— ์Šคํƒ€์ผ์„ ์ค„ ์ˆ˜ ์—†๋‹ค.
  2. ๋‚ด๋ถ€ ์Šคํƒ€์ผ โžก๏ธ ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์งˆ์ˆ˜๋ก HTML ํŒŒ์ผ ๊ธธ์ด๊ฐ€ ๊ธธ์–ด์ง„๋‹ค.
  3. ์™ธ๋ถ€ ์Šคํƒ€์ผ โžก๏ธ <link>๋ฅผ ํ†ตํ•ด์„œ ํ˜„์žฌ ๋ฌธ์„œ์™€ ์™ธ๋ถ€ ๋ฆฌ์†Œ์Šค ์‚ฌ์ด์˜ ๊ด€๊ณ„๋ฅผ ๋ช…์‹œํ•œ๋‹ค.
  4. ๋‹ค์ค‘ ์Šคํƒ€์ผ ์‹œํŠธ โžก๏ธ <link> ์—ฌ๋Ÿฌ ๊ฐœ๋ฅผ ํ™œ์šฉํ•˜๊ฑฐ๋‚˜ ํ•œ ๊ฐœ์˜ CSS ํŒŒ์ผ ๋‚ด๋ถ€์— ์—ฌ๋Ÿฌ CSS ํŒŒ์ผ์„ ํฌํ•จํ•œ๋‹ค.

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

์ฃผ์„

CSS์˜ ์ฃผ์„์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•œ๋‹ค.

/* CSS์˜ ์ฃผ์„์€ ์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•œ๋‹ค */ 

CSS ์„ ํƒ์ž

CSS ์„ ํƒ์ž๋Š” ํฌ๊ฒŒ 7๊ฐ€์ง€๋กœ ๋ถ„๋ฅ˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

  1. ์ „์ฒด ์„ ํƒ์ž
  2. ํƒ€์ž… ์„ ํƒ์ž
  3. ์•„์ด๋”” ์„ ํƒ์ž
  4. ํด๋ž˜์Šค ์„ ํƒ์ž
  5. ํŠน์„ฑ ์„ ํƒ์ž
  6. ๊ทธ๋ฃน ์„ ํƒ์ž
  7. ๋ณตํ•ฉ ์„ ํƒ์ž
    • ์ž์† ์„ ํƒ์ž
    • ์ž์‹ ์„ ํƒ์ž
    • ์ผ๋ฐ˜ ํ˜•์ œ ์„ ํƒ์ž
    • ์ธ์ ‘ ํ˜•์ œ ์„ ํƒ์ž

๐Ÿ“— ํšŒ๊ณ 

HTML๊ณผ CSS๋ฅผ ํ•จ๊ป˜ ๋‚˜๊ฐ€๋‹ˆ ํ™•์‹คํžˆ ์–ด์ œ๋ณด๋‹ค ๊ณต๋ถ€ํ•  ๋‚ด์šฉ์ด ๋งŽ์•„์กŒ๋‹ค. ๋‹จ์ˆœํžˆ ์™ธ์šด๋‹ค๊ณ  ํ•ด๊ฒฐ๋  ๋ฌธ์ œ๋Š” ์•„๋‹ˆ๊ณ , ์ง์ ‘ ํ•˜๋‚˜์”ฉ ๋”ฐ๋ผํ•ด ๋ณด๋ฉด์„œ ์†์— ๊ฐ๊ฐ์„ ์ตํ˜€์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค. ํŠนํžˆ CSS์˜ ์„ ํƒ์ž๋Š” ์•„๋ž˜ ์›น ์‚ฌ์ดํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ๊พธ์ค€ํžˆ ์—ฐ์Šตํ•ด์•ผ๊ฒ ๋‹ค.
https://css-speedrun.netlify.app/
https://flukeout.github.io/

profile
์„ธ์ƒ์˜ ๋ชจ๋“  ๊ฒƒ๋“ค์ด ๊ถ๊ธˆํ•œ ๊ฐœ๋ฐœ์ž

0๊ฐœ์˜ ๋Œ“๊ธ€