๐Ÿ“Œ ์›น๊ณผ HTML&CSS์—์„œ ๋†“์น˜๊ธฐ ์‰ฌ์šด ๊ฐœ๋…๋“ค

9492 ๋‹จ์–ด htmlCSSCSS

HTML, CSS ๊ทธ๊ฑฐ ์‰ฝ์ž–์•„?

๊ณผ์—ฐ ๊ทธ๋Ÿด๊นŒ...!?

์ฒ˜์Œ ์›น ๊ฐœ๋ฐœ ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ•˜๊ณ  ๋จผ์ € ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ด html, css์˜ ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ๋“ค์ด๋‹ค. ๋ˆˆ์œผ๋กœ ๋ฐ”๋กœ ๋ณด์ด๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์›น์„ ์„ค๊ณ„ํ•˜๊ณ  ๊พธ๋ฐ€ ์ˆ˜ ์žˆ์–ด์„œ ์ ‘๊ทผ๊ฐ€๋Šฅ์„ฑ์ด ๋‚ฎ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์ฆ‰ ์ง„์ž…์žฅ๋ฒฝ์ด ๋‚ฎ์€๋ฐ, ๊ทธ๋ž˜์„œ ๋งŽ์ด๋“ค ์ด ๋ถ€๋ถ„์€ ํฅ๋ฏธ๋กญ๊ฒŒ ๊ณต๋ถ€ํ•œ๋‹ค(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋งŒ๋‚˜๊ธฐ ์ „๊นŒ์ง„...) ํ•˜์ง€๋งŒ ๋ชจ๋“  ๊ณต๋ถ€์—๋Š” ๊ธฐ๋ณธ ๊ฐœ๋…, ์ง€์‹๋“ค์ด ์ค‘์š”ํ•˜๋“ฏ์ด html, css๊ฐ€ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋‹ค๊ณ  ํ•ด์„œ ์ค‘์š”ํ•˜์ง€ ์•Š์€ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค(์‰ฝ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋„ ์•Š๋Š”๋‹ค). ์˜คํžˆ๋ ค ๋” ๊นŒ๋‹ค๋กญ๊ณ  ๋“ค์—ฌ๋‹ค ๋ด์•ผํ•  ๋‚ด์šฉ๋“ค์ด ๋งŽ์€๋ฐ ๊ฐœ๋ฐœ์ž์ง€๋ง์ƒ๋“ค์€ ํ”„๋ก ํŠธ์—์„œ js๊ฐ€ ์ค‘์š”ํ•˜๋‹ค๊ณ  ํ•˜๋‹ˆ๊นŒ ๋นจ๋ฆฌ js๋กœ ๋„˜์–ด๊ฐ€๋ ค๊ณ  html, css๋Š” ํ›… ๊ฑด๋„ˆ ๋›ด๋‹ค. ์—ฌ๊ธฐ์„œ ๋‚˜์ค‘์— ์ฐจ์ด๊ฐ€ ๋‚˜์ง€ ์•Š์„๊นŒ ์ƒ๊ฐํ•œ๋‹ค.

html์—์„œ ํƒœ๊ทธ๋ฅผ ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค๊ณ , class ์„ค์ •, id ์„ค์ •, ๊ตฌ์กฐ ์„ค๊ณ„ ๋“ฑ๋“ฑ
css์—์„œ ์„ ํƒ์ž, ์šฐ์„ ์ˆœ์œ„, flex, grid, ์—ฌ๋Ÿฌ ํ”„๋ ˆ์ž„์›Œํฌ ๋“ฑ๋“ฑ

์ด๋Ÿฐ ์ง€์‹๋“ค์„ ์ˆ™์ง€ํ•˜์ง€ ๋ชปํ•˜๊ณ  js๋กœ ๋„˜์–ด๊ฐ€๊ณ  ์›น ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๋ณด๋ฉด ๋ถ„๋ช… ๋‹ค์‹œ ๋Œ์•„์˜ค๊ฒŒ ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‚ด๊ฐ€ ์ด๋Ÿฐ ๊ฒƒ๋„ ๋ชปํ•˜๋‚˜... ํ•˜๋ฉด์„œ ์ž๊ดด๊ฐ์ด ๋Š๊ปด์ง„๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์œ„ ๊ฐœ๋…๋“ค์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์ž‘์„ฑํ•ด์•ผ ์›น์˜ ์™„์„ฑ๋„๊ฐ€ ์˜ฌ๋ผ๊ฐ€๊ณ  js์™€์˜ ์‹œ๋„ˆ์ง€๋„ ํ›จ์”ฌ ์ข‹์•„์ง„๋‹ค.

๊ฒฐ๊ตญ html, css์—์„œ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ๋‹จ๋‹จํžˆ ๋‹ค์ ธ๋†”์•ผ ์‹œ๊ฐ„ ๋‚ญ๋น„๋ฅผ ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๊ณ  ๊น”๋”ํ•œ ์›น ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ์‚ฌ์‹ค html, css ๊ฐœ๋…์€ ์™ธ์šฐ๋Š” ๊ฒƒ์ด ๋Œ€๋ถ€๋ถ„์ด๋ผ ์•ฝ๊ฐ„ ๋ฌธ๊ณผํ‹ฑ ํ•˜๊ธฐ๋„ ํ•˜๋‹ค. ๊ทธ๋ž˜์„œ ๋น„์ „๊ณต์ž๋“ค๋„ ์‰ฝ๊ฒŒ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ(also js๋ฅผ ๋งŒ๋‚˜๊ธฐ ์ „๊นŒ์ง€...).

๊ทธ๋Ÿผ ์˜ค๋Š˜์€ html, css์—์„œ ๋†“์น˜๊ธฐ ์‰ฝ๊ณ  ๋งŽ์ด ๊ฐ„ํ™”ํ•˜๋Š” ์ค‘์š”ํ•œ ๊ฐœ๋…๋“ค์„ ์„ค๋ช…ํ•ด ๋ณด๊ฒ ๋‹ค!

์›น์— ๋Œ€ํ•œ ๊ฐœ๋…๋“ค

HTML(Hper Text Markup Language)

  • ํŽ˜์ด์ง€์˜ ์ œ๋ชฉ, ๋ฌธ๋‹จ, ํ‘œ, ์ด๋ฏธ์ง€, ๋™์˜์ƒ ๋“ฑ ์›น์˜ ๊ตฌ์กฐ๋ฅผ ๋‹ด๋‹น.

CSS(Cascading Style Sheets)

  • ์‹ค์ œ ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ๋ฐฉ๋ฒ•(์ƒ‰์ƒ, ํฌ๊ธฐ, ํฐํŠธ, ๋ ˆ์ด์•„์›ƒ ๋“ฑ)์„ ์ง€์ •ํ•ด ์ฝ˜ํ…์ธ ๋ฅผ ๊พธ๋ฉฐ์ฃผ๋Š” ์‹œ๊ฐ์ ์ธ ํ‘œํ˜„(์ •์ )์„ ๋‹ด๋‹น.

JS(JacaScript)

  • ์ฝ˜ํ…์ธ ๋ฅผ ๋ฐ”๊พธ๊ณ  ์›€์ง์ด๋Š” ๋“ฑ ํŽ˜์ด์ง€๋ฅผ ๋™์ž‘์‹œํ‚ค๋Š” ๋™์ ์ฒ˜๋ฆฌ๋ฅผ ๋‹ด๋‹น.

์›น ํ‘œ์ค€

  • ์›น ํ‘œ์ค€์ด๋ž€ โ€˜์›น์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํ‘œ์ค€ ๊ธฐ์ˆ ์ด๋‚˜๊ทœ์น™'์„ ์˜๋ฏธ
  • W3C์˜ ํ‘œ์ค€ํ™” ์ œ์ • ๋‹จ๊ณ„์˜ โ€˜๊ถŒ๊ณ ์•ˆ(REC)โ€™์— ํ•ด๋‹นํ•˜๋Š” ๊ธฐ์ˆ 

cf) ๋ธŒ๋ผ์šฐ์ € ๊ณต๊ธ‰์—…์ฒด(Browser Venders) ex Chorme, firefox, safari ...

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•(Cross Browsing)์ด๋ž€ ์กฐ๊ธˆ์€ ๋‹ค๋ฅด๊ฒŒ ๊ตฌ๋™๋˜๋Š” ์—ฌ๋Ÿฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ, ๋™์ผํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(๊ฐ™์€ ํ™”๋ฉด, ๊ฐ™์€ ๋™์ž‘ ๋“ฑ)์„ ์ค„ ์ˆ˜ ์žˆ๋„๋ก ์ œ์ž‘ํ•˜๋Š” ๊ธฐ์ˆ , ๋ฐฉ๋ฒ•.

--> ๋”ฐ๋ผ์„œ ๋‹ค์–‘ํ•œ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ผํ•œ ๊ธฐ๋Šฅ๋“ค์ด ์ž‘๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์–ด์•ผ ํ•จ. ์š”์ฆ˜์€ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด ์ž˜ ๋˜์–ด์žˆ์–ด์„œ ํฌ๊ฒŒ ์‹ ๊ฒฝ์„ ์“ฐ์ง€ ์•Š์•„๋„ ๋˜์ง€๋งŒ. ๊ทธ๋ž˜๋„ ๋ฒ„์ „๋ณ„๋กœ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์–ด์„œ mdn์—์„œ ์ฒดํฌํ•ด์•ผํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค!

๋ธŒ๋ผ์šฐ์ €์˜ ๊ธฐ๋ณธ์ ์ธ ์ธํ„ฐํŽ˜์ด์Šค

- ์ฐฝ(Window)
- ํƒญ(Tab)
- ์ฃผ์†Œ์ฐฝ(Address bar)
- ๋ทฐํฌํŠธ(viewport) : ํ•˜๋‚˜์˜ ์›นํŽ˜์ด์ง€๊ฐ€ ์ถœ๋ ฅ๋˜๋Š” ์ „์ฒด ์˜์—ญ(๋ Œ๋”๋ง ๋˜๋Š” ์˜์—ญ)

์›น ์ด๋ฏธ์ง€

  • ์ด๋ฏธ์ง€ ์ฒจ๋ถ€ํ•  ๋•Œ ์ด ๊ฐœ๋…์„ ๋ชจ๋ฅด๋ฉด ํ’๊ฒฝ์‚ฌ์ง„์„ svg ํŒŒ์ผ๋กœ ์˜ฌ๋ฆฌ๊ฑฐ๋‚˜ jpg๋Š” ์™ค์ผ€ ๊นจ์ง€๋Š” ๊ฑฐ์ง€ ํ•˜๊ณ  ๋จธ๋ฆฌ๋ฅผ ๋œฏ์„ ์ˆ˜ ์žˆ๋‹ค. ๐Ÿ˜ฐ

๋น„ํŠธ๋งต

  • ์ •๊ตํ•˜๊ณ  ๋‹ค์–‘ํ•œ ์ƒ‰์ƒ์„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ํ‘œํ˜„
  • ํ™•๋Œ€/์ถ•์†Œ ์‹œ ๊ณ„๋‹จ ํ˜„์ƒ, ํ’ˆ์งˆ ์ €ํ•˜

์ด๋ฏธ์ง€ ํ™•์žฅ์ž(ํฌ๋งท)

  • JPG:
    • Full-color์™€ Gray-scale์˜ ์••์ถ•์„ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง, ์••์ถ•๋ฅ ์ด ํ›Œ๋ฅญํ•ด ์‚ฌ์ง„์ด๋‚˜ ์˜ˆ์ˆ  ๋ถ„์•ผ์—์„œ ๋งŽ์ด์‚ฌ์šฉ
    • ์†์‹ค ์••์ถ• ๋ฐฉ์‹
      • ํ‘œํ˜„์ƒ‰์ƒ๋„(24๋น„ํŠธ, ์•ฝ 1600๋งŒ ์ƒ‰์ƒ)๊ฐ€ ๋›ฐ์–ด๋‚จ
      • ์ด๋ฏธ์ง€์˜ ํ’ˆ์งˆ๊ณผ ์šฉ๋Ÿ‰์„ ์‰ฝ๊ฒŒ ์กฐ์ ˆ ๊ฐ€๋Šฅ
      • ์ž‘์€์šฉ๋Ÿ‰ but ์ด๋ฏธ์ง€ ์ƒˆ๋กœ ์ €์žฅ์‹œ ํ’ˆ์งˆ ์ €ํ•˜๊ฐ€ ์ผ์–ด๋‚จ
      • ๊ฐ€์žฅ ๋„๋ฆฌ ์“ฐ์ด๋Š” ์ด๋ฏธ์ง€ ํฌ๋งท
  • PNG:
    • Gif์˜ ๋Œ€์ฒด ํฌ๋งท์„ ๊ฐœ๋ฐœ๋จ.
    • ๋น„์†์‹ค ์••์ถ•
      • 8๋น„ํŠธ(256 ์ƒ‰์ƒ) / 24๋น„ํŠธ(์•ฝ 1600๋งŒ ์ƒ‰์ƒ) ์ปฌ๋Ÿฌ ์ด๋ฏธ์ง€ ์ฒ˜๋ฆฌ
      • ์šฉ๋Ÿ‰์€ jpg ๋ณด๋‹ค ํผ
      • Alpha Channel์˜ ์ง€์›(ํˆฌ๋ช…๋„) โ†’ ์›ํ•˜๋Š” ์ด๋ฏธ์ง€ ์˜์—ญ์ด์™ธ ํˆฌ๋ช…ํ•˜๊ฒŒ ์ถœ๋ ฅ๊ฐ€๋Šฅ
      • W3C ๊ถŒ์žฅ ํฌ๋งท
  • GIF:
    • ์ด๋ฏธ์ง€ ํŒŒ์ผ ๋‚ด์— ์ด๋ฏธ์ง€ ๋ฐ ๋ฌธ์ž์—ด ๊ฐ™์€ ์ •๋ณด๋“ค์„ ์ €์žฅ
    • ๋น„์†์‹ค ์••์ถ•
      • ์—ฌ๋Ÿฌ ์žฅ์˜ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ์˜ ํŒŒ์ผ์— ๋‹ด์„ ์ˆ˜ ์žˆ์Œ
    • (์›€์งค, ์• ๋‹ˆ๋ฉ”์ด์…˜)
      • 8๋น„ํŠธ ์ƒ‰์ƒ๋งŒ ์ง€์›(๋‹ค์–‘ํ•œ ์ƒ‰์ƒ ํ‘œํ˜„์—๋Š” ์ ํ•ฉํ•˜์ง€ ์•Š์Œ)
  • WEBP:
    • JPG, PNG, GIF๋ฅผ ๋ชจ๋‘ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ๋Š” ๊ตฌ๊ธ€์ด ๊ฐœ๋ฐœํ•œ ์ด๋ฏธ์ง€ ํฌ๋งท
    • ์™„๋ฒฝํ•œ ์†์‹ค/๋น„์†์‹ค ์••์ถ• ์ง€์›
    • GIF ๊ฐ™์€ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ง€์›
    • Alpha Channel ์ง€์›(์†์‹ค, ๋น„์†์‹ค ๋ชจ๋‘)
    • ํ•˜์œ„ํ˜ธํ™˜์„ฑ ํ™•์ธ ํ•„์š”

๋ฒกํ„ฐ

  • ํ™•๋Œ€/์ถ•์†Œ์—์„œ ์ž์œ ๋กœ์Œ, ์šฉ๋Ÿ‰ ๋ณ€ํ™”๊ฐ€ ์—†์Œ
  • ์ •๊ตํ•œ ์ด๋ฏธ์ง€(์ธ๋ฌผ, ํ’๊ฒฝ ์‚ฌ์ง„ ๊ฐ™์€)๋ฅผ ํ‘œํ˜„ํ•˜๊ธฐ ์–ด๋ ค์›€

์ด๋ฏธ์ง€ ํ™•์žฅ์ž(ํฌ๋งท)

  • SVG:
    • ๋งˆํฌ์—…์–ธ์–ด ๊ธฐ๋ฐ˜์˜ ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ์„ ํ‘œํ˜„ํ•˜๋Š” ํฌ๋งท.
    • ํ•ด์ƒ๋„์˜ ์˜ํ–ฅ์—์„œ ์ž์œ ๋กœ์›€ โ†’ ์ด๋ฏธ์ง€๊ฐ€ ์ž์ฃผ ๋ฐ”๋€๋‹ค๋ฉด ์‚ฌ์šฉ
    • CSS์™€ JS๋กœ ์ œ์–ด ๊ฐ€๋Šฅ
    • ํŒŒ์ผ ๋ฐ ์ฝ”๋“œ ์‚ฝ์ž… ๊ฐ€๋Šฅ

ํŠน์ˆ˜ ๋ฌธ์ž ์šฉ์–ด ์ •๋ฆฌ

์ด ๊ฐœ๋…๋„ ์€๊ทผ ์ž˜ ๋ชจ๋ฅด๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค. ์šฉ์–ด๋„ ํ™•์‹คํžˆ ์•Œ์•„๋‘์ž! ๐Ÿง

  • ๊ทธ๋ ˆ์ด๋ธŒ, ๋ฐฑํ‹ฑ(Grave, Backtick) โ†’ `
  • ํ‹ธ๋“œ, ๋ฌผ๊ฒฐํ‘œ์‹œ(Tilde) โ†’ ~
  • ๋Š๋‚Œํ‘œ(Exclamation mark) โ†’ !
  • ๊ณจ๋ฑ…์ด(At sign) โ†’ @
  • ์ƒต(Sharp, Number sign)โ†’ #
  • ์บ๋Ÿฟ(Caret) โ†’ ^
  • ์— ํผ์„ผ๋“œ(Ampersand) โ†’ &
  • ๋ณ„ํ‘œ(Asterisk) โ†’ *
  • ํ•˜์ดํ”ˆ, ๋Œ€์‹œ(Hyphen, Dash) โ†’ -
  • ์–ธ๋”์Šค์ฝ”์–ด, ๋กœ๋Œ€์‹œ, ๋ฐ‘์ค„(Underscore, Low dash) โ†’ _
  • ์ฟผํ…Œ์ด์…˜, ํฐ ๋”ฐ์˜ดํ‘œ(Quotation mark) โ†’ โ€œ
  • ์•„ํฌ์ŠคํŠธ๋กœํ”ผ, ์ž‘์€ ๋”ฐ์˜ดํ‘œ(Apostrophe) โ†’ โ€˜
  • ์ฝœ๋ก (Colon) โ†’ :
  • ์„ธ๋ฏธ์ฝœ๋ก (Semicolon) โ†’ ;
  • ํ”ผ๋ฆฌ์–ด๋“œ, ๋‹ท, ์ , ๋งˆ์นจํ‘œ(Period, Dot) โ†’ .
  • ์Šฌ๋ž˜์‹œ(Slash) โ†’ /
  • ๋ฒ„ํ‹ฐ์ปฌ ๋ฐ”(Vertical bar) โ†’ |
  • ๋ฐฑ์Šฌ๋ž˜์‹œ, ์—ญ ์Šฌ๋ž˜์‹œ(Backslash) โ†’ \
  • ํผ๋ Œ์„œ์‹œ์Šค, ์†Œ๊ด„ํ˜ธ, ๊ด„ํ˜ธ(Parenthesis) โ†’ ()
  • ๋ธŒ๋ ˆ์ด์Šค, ์ค‘๊ด„ํ˜ธ(Brace) โ†’ {}
  • ๋ธŒ๋ž˜ํ‚ท, ๋Œ€๊ด„ํ˜ธ(Bracket) โ†’ []
  • ์•ต๊ธ€ ๋ธŒ๋ž˜ํ‚ท, ๊บฝ์‡ ๊ด„ํ˜ธ(Angle Bracket) โ†’ <>

์˜คํ”ˆ ์†Œ์Šค ๋ผ์ด์„ผ์Šค

  • ์–ด๋–ค ์ œํ’ˆ์„ ๊ฐœ๋ฐœํ•˜๋Š” ๊ณผ์ •์— ํ•„์š”ํ•œ ์†Œ์Šค ์ฝ”๋“œ๋‚˜ ์„ค๊ณ„๋„๋ฅผ, ๋ˆ„๊ตฌ๋‚˜ ์ ‘๊ทผํ•ด์„œ ์—ด๋žŒํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ณต๊ฐœํ•˜๋Š” ๊ฒƒ

์˜คํ”ˆ์†Œ์Šค

  • Apache License
    • ์•„ํŒŒ์น˜ ์†Œํ”„ํŠธ์›จ์–ด ์žฌ๋‹จ์—์„œ ์ž์ฒด ์†Œํ”„ํŠธ์›จ์–ด์— ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“  ๋ผ์ด์„ผ์Šค
    • ๊ฐœ์ธ์ /์ƒ์—…์  ์ด์šฉ, ๋ฐฐํฌ, ์ˆ˜์ •, ํŠนํ—ˆ ์‹ ์ฒญ์ด ๊ฐ€๋Šฅ
  • MIT License
    • MIT์—์„œ ์†Œํ”„ํŠธ์›จ์–ด ํ•™์ƒ๋“ค์„ ์œ„ํ•ด ๊ฐœ๋ฐœํ•œ ๋ผ์ด์„ผ์Šค
    • ๊ฐœ์ธ ์†Œ์Šค์— ์ด ๋ผ์ด์„ผ์Šค๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋Š” ํ‘œ์‹œ๋งŒ ์ง€์ผœ์ฃผ๋ฉด ๋จ, ๋‚˜๋จธ์ง€ ์‚ฌ์šฉ์— ๋Œ€ํ•œ ์ œ์•ฝ์€ ์—†์Œ
  • BSD License
    • ๋ฒ„ํด๋ฆฌ ์บ˜๋ฆฌํฌ๋‹ˆ์•„์—์„œ ์†Œํ”„ํŠธ์›จ์–ด ํ•™์ƒ๋“ค์„ ์œ„ํ•ด ๊ฐœ๋ฐœํ•œ ๋ผ์ด์„ผ์Šค
    • MIT๋ž‘ ๋น„์Šท
  • Beerware
    • ์˜คํ”ˆ์†Œ์Šค ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋งฅ์ฃผ๋ฅผ ์‚ฌ์ค˜์•ผ ํ•˜๋Š” ๋ผ์ด์„ผ์Šค
    • ๋ฌผ๋ก  ๋งŒ๋‚  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ...

cf) Material Design: ๊ณ ํ’ˆ์งˆ ๋””์ง€ํ„ธ ๊ฒฝํ—˜์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋„๋ก Google์—์„œ ๋งŒ๋“  ๋””์ž์ธ ์‹œ์Šคํ…œ(๋ฐฉ์‹)

HTML

  • Doctype(DTD)
    • ๋งˆํฌ์—… ์–ธ์–ด์—์„œ ๋ฌธ์„œ ํ˜•์‹์„ ์ •์˜ํ•˜๋ฉฐ, ์›น ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์–ด๋–ค HTML ๋ฒ„์ „์˜ ํ•ด์„ ๋ฐฉ์‹์œผ๋กœ ํŽ˜์ด์ง€๋ฅผ ์ดํ•ดํ•˜๋ฉด ๋˜๋Š”์ง€๋ฅผ ์•Œ๋ ค์ฃผ๋Š” ์šฉ๋„
  • Tag(ํƒœ๊ทธ)
- <html> โ†’ **๋ฌธ์„œ์˜ ์ „์ฒด ๋ฒ”์œ„**: HTML ๋ฌธ์„œ๊ฐ€ ์–ด๋””์—์„œ ์‹œ์ž‘ํ•˜๊ณ , ์–ด๋””์—์„œ ๋๋‚˜๋Š”์ง€ ์•Œ๋ ค์ฃผ๋Š” ์—ญํ• 
- <head> โ†’ **๋ฌธ์„œ์˜ ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฒ”์œ„**: ์›น ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•ด์„ํ•ด์•ผ ํ•  ์›นํŽ˜์ด์ง€์˜ ์ œ๋ชฉ, ์„ค๋ช…, ์‚ฌ์šฉํ•  ํŒŒ์ผ ์œ„์น˜, ์Šคํƒ€์ผ(CSS) ๊ฐ™์€, ์›นํŽ˜์ด์ง€์˜ ๋ณด์ด์ง€ ์•Š๋Š” ์ •๋ณด๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฒ”์œ„
- <body> โ†’ **๋ฌธ์„œ์˜ ๊ตฌ์กฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฒ”์œ„**: ์‚ฌ์šฉ์ž ํ™”๋ฉด์„ ํ†ตํ•ด ๋ณด์—ฌ์ฃผ๋Š” ๋กœ๊ณ , ํ—ค๋”, ํ‘ธํ„ฐ, ๋„ค๋น„๊ฒŒ์ด์…˜, ๋ฉ”๋‰ด, ๋ฒ„ํŠผ, ์ด๋ฏธ์ง€ ๊ฐ™์€ ์›นํŽ˜์ด์ง€์˜ ๋ณด์—ฌ์ง€๋Š” ๊ตฌ์กฐ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฒ”์œ„
cf) <html lang=โ€koโ€> : ์ง€์ •ํ•  ๋ฌธ์„œ์˜ ์–ธ์–ด๋ฅผ ๋ช…์‹œํ•˜๋Š” html ์†์„ฑ
  • ์ •๋ณด๋ฅผ ์˜๋ฏธํ•˜๋Š” ํƒœ๊ทธ

    • title ํƒœ๊ทธ โ†’ html ๋ฌธ์„œ์˜ ์ œ๋ชฉ์„ ์ •์˜, ์›น ๋ธŒ๋ผ์šฐ์ € ํƒญ์— ํ‘œ์‹œ๋จ!

    • meta ํƒœ๊ทธ โ†’ ๋‹ค๋ฅธ ํƒœ๊ทธ๋กœ ์„ค๋ช…ํ•  ์ˆ˜ ์—†๋Š” ์ด์™ธ์˜ ์ •๋ณด html ๋ฌธ์„œ์˜ ์ œ์ž‘์ž, ๋‚ด์šฉ, ํ‚ค์›Œ๋“œ ๊ฐ™์€, ์—ฌ๋Ÿฌ ์ •๋ณด๋ฅผ ๊ฒ€์ƒ‰์—”์ง„์ด๋‚˜ ๋ธŒ๋ผ์šฐ์—๊ฒŒ ์ œ๊ณต

    • ๋ชจ๋ฐ”์ผ์—์„œ ์ ์šฉ๋˜๋Š” ์ •๋ณด, viewport์—์„œ ์ฒ˜์Œ ๋ณด์—ฌ์งˆ ๋•Œ ๋„ˆ๋น„๋ฅผ ๋””๋ฐ”์ด์Šค์˜ ๊ธธ์ด๋กœ ๋งž์ถ”๊ณ  1.0์œผ๋กœ ํ™•๋Œ€ํ•˜๋ผ๋Š” ๋‚ด์šฉ

    • charset(Character Set): ๋ฌธ์ž ์ธ์ฝ”๋”ฉ ๋ฐฉ์‹์„ ์ง€์ •ํ•˜๋Š” html ์†์„ฑ

      cf) ๋ฌธ์ž์ธ์ฝ”๋”ฉ: ๋ฌธ์ž๋‚˜ ๊ธฐํ˜ธ๋“ค์„ ์ปดํ“จํ„ฐ๊ฐ€ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์‹ ํ˜ธ๋กœ ๋งŒ๋“œ๋Š” ๊ฒƒ

      			<meta charset=โ€UTF-8โ€ />
      	
      
      
  • ์ด๋ฏธ์ง€ ์ถœ๋ ฅํ•˜๊ธฐ

<img src=โ€https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStVcg-sYLXVNKqoLGgWSRECNTBbosf8Yt05A&usqp=CAUโ€ alt=โ€bitcoinโ€>
alt: ์ด๋ฏธ์ง€๊ฐ€ ์ถœ๋ ฅ๋˜์ง€ ๋ชปํ•˜๋Š” ๊ฒฝ์šฐ ๋Œ€์‹  ์ถœ๋ ฅํ•  ํ…์ŠคํŠธ๋ผ๊ณ  ํ•ด์„œ ๋Œ€์ฒด ํ…์ŠคํŠธ๋ผ ๋ถˆ๋ฆผ
  • ์ƒ๋Œ€ ๊ฒฝ๋กœ vs ์ ˆ๋Œ€ ๊ฒฝ๋กœ

    ์ƒ๋Œ€๊ฒฝ๋กœ

    • ์ฃผ๋ณ€: ./ (์ƒ๋žต๊ฐ€๋Šฅ)
    • ์ƒ์œ„ํด๋”: ../

    ์ ˆ๋Œ€๊ฒฝ๋กœ

    • http: ์›๊ฒฉ
    • / : ๋ฃจํŠธ๊ฒฝ๋กœ(์ตœ์ƒ์œ„๊ฒฝ๋กœ โ†’ ํ”„๋กœ์ ํŠธ๋กœ ๋“ค์–ด์˜ค์ž๋งˆ์ž ๋ณด์ด๋Š” ์œ„์น˜) / ๋กœ์ปฌํ˜ธ์ŠคํŠธ ๊ฒฝ๋กœ๊ฐ€ ์ƒ๋žต๋˜์–ด ์žˆ์Œ
    cf) ๋ธŒ๋ผ์šฐ์ €๋Š” ์ž๋™์œผ๋กœ index.html ํŒŒ์ผ์„ ์ฐพ์•„ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋„์–ด์คŒ(โ‡’ํด๋” ๊ฒฝ๋กœ๋งŒ ์ œ์‹œํ•ด๋„๋จ)

- ๋ธŒ๋ผ์šฐ์ € ์Šคํƒ€์ผ ์ดˆ๊ธฐํ™”

  • ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์„ค์ •๋˜์–ด ์žˆ๋Š” css ์Šคํƒ€์ผ์„ ์ดˆ๊ธฐํ™”

  • reset.css cdn โ†’ jsDeliver github ๋“ค์–ด๊ฐ€์„œ reset.css ํ™•์ธ

    cf) ํŒŒ์ผ๋ช….min.ํ™•์žฅ์ž์™€ ๊ฐ™์ด min(Minify)ํ‚ค์›Œ๋“œ๋Š” ํŒŒ์ผ์ด ๋‚œ๋…ํ™”๋‚˜ ๊ฒฝ๋Ÿ‰ํ™”๋˜์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธ

    https://www.jsdelivr.com/package/npm/reset-css
    -> ์—ฌ๊ธฐ์„œ ๋ธŒ๋ผ์šฐ์ € ์Šคํƒ€์ผ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ์ฝ”๋“œ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Œ.

- ๋ถ€๋ชจ ์ž์‹ ๊ด€๊ณ„

  • ์ƒ์œ„(์กฐ์ƒ)์š”์†Œ: ๋ถ€๋ชจ์š”์†Œ๋ฅผ ํฌํ•จํ•œ ๋‚˜๋ฅผ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ๋ชจ๋“  ์š”์†Œ
  • ํ•˜์œ„(ํ›„์†)์š”์†Œ: ์ž์‹์š”์†Œ๋ฅผ ํฌํ•จํ•œ ๋‚ด๊ฐ€ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ๋ชจ๋“  ์š”์†Œ

- ๋นˆ ํƒœ๊ทธ

  • ๋นˆ ํƒœ๊ทธ๋“ค์€ ๋‚ด์šฉ์„ ์ฑ„์šธ ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ๋Šฅ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ์†์„ฑ๊ณผ ๊ฐ’์„ ํ•„์š”๋กœ ํ•จ

๋ฐฉ์‹

  • <ํƒœ๊ทธ> - ํŽธ๋ฆฌํ•จ
  • <ํƒœ๊ทธ/> - ์•ˆ์ „ํ•จ, ํ”„๋ ˆ์ž„์›Œํฌ ์‚ฌ์šฉ์‹œ์†์„ฑ, ๊ฐ’
  • <ํƒœ๊ทธ ์†์„ฑ=โ€๊ฐ’">๋‚ด์šฉ</ํƒœ๊ทธ>
  • ex) <input type=โ€checkboxโ€/>

- ๊ธ€์ž์™€ ์ƒ์ž

์š”์†Œ๊ฐ€ ํ™”๋ฉด์— ์ถœ๋ ฅ๋˜๋Š” ํŠน์„ฑ, ํฌ๊ฒŒ 2๊ฐ€์ง€๋กœ ๊ตฌ๋ถ„

  • ์ธ๋ผ์ธ(inline)์š”์†Œ: ๊ธ€์ž๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์š”์†Œ๋“ค, ๊ธ€์ž์ฒ˜๋Ÿผ ์ทจ๊ธ‰

    • <span></span>: ๋ณธ์งˆ์ ์œผ๋กœ ์•„๋ฌด๊ฒƒ๋„ ๋‚˜ํƒ€๋‚ด์ง€ ์•Š์Œ, ์ฝ˜ํ…์ธ  ์˜์—ญ์„ ์„ค์ •ํ•˜๋Š” ์šฉ๋„, ์ธ๋ผ์ธ ํŠน์„ฑ์„ ๊ฐ€์ง โ‡’ ์š”์†Œ๊ฐ€ ์ˆ˜ํ‰์œผ๋กœ ์Œ“์ž„, ํ•˜๋‚˜์˜ ๊ธ€์ž์ฒ˜๋Ÿผ ์ทจ๊ธ‰
      • html์—์„œ ์ค„๋ฐ”๊ฟˆ์œผ๋กœ span ํƒœ๊ทธ ์—ฐ์†์œผ๋กœ ์ž‘์„ฑ์‹œ ๋„์–ด์“ฐ๊ธฐ ์ƒ๊น€
      • html์—์„œ ์ค„๋ฐ”๊พธ์ง€ ์•Š๊ณ  spanํƒœ๊ทธ ์—ฐ์†์œผ๋กœ ์ž‘์„ฑ์‹œ ๋„์–ด์“ฐ๊ธฐ ์—†์Œ
    • ํฌํ•จํ•œ ์ฝ˜ํ…์ธ  ํฌ๊ธฐ๋งŒํผ ์ž๋™์œผ๋กœ ๊ฐ€๋กœ ์„ธ๋กœ๊ฐ€ ์ค„์–ด๋“ฌ
    • ๊ธ€์ž์š”์†Œ๋Š” ๊ฐ€๋กœ ์„ธ๋กœ ์‚ฌ์ด์ฆˆ(width, height)๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์—†์Œ
    • margin, padding ์ ์šฉ์‹œ ์ขŒ์šฐ๋งŒ ๊ฐ€๋Šฅ
    • ์ธ๋ผ์ธ ์š”์†Œ์˜ ์ž์‹์š”์†Œ๋กœ ๋ธ”๋ก ์š”์†Œ๋ฅผ ์‚ฌ์šฉ๋ถˆ๊ฐ€, ์ธ๋ผ์ธ ์š”์†Œ๋Š” ๊ฐ€๋Šฅ
  • ๋ธ”๋ก(block)์š”์†Œ: ์ƒ์ž(๋ ˆ์ด์•„์›ƒ)๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์š”์†Œ๋“ค

    • : ๋ณธ์งˆ์ ์œผ๋กœ ์•„๋ฌด๊ฒƒ๋„ ๋‚˜ํƒ€๋‚ด์ง€ ์•Š๋Š”, ์ฝ˜ํ…์ธ  ์˜์—ญ์„ ์„ค์ •ํ•˜๋Š” ์šฉ๋„
    • ๊ฐ€๋กœ๋„ˆ๋น„๋Š” ๋ถ€๋ชจ ์š”์†Œ์˜ ํฌ๊ธฐ๋งŒํผ ์ž๋™์œผ๋กœ ๋Š˜์–ด๋‚˜๋Š” ํŠน์„ฑ
    • ์„ธ๋กœ๋„ˆ๋น„๋Š” ์ž๋™์œผ๋กœ ์ค„์–ด๋“œ๋Š” ํŠน์„ฑ
    • ์ƒํ•˜์ขŒ์šฐ ์‚ฌ์ด์ฆˆ ์„ค์ • ๊ฐ€๋Šฅ
    • margin, padding ์ƒํ•˜์ขŒ์šฐ ์‚ฌ์ด์ฆˆ ์„ค์ • ๊ฐ€๋Šฅ
    • ์ž์‹์œผ๋กœ ๋ธ”๋ก์š”์†Œ, ์ธ๋ผ์ธ์š”์†Œ ๊ฐ€๋Šฅ

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