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

์˜ค๋Š˜์€ CSS์˜ ์†์„ฑ๋“ค์— ๋Œ€ํ•ด ํ•™์Šตํ–ˆ๋‹ค. ์ •๋ง ๋งŽ์€ ์†์„ฑ๋“ค๊ณผ ๊ฐœ๋…๋“ค์ด ์žˆ์—ˆ๋Š”๋ฐ ๊ทธ์ค‘์— ์ค‘์š”ํ•œ ๊ฒƒ๋“ค์€ ๋ฏธ๋ฆฌ ํ•™์Šตํ•ด๋‘๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ๋ฌผ๋ก  ์ง์ ‘ ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๋ฉด์„œ ํ•™์Šตํ•  ์ˆ˜๋„ ์žˆ๊ฒ ์ง€๋งŒ ๊ทธ๋Ÿฌ๋ฉด ๊ธฐ๋Šฅ๋“ค์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์•Œ์ง€ ๋ชปํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋‚˜์ค‘์— ํ™œ์šฉํ•˜์ง€ ๋ชปํ•˜๊ฒŒ ๋œ๋‹ค.

๊ทธ๋ž˜์„œ ์กฐ๊ธˆ ๋น„ํšจ์œจ์ ์ด๋”๋ผ๋„ ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋Šฅ๋“ค์„ ๋ฏธ๋ฆฌ ํ•™์Šตํ•˜๊ณ  ๊ฐœ๋…๋“ค์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™๋‹ค. ์ „ํ™˜, ๋ณ€ํ™˜, ์œ„์น˜ ์กฐ์ • ๋“ฑ๊ณผ ๊ฐ™์€ ๊ฒƒ์€ ์†์„ฑ๋“ค์€ ๋‹จ์ˆœ์ด ์™ธ์šฐ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค(์€๊ทผํžˆ ์–ด๋ ต๊ธฐ๋„ ํ•˜๋‹ค).

๊ทธ๋Ÿผ ์‹œ์ž‘ํ•ด๋ณด์ž! ๐Ÿƒโ€

CSS ์†์„ฑ(Properties)

๊ฐœ์š”

  • ๋ฐ•์Šค ๋ชจ๋ธ
  • ๊ธ€๊ผด, ๋ฌธ์ž
  • ๋ฐฐ๊ฒฝ
  • ๋ฐฐ์น˜
  • ํ”Œ๋ ‰์Šค(์ •๋ ฌ)
  • ์ „ํ™˜
  • ์• ๋‹ˆ๋ฉ”์ด์…˜
  • ๋ณ€ํ™˜
  • ๋„์›€
  • ๊ทธ๋ฆฌ๋“œ
  • ๋‹ค๋‹จ
  • ํ••๋Ÿฌ

๋ฐ•์Šค ๋ชจ๋ธ

  • width, height - ์š”์†Œ์˜ ๊ฐ€๋กœ/์„ธ๋กœ ๋„ˆ๋น„

    • ๊ธฐ๋ณธ๊ฐ’: auto - ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋„ˆ๋น„๋ฅผ ๊ณ„์‚ฐ
      • ์ธ๋ผ์ธ์š”์†Œ - ๊ฐ€๋กœ/์„ธ๋กœ ๋„ˆ๋น„๊ฐ€ ์ž๋™์œผ๋กœ ์ค„์–ด๋“ฌ
      • ๋ธ”๋ก์š”์†Œ - ๊ฐ€๋กœ ๋„ˆ๋น„๊ฐ€ ์ž๋™์œผ๋กœ ๋Š˜์–ด๋‚จ, ์„ธ๋กœ ๋„ˆ๋น„๋Š” ์ž๋™์œผ๋กœ ์ค„์–ด๋“ฌ
    • ๋‹จ์œ„ - px, em, vw ๋“ฑ
  • max-width, max-height - ์š”์†Œ๊ฐ€ ์ปค์งˆ ์ˆ˜ ์žˆ๋Š” ์ตœ๋Œ€ ๊ฐ€๋กœ/์„ธ๋กœ ๋„ˆ๋น„

    • ๊ธฐ๋ณธ๊ฐ’: none - ์ตœ๋Œ€ ๋„ˆ๋น„ ์ œํ•œ ์—†์Œ
    • ๋‹จ์œ„ - px, em, vw ๋“ฑ
  • min-width, min-height - ์š”์†Œ๊ฐ€ ์ž‘์•„์งˆ ์ˆ˜ ์žˆ๋Š” ์ตœ์†Œ ๊ฐ€๋กœ/์„ธ๋กœ ๋„ˆ๋น„

    • ๊ธฐ๋ณธ๊ฐ’: 0 - ์ตœ์†Œ ๋„ˆ๋น„ ์ œํ•œ ์—†์Œ
    • ๋‹จ์œ„ - px, em, vw ๋“ฑ

โœ๏ธ ๋‹จ์œ„

  • px - ํ”ฝ์…€
  • % - ์ƒ๋Œ€์  ๋ฐฑ๋ถ„์œจ
  • em - ์š”์†Œ์˜ ๊ธ€๊ผด ํฌ๊ธฐ
  • rem - ๋ฃจํŠธ ์š”์†Œ(html)์˜ ๊ธ€๊ผด ํฌ๊ธฐ
  • vw - ๋ทฐํฌํŠธ ๊ฐ€๋กœ ๋„ˆ๋น„์˜ ๋ฐฑ๋ถ„์œจ
  • vh - ๋ทฐํฌํŠธ ์„ธ๋กœ ๋„ˆ๋น„์˜ ๋ฐฑ๋ถ„์œจ
  • margin - ์š”์†Œ์˜ ์™ธ๋ถ€ ์—ฌ๋ฐฑ(๊ณต๊ฐ„)์„ ์ง€์ •ํ•˜๋Š” ๋‹จ์ถ• ์†์„ฑ
    • ๊ธฐ๋ณธ๊ฐ’: 0 - ์™ธ๋ถ€ ์—ฌ๋ฐฑ ์—†์Œ
    • auto: ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์—ฌ๋ฐฑ์„ ๊ณ„์‚ฐ โ†’์š”์†Œ์˜ ๊ฐ€์šด๋ฐ ์ •๋ ฌ์— ํ™œ์šฉ
    • ๋‹จ์œ„: px, em, vw ๋“ฑ โ†’ ๋งˆ์ด๋„ˆ์Šค ์‚ฌ์šฉ ๊ฐ€๋Šฅ

๐Ÿ“Œ margin์˜ ๋‹จ์ถ• ์†์„ฑ

  • margin: top, right, bottom, left ;
  • margin: top, bottom left, right ;
  • margint: top left, right bottom ;
  • margint: top right nottom left ;

๐Ÿ“Œ margin์˜ ๊ฐœ๋ณ„ ์†์„ฑ

  • margin-top ;
  • margin-bottom ;
  • margin-left ;
  • margint-right ;
  • padding - ์š”์†Œ์˜ ๋‚ด๋ถ€ ์—ฌ๋ฐฑ(๊ณต๊ฐ„)์„ ์ง€์ •ํ•˜๋Š” ๋‹จ์ถ• ์†์„ฑ โ†’ ์š”์†Œ์˜ ํฌ๊ธฐ๊ฐ€ ์ปค์ง
    • ๊ธฐ๋ณธ๊ฐ’: 0 - ๋‚ด๋ถ€ ์—ฌ๋ฐฑ ์—†์Œ
    • ๋‹จ์œ„: px, em, vw ๋“ฑ
    • %: ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ฐ€๋กœ ๋„ˆ๋น„์— ๋Œ€ํ•œ ๋น„์œจ๋กœ ์ง€์ •

๐Ÿ“Œ padding ๊ฐœ๋ณ„ ์†์„ฑ

  • padding: top, right, bottom, left ;
  • padding: top, bottom left, right ;
  • padding: top left, right bottom ;
  • padding: top right nottom left ;

๐Ÿ“Œ padding์˜ ๊ฐœ๋ณ„ ์†์„ฑ

  • padding-top ;
  • padding-bottom ;
  • padding-left ;
  • padding-right ;
  • border: ์„ -๋‘๊ป˜ ์„ -์ข…๋ฅ˜ ์„ -์ƒ‰์ƒ; - ์š”์†Œ์˜ ํ…Œ๋‘๋ฆฌ ์„ ์„ ์ง€์ •ํ•˜๋Š” ๋‹จ์ถ• ์†์„ฑ โ†’ ์š”์†Œ์˜ ํฌ๊ธฐ๊ฐ€ ์ปค์ง

    • ๊ธฐ๋ณธ๊ฐ’: medium - ๊ธฐ๋ณธ๊ฐ’์ด ์žˆ๊ธด ํ•˜์ง€๋งŒ ์• ๋งคํ•ด์„œ ์ง์ ‘ ๋‹จ์œ„๋กœ ์ง€์ •ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Œ
    • ๋‹จ์œ„: px, em, %
    • ๋ฐฉํ–ฅ์œผ๋กœ ๊ฐœ๋ณ„ ์†์„ฑ ์„ค์ • ๊ฐ€๋Šฅ
  • border-style - ์š”์†Œ ํ…Œ๋‘๋ฆฌ ์„ ์˜ ์ข…๋ฅ˜

    • ๊ธฐ๋ณธ๊ฐ’: none - ์„  ์—†์Œ
    • solid: ์‹ค์„ (์ผ๋ฐ˜ ์„ )
    • dashed: ํŒŒ์„ 
  • border-color - ์š”์†Œ ํ…Œ๋‘๋ฆฌ ์„ ์˜ ์ƒ‰์ƒ์„ ์ง€์ •ํ•˜๋Š” ๋‹จ์ถ• ์†์„ฑ

    • ๊ธฐ๋ณธ๊ฐ’: ๊ฒ€์ •์ƒ‰
    • ์ƒ‰์ƒ: ์„ ์˜ ์ƒ‰์ƒ
    • transparent: ํˆฌ๋ช…

โœ๏ธ ์ƒ‰์ƒ ํ‘œํ˜„

  • ์ƒ‰์ƒ ์ด๋ฆ„
  • Hex ์ƒ‰์ƒ์ฝ”๋“œ - 16์ง„์ˆ˜ ์ƒ‰์ƒ(Hexadecimal Colors) #000, #FFFFFF
  • RGB - ๋น›์˜ ์‚ผ์›์ƒ‰ rgb(255, 255, 255)
  • RGBA - ๋น›์˜ ์‚ผ์›์ƒ‰ + ํˆฌ๋ช…๋„(0, 0, 0, 0.5)
  • border-radius - ๋ชจ์„œ๋ฆฌ๋ฅผ ๋‘ฅ๊ธ€๊ฒŒ ๊นŽ์Œ

    • ๊ธฐ๋ณธ๊ฐ’: 0 - ๋‘ฅ๊ธ€๊ฒŒ ์—†์Œ
    • ๋‹จ์œ„: px, em, % ๋“ฑ
    • border-radius: 10px ; โ†’ ๋ฐ˜์ง€๋ฆ„์ด 10px์ธ ์›๋งŒํผ ์ž˜๋ผ๋ƒ„
    • ๋ฐฉํ–ฅ์œผ๋กœ ๊ฐœ๋ณ„ ์†์„ฑ ์„ค์ • ๊ฐ€๋Šฅ(์‹œ๊ณ„๋ฐฉํ–ฅ)
  • box-sizing - ์š”์†Œ์˜ ํฌ๊ธฐ ๊ณ„์‚ฐ ๊ธฐ์ค€์„ ์ง€์ •

    • ๊ธฐ๋ณธ๊ฐ’: content-box - ์š”์†Œ์˜ ๋‚ด์šฉ์œผ๋กœ ํฌ๊ธฐ ๊ณ„์‚ฐ
    • border-box - ์š”์†Œ์˜ ๋‚ด์šฉ + padding + border์˜ ํ•ฉ์œผ๋กœ ํฌ๊ธฐ ๊ณ„์‚ฐ โ†’ ์—ฌ๋Ÿฌ ์†์„ฑ์„ ๋„ฃ์ง€๋งŒ ํฌ๊ธฐ๋Š” ํ‚ค์šฐ๊ณ  ์‹ถ์ง€ ์•Š์„ ๋•Œ!
  • overflow - ์š”์†Œ์˜ ํฌ๊ธฐ ์ด์ƒ์œผ๋กœ ๋‚ด์šฉ์ด ๋„˜์ณค์„ ๋•Œ, ๋ณด์—ฌ์ง์„ ์ œ์–ดํ•˜๋Š” ๋‹จ์ถ• ์†์„ฑ

    • ๊ธฐ๋ณธ๊ฐ’: visible - ๋„˜์นœ ๋‚ด์šฉ์„ ๊ทธ๋Œ€๋กœ ๋ณด์—ฌ์คŒ
    • hidden - ๋„˜์นœ ๋‚ด์šฉ์„ ์ž˜๋ผ๋ƒ„
    • auto - ๋„˜์นœ ๋‚ด์šฉ์ด ์žˆ๋Š” ๊ฒฝ์šฐ์—๋งŒ ์ž˜๋ผ๋‚ด๊ณ  ์Šคํฌ๋กค๋ฐ” ์ƒ์„ฑ
    • (scroll) - ๋„˜์นœ ๋‚ด์šฉ์„ ์ž˜๋ผ๋ƒ„, ์Šคํฌ๋กค๋ฐ” ์ƒ์„ฑ(๊ฐ€๋กœ, ์„ธ๋กœ ๋‘˜ ๋‹ค ์ƒ๊น€)
    • ๊ฐœ๋ณ„ ์†์„ฑ
      • overflow-x
      • overflow-y
  • display - ์š”์†Œ์˜ ํ™”๋ฉด ์ถœ๋ ฅ(๋ณด์—ฌ์ง) ํŠน์„ฑ

    • block ๊ธฐ๋ณธ๊ฐ’: ์ƒ์ž(๋ ˆ์ด์•„์›ƒ) ์š”์†Œ
    • inline ๊ธฐ๋ณธ๊ฐ’: ๊ธ€์ž ์š”์†Œ
    • inline-block ๊ธฐ๋ณธ๊ฐ’: ๊ธ€์ž + ์ƒ์ž์š”์†Œ
    • flex: ํ”Œ๋ ‰์Šค ๋ฐ•์Šค(1์ฐจ์› ๋ ˆ์ด์•„์›ƒ) - ์ˆ˜ํ‰์ด๋“  ์ˆ˜์ง์ด๋“  ํ•˜๋‚˜์˜ ์ถ•์œผ๋กœ ๋ ˆ์ด์•„์›ƒ ์ •๋ ฌ
    • gird: ๊ทธ๋ฆฌ๋“œ(2์ฐจ์› ๋ ˆ์ด์•„์›ƒ) - x์ถ•/y์ถ•, ํ–‰๊ณผ์—ด ๋‘๊ฐœ์˜ ์ฐจ์›
    • none: ๋ณด์—ฌ์ง ํŠน์„ฑ ์—†์Œ, ํ™”๋ฉด์—์„œ ์‚ฌ๋ผ์ง
  • opacity - ์š”์†Œ ํˆฌ๋ช…๋„

    • ๊ธฐ๋ณธ๊ฐ’: 1 - ๋ถˆํˆฌ๋ช…
    • 0~1: 0๋ถ€ํ„ฐ 1์‚ฌ์ด์˜ ์†Œ์ˆ˜์  ์ˆซ์ž

๊ธ€๊ผด(์„œ์ฒด)

  • font-size - ๊ธ€์ž์˜ ํฌ๊ธฐ

    • ๊ธฐ๋ณธ๊ฐ’: 16px
    • ๋‹จ์œ„: px, em, rem ๋“ฑ
  • font-weight - ๊ธ€์ž์˜ ๋‘๊ป˜(๊ฐ€์ค‘์น˜)

    • ๊ธฐ๋ณธ๊ฐ’: normal, 400 - ๊ธฐ๋ณธ ๋‘๊ป˜
    • bold: 700 - ๋‘๊ป๊ฒŒ
    • 100 ~ 900: 100๋‹จ์œ„์˜ ์ˆซ์ž 9๊ฐœ, normal๊ณผ bold ์ด์™ธ์˜ ๋‘๊ป˜
  • font-style - ๊ธ€์ž์˜ ๊ธฐ์šธ๊ธฐ

    • ๊ธฐ๋ณธ๊ฐ’: normal - ๊ธฐ์šธ๊ธฐ ์—†์Œ
    • italic: ์ดํ…”๋ฆญ์ฒด
  • font-family - ๊ธ€๊ผด(์„œ์ฒด) ์ง€์ • โ†’ (ํ›„๋ณด๋ฅผ ์ •ํ•˜๋Š” ์ด์œ : ๊ธ€๊ผด์€ ์—ฌ๋Ÿฌ ์ด์œ ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Œ)

    • ๊ธ€๊ผด1, โ€œ๊ธ€๊ผด2โ€, ... ๊ธ€๊ผด๊ณ„์—ด ; โ†’ (๊ธ€๊ผด ์ด๋ฆ„์˜ ๋„์–ด์“ฐ๊ธฐ๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ๊ฒฝ์šฐ ๋”ฐ์˜ดํ‘œ๋กœ ๋ฌถ์–ด์ค˜์•ผ ํ•จ)
  • line-height: ํ•œ ์ค„์— ๋†’์ด, ํ–‰๊ฐ„์˜ ์œ ์‚ฌ, ๊ธ€์ž๋Š” ํ•œ ์ค„์˜ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌ(์ˆ˜์ง ๊ฐ€์šด๋ฐ)

    • ์ˆซ์ž: ์š”์†Œ์˜ ๊ธ€๊ผด ํฌ๊ธฐ์˜ ๋ฐฐ์ˆ˜๋กœ ์ง€์ • - 1.4 โ†’ ๊ธ€๊ผด ํฌ๊ธฐ์˜ 1.4๋ฐฐ โ†’ (๋ฐฐ์ˆ˜๋กœ ์ž…๋ ฅํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Œ)
    • ๋‹จ์œ„: px, em, rem, % ๋“ฑ

๊ธ€๊ผด(์„œ์ฒด) ์ข…๋ฅ˜

  • serif - ๋ฐ”ํƒ•์ฒด ๊ณ„์—ด
  • sans-serif - ๊ณ ๋”•์ฒด ๊ณ„์—ด โ†’(๊ฐ€์žฅ ๋งŽ์ด ์”€)
  • monospace - ๊ณ ์ •๋„ˆ๋น„(๊ฐ€๋กœํญ์ด ๋™๋“ฑ) ๊ธ€๊ผด ๊ณ„์—ด
  • culsive - ํ•„๊ธฐ์ฒด ๊ณ„์—ด
  • fantasy - ์žฅ์‹ ๊ธ€๊ผด ๊ณ„์—ด

๋ฌธ์ž

  • color - ๊ธ€์ž์˜ ์ƒ‰์ƒ

    • ๊ธฐ๋ณธ๊ฐ’: rgb(0,0,0) - ๊ฒ€์ •์ƒ‰
    • ์ƒ‰์ƒ: ๊ธฐํƒ€ ์ง€์ • ๊ฐ€๋Šฅํ•œ ์ƒ‰์ƒ
  • text-decoration: ๋ฌธ์ž์˜ ์žฅ์‹(์„ )

    • ๊ธฐ๋ณธ๊ฐ’: ์žฅ์‹ ์—†์Œ
    • underline: ๋ฐ‘์ค„
    • overline: ์œ—์ค„
    • line-through: ์ค‘์•™ ์„ 
  • text-align: ๋ฌธ์ž์˜ ์ •๋ ฌ ๋ฐฉ์‹

    • ๊ธฐ๋ณธ๊ฐ’: ์™ผ์ชฝ ์ •๋ ฌ
    • right: ์˜ค๋ฅธ์ชฝ ์ •๋ ฌ
    • center ๊ฐ€์šด๋ฐ ์ •๋ ฌ
  • text-indent - ๋ฌธ์ž ์ฒซ ์ค„์˜ ๋“ค์—ฌ์“ฐ๊ธฐ โ†’ ์Œ์ˆ˜ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

    • ๊ธฐ๋ณธ๊ฐ’: 0 - ๋“ค์—ฌ์“ฐ๊ธฐ ์—†์Œ
    • ๋‹จ์œ„: px, em, rem emd

๋ฐฐ๊ฒฝ

  • background-color - ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ

    • ๊ธฐ๋ณธ๊ฐ’: ํˆฌ๋ช…
    • ์ƒ‰์ƒ: ์ง€์ • ๊ฐ€๋Šฅํ•œ ์ƒ‰์ƒ
  • background-image - ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ ์‚ฝ์ž…

    • ๊ธฐ๋ณธ๊ฐ’: ์ด๋ฏธ์ง€ ์—†์Œ
    • url(โ€๊ฒฝ๋กœ"): ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ
  • background-repeat

    • ๊ธฐ๋ณธ๊ฐ’: repeat - ์ด๋ฏธ์ง€๋ฅผ ์ˆ˜์ง, ์ˆ˜ํ‰ ๋ฐ˜๋ณต
    • repeat-x: ์ด๋ฏธ์ง€๋ฅผ ์ˆ˜ํ‰ ๋ฐ˜๋ณต
    • repeat-y: ์ด๋ฏธ์ง€๋ฅผ ์ˆ˜์ง ๋ฐ˜๋ณต
    • no-repeat: ๋ฐ˜๋ณต ์—†์Œ
  • background-position - ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ ์œ„์น˜

    • ๊ธฐ๋ณธ๊ฐ’: 0% 0% โ†’ ๋ธŒ๋ผ์šฐ์ €์˜ 0, 0์€ ์™ผ์ชฝ ์ƒ๋‹จ
    • ๋ฐฉํ–ฅ: top, botton, left, right, center ๋ฐฉํ–ฅ โ†’ ๋ฐฉํ–ฅ1 ๋ฐฉํ–ฅ2
    • ๋‹จ์œ„: px, em rem ๋“ฑ โ†’ x์ถ•, y์ถ•
  • background-size - ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ ํฌ๊ธฐ โ†’ x y ์ค‘ ํ•˜๋‚˜๋งŒ ์ž…๋ ฅํ•ด๋„ ์ž๋™์œผ๋กœ ๋น„์œจ์— ๋งž๊ฒŒ ๋‚˜๋จธ์ง€ ๊ฐ’ ๋งž์ถฐ์คŒ

    • ๊ธฐ๋ณธ๊ฐ’: ์ด๋ฏธ์ง€์˜ ์‹ค์ œ ํฌ๊ธฐ
    • ๋‹จ์œ„: px, em, rem
    • cover: ๋น„์œจ์„ ์œ ์ง€, ์š”์†Œ์˜ ๊ฐ€๋กœ/์„ธ๋กœ ์ค‘ ๋” ๋„“์€ ๋„ˆ๋น„์— ๋งž์ถค
    • contain: ๋น„์œจ์„ ์œ ์ง€, ์š”์†Œ์˜๊ฐ€๋กœ/์„ธ๋กœ ์ค‘ ๋” ์งง์€ ๋„ˆ๋น„์— ๋งž์ถค
  • background-attachment - ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ ์Šคํฌ๋กค ํŠน์„ฑ

    • ๊ธฐ๋ณธ๊ฐ’: scroll - ์ด๋ฏธ์ง€๊ฐ€ ์š”์†Œ๋ฅผ ๋”ฐ๋ผ์„œ ๊ฐ™์ด ์Šคํฌ๋กค
    • fixed: ์ด๋ฏธ์ž‘ ๋ทฐํฌํŠธ์— ๊ณ ์ •, ์Šคํฌ๋กคX

๋ฐฐ์น˜

โ†’ ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•  ๋•Œ๋Š” ๊ธฐ์ค€์„ ์ •ํ•˜๊ณ , ๊ทธ๋ฆฌ๊ณ  ์œ„์น˜๋ฅผ ์„ ์–ธ

  • position - ์š”์†Œ์˜ ์œ„์น˜ ์ง€์ • ๊ธฐ์ค€(์œ„์น˜ ์ƒ ๋ถ€๋ชจ์š”์†Œ์™€ ๊ตฌ์กฐ ์ƒ ๋ถ€๋ชจ์š”์†Œ๊ฐ€ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Œ)

    • ๊ธฐ๋ณธ๊ฐ’: static(๊ธฐ์ค€ ์—†์Œ)

    • reative: ์š”์†Œ ์ž์‹ ์„ ๊ธฐ์ค€ โ†’ ๋ณ€๊ฒฝ ์ „ ์ž๋ฆฌ๋Š” ์•ˆ๋ณด์ด์ง€๋งŒ ์ฑ„์›Œ์ ธ ์žˆ์Œ, ์œ„์น˜ ๋ณ€๊ฒฝ๋œ ๊ฒƒ์€ ํ—ˆ์ƒ์ž„, ์ž˜ ์“ฐ์ด์ง€ ์•Š์Œ

    • absolute: ์œ„์น˜ ์ƒ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๊ธฐ์ค€ โ†’ ์œ„์น˜ ์ƒ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๊ผญ ํ™•์ธํ•ด์•ผ ํ•จ, ์ฃผ๋ณ€ ์š”์†Œ์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์ด ๋ฌด๋„ˆ์ง, ๊ณต์ค‘์œผ๋กœ ๋ถ• ๋œธ, ๋ถ€๋ชจ ์š”์†Œ์˜ ํฌ์ง€์…˜ ๊ฐ’์ด ์—†์œผ๋ฉด ๋ทฐํฌํŠธ๋ฅผ ์œ„์น˜ ์ƒ ๊ธฐ์ค€์œผ๋กœ ํ•จ(๋ถ€๋ชจ ์š”์†Œ๋Š” static์ธ ๊ฒƒ๊ณผ ๋™์ผ)

    • fixed: ๋ทฐํฌํŠธ(๋ธŒ๋ผ์šฐ์ €)๋ฅผ ๊ธฐ์ค€ โ†’ ์ฃผ๋ณ€๊ณผ ์ƒํ˜ธ์ž‘์šฉX, ๊ณต์ค‘์— ๋ถ• ๋œธ, ํ•ญ์ƒ ํ™”๋ฉด์— ๊ณ ์ •๋จ

    • (sticky: ์Šคํฌ๋กค ์˜์—ญ ๊ธฐ์ค€)

  • top, bottom, left, right - ์š”์†Œ์˜ ๊ฐ ๋ฐฉํ–ฅ๋ณ„ ๊ฑฐ๋ฆฌ ์ง€์ •

    • ๊ธฐ๋ณธ๊ฐ’: ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ณ„์‚ฐ
    • ๋‹จ์œ„: px, em, rem ๋“ฑ

โœ๏ธ ์š”์†Œ ์Œ“์ž„ ์ˆœ์„œ(Stack order)
(โ†’ ์ˆœ์„œ๋Œ€๋กœ ๋‹ค ๋งŒ์กฑํ•ด์•ผ ํ•จ, 3๋ฒˆ์ด ์ ค ๋†’๋‹ค๊ณ  ์œ„์— ์Œ“์ด์ง€ ์•Š์Œ)

  • ์–ด๋–ค ์š”์†Œ๊ฐ€ ์‚ฌ์šฉ์ž์™€ ๋” ๊ฐ€๊น๊ฒŒ ์žˆ๋Š”์ง€(์œ„์— ์Œ“์ด๋Š”์ง€) ๊ฒฐ์ •
  1. ์š”์†Œ์— psition ์†์„ฑ์˜ ๊ฐ’์ด ์žˆ๋Š” ๊ฒฝ์šฐ ์œ„์— ์Œ“์ž„(๊ธฐ๋ณธ๊ฐ’ static ์ œ์™ธ) โ†’ relatice, absolute, fixed
  2. 1๋ฒˆ ์กฐ๊ฑด์ด ๊ฐ™์€ ๊ฒฝ์šฐ, z-index ์†์„ฑ์˜ ์ˆซ์ž ๊ฐ’์ด ๋†’์„ ์ˆ˜๋ก ์œ„์— ์Œ“์ž„
  3. 1๋ฒˆ๊ณผ 2๋ฒˆ ์กฐ๊ฑด์ด ๊ฐ™์€ ๊ฒฝ์šฐ, HTML์˜ ๋‹ค์Œ ๊ตฌ์กฐ์ผ ์ˆ˜๋ก ์œ„์— ์Œ“์ž„ โ†’ HTML์˜ ๊ตฌ์กฐ๊ฐ€ ๋” ๋‚˜์ค‘์— ์ž‘์„ฑ๋  ์ˆ˜๋ก
*cf) z-index์˜ ๊ธฐ๋ณธ๊ฐ’: 0*
  • z-index - ์š”์†Œ์˜ ์Œ“์ž„ ์ •๋„๋ฅผ ์ง€์ •
    • ๊ธฐ๋ณธ๊ฐ’: ๋ถ€๋ชจ ์š”์†Œ์™€ ๋™์ผํ•œ ์Œ“์ž„ ์ •๋„, 0
    • ์ˆซ์ž: ์ˆซ์ž๊ฐ€ ๋†’์„ ์ˆ˜๋ก ์œ„์— ์Œ“์ž„

โœ๏ธ Position ๊ฐ’ ์„ค์ •๊ณผ display

  • position ์†์„ฑ์˜ ๊ฐ’์œผ๋กœ absolute, fixed๊ฐ€ ์ง€์ •๋œ ์š”์†Œ๋Š” display ์†์„ฑ์ด block์œผ๋กœ ๋ณ€๊ฒฝ๋จ

ํ”Œ๋ ‰์Šค(์ •๋ ฌ) - 1์ฐจ์› ๋ ˆ์ด์•„์›ƒ

  • ์ฃผ๋กœ ์ˆ˜ํ‰ ์ •๋ ฌํ•˜๋Š”๋ฐ ์“ฐ์ž„

flex-container
flex-item

  • display - Flex Container์˜ ํ™”๋ฉด ์ถœ๋ ฅ(๋ณด์—ฌ์ง) ํŠน์„ฑ

    • flex: ๋ธ”๋ก ์š”์†Œ์™€ ๊ฐ™์ด Flex Container ์ •์˜
    • inline-flex: ์ธ๋ผ์ธ ์š”์†Œ์™€ ๊ฐ™์ด Flex Container ์ •์˜
  • flex-direction - ์ฃผ ์ถ•(Main-axis)์„ ์„ค์ •

    • ๊ธฐ๋ณธ๊ฐ’: row ํ–‰ ์ถ•(์ขŒ โ‡’ ์šฐ)
    • row-reverse: ํ–‰ ์ถ•(์šฐ โ‡’ ์ขŒ)
    • column: ์—ด ์ถ•(์œ„ โ‡’ ์•„๋ž˜)
    • column-reverse: ์—ด ์ถ•(์•„๋ž˜ โ‡’ ์œ„)
  • flex-wrap - Flex Items ๋ฌถ์Œ(์ค„ ๋ฐ”๊ฟˆ) ์—ฌ๋ถ€
    • ๊ธฐ๋ณธ๊ฐ’: nowrap - ๋ฌถ์Œ(์ค„ ๋ฐ”๊ฟˆ) ์—†์Œ
    • wrap: ์—ฌ๋Ÿฌ ์ค„๋กœ ๋ฌถ์Œ
  • justify-content - ์ฃผ ์ถ•์˜ ์ •๋ ฌ ๋ฐฉ๋ฒ•
    โ‡’ ์ˆ˜ํ‰ ์ •๋ ฌํ•  ๋•Œ ์ž์ฃผ ์“ฐ์ž„

    • ๊ธฐ๋ณธ๊ฐ’: flex-start - Flex Items๋ฅผ ์‹œ์ž‘์ ์œผ๋กœ ์ •๋ ฌ
    • flex-end: Flex Items๋ฅผ ๋์ ์œผ๋กœ ์ •๋ ฌ
    • center: Flex Items๋ฅผ ๊ฐ€์šด๋ฐ ์ •๋ ฌ
    • space-between: ๊ฐ Flex Items ์‚ฌ์ด๋ฅผ ๊ท ๋“ฑํ•˜๊ฒŒ ์ •๋ ฌ
    • space-around: ๊ฐ Flex Items์˜ ์™ธ๋ถ€ ์—ฌ๋ฐฑ์„ ๊ท ๋“ฑํ•˜๊ฒŒ ์ •๋ ฌ
  • align-content - ๊ต์ฐจ ์ถ•์˜ ์—ฌ๋Ÿฌ ์ค„ ์ •๋ ฌ ๋ฐฉ๋ฒ•
    โ†’ ํ•œ ์ค„์ผ ๋•Œ ์ž‘๋™ ์•ˆ๋จ

    • ๊ธฐ๋ณธ๊ฐ’: stretch - Flex Items๋ฅผ ์‹œ์ž‘์ ์œผ๋กœ ์ •๋ ฌ โ†’ container์˜ items์„ ๋Š˜๋ฆผ
    • flex-start - Flex Items๋ฅผ ์‹œ์ž‘์ ์œผ๋กœ ์ •๋ ฌ
    • flex-end - Flex Items๋ฅผ ๋์ ์œผ๋กœ ์ •๋ ฌ
    • center: Flex Items๋ฅผ ๊ฐ€์šด๋ฐ ์ •๋ ฌ
    • space-between: ๊ฐ Flex Items ์‚ฌ์ด๋ฅผ ๊ท ๋“ฑํ•˜๊ฒŒ ์ •๋ ฌ
    • space-around: ๊ฐ Flex Items์˜ ์™ธ๋ถ€ ์—ฌ๋ฐฑ์„ ๊ท ๋“ฑํ•˜๊ฒŒ ์ •๋ ฌ
  • align-items - ๊ต์ฐจ ์ถ•์˜ ํ•œ ์ค„ ์ •๋ ฌ ๋ฐฉ๋ฒ• โ†’ ์ˆ˜์ง ์ •๋ ฌํ•  ๋•Œ ์ฃผ๋กœ ์“ฐ์ž„

    • ๊ธฐ๋ณธ๊ฐ’: stretch - Flex Items๋ฅผ ์‹œ์ž‘์ ์œผ๋กœ ์ •๋ ฌ โ†’ container์˜ items์„ ๋Š˜๋ฆผ
    • flex-start - Flex Items๋ฅผ ์‹œ์ž‘์ ์œผ๋กœ ์ •๋ ฌ
    • flex-end - Flex Items๋ฅผ ๋์ ์œผ๋กœ ์ •๋ ฌ
    • center: Flex Items๋ฅผ ๊ฐ€์šด๋ฐ ์ •๋ ฌ
    • baselind: Flex Items๋ฅผ ๊ฐ ์ค„์˜ ๋ฌธ์ž ๊ธฐ์ค€์„ ์— ์ •๋ ฌ
  • order - Flex Item์˜ ์ˆœ์„œ

    • ๊ธฐ๋ณธ๊ฐ’: 0 - ์ˆœ์„œ ์—†์Œ
    • ์ˆซ์ž: ์ˆซ์ž๊ฐ€ ์ž‘์„ ์ˆ˜๋ก ๋จผ์ €
  • flex-grow - Flex Items์˜ ์ฆ๊ฐ€ ๋„ˆ๋น„ ๋น„์œจ
    โ†’ item์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ์žˆ์–ด๋„ ๋น„์œจ์— ๋”ฐ๋ผ ์กฐ์ •๋จ

    • ๊ธฐ๋ณธ๊ฐ’: 0 - ์ฆ๊ฐ€ ๋น„์œจ ์—†์Œ
    • ์ˆซ์ž: ์ฆ๊ฐ€ ๋น„์œจ
  • flex-shrink - Flex Item์˜ ๊ฐ์†Œ ๋„ˆ๋น„ ๋น„์œจ

    ์ˆซ์ž 0 โ†’๊ฐ์†Œ ๋„ˆ๋น„๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ฒ ๋‹ค, ์•„์ดํ…œ๋“ค์˜ ์‚ฌ์ด์ฆˆ ์•ˆ๋ฐ”๋€œ

    • ๊ธฐ๋ณธ๊ฐ’: 1 - Flex Container ๋„ˆ๋น„์— ๋”ฐ๋ผ ๊ฐ์†Œ ๋น„์œจ ์ ์šฉ โ†’ ๊ทธ๋ž˜์„œ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ž‘์•„์ง€๋ฉด ๊ทธ์— ๋งž์ถฐ item๋„ ์ž‘์•„์ง
    • ์ˆซ์ž: ๊ฐ์†Œ ๋น„์œจ
  • flex-basis - Flex Item์˜ ๊ณต๊ฐ„ ๋ฐฐ๋ถ„ ์ „ ๊ธฐ๋ณธ ๋„ˆ๋น„
    โ†’ 0์œผ๋กœ ์„ค์ •ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Œ(์ฆ๊ฐ€/๊ฐ์†Œ ๋„ˆ๋น„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด)

    • ๊ธฐ๋ณธ๊ฐ’: auto - ์š”์†Œ์˜ content ๋„ˆ๋น„
    • ๋‹จ์œ„: px, em, rem ๋“ฑ

์ „ํ™˜

transition - ์š”์†Œ์˜ ์ „ํ™˜(์‹œ์ž‘๊ณผ ๋) ํšจ๊ณผ๋ฅผ ์ง€์ •ํ•˜๋Š” ๋‹จ์ถ• ์†์„ฑ
โ†’ transition: ์†์„ฑ๋ช… ์ง€์†์‹œ๊ฐ„ ํƒ€์ด๋ฐํ•จ์ˆ˜ ๋Œ€๊ธฐ์‹œ๊ฐ„ ;

  • transition-property - ์ „ํ™˜ ํšจ๊ณผ๋ฅผ ์‚ฌ์šฉํ•  ์†์„ฑ ์ด๋ฆ„์„ ์ง€์ •

    • ๊ธฐ๋ณธ๊ฐ’: all - ๋ชจ๋“  ์†์„ฑ์— ์ ์šฉ
    • ์†์„ฑ์ด๋ฆ„: ์ „ํ™˜ ํšจ๊ณผ๋ฅผ ์‚ฌ์šฉํ•  ์†์„ฑ ์ด๋ฆ„ ๋ช…์‹œ
  • transition-duration - ์ „ํ™˜ ํšจ๊ณผ์˜ ์ง€์†์‹œ๊ฐ„์„ ์ง€์ •

    • ๊ธฐ๋ณธ๊ฐ’: 0s - ์ „ํ™˜ํšจ๊ณผ ์—†์Œ
    • ์‹œ๊ฐ„: ์ง€์†์‹œ๊ฐ„(s)์„ ์ง€์ •
  • transition-timing-function - ์ „ํ™˜ ํšจ๊ณผ์˜ ํƒ€์ด๋ฐ(Easing) ํ•จ์ˆ˜๋ฅผ ์ง€์ •

  • transition-delay - ์ „ํ™˜ ํšจ๊ณผ๊ฐ€ ๋ช‡ ์ดˆ ๋’ค์— ์‹œ์ž‘ํ• ์ง€ ๋Œ€๊ธฐ์‹œ๊ฐ„์„ ์ง€์ •
    โ†’ ์ง€์†์‹œ๊ฐ„ ๋’ค์— ์„ค์ •

    • ๊ธฐ๋ณธ๊ฐ’: 0s - ๋Œ€๊ธฐ์‹œ๊ฐ„ ์—†์Œ
    • ์‹œ๊ฐ„: ๋Œ€๊ธฐ์‹œ๊ฐ„(s)์„ ์ง€์ •

๋ณ€ํ™˜

  • ์š”์†Œ์˜ ๋ณ€ํ™˜ ํšจ๊ณผ

transform: ๋ณ€ํ™˜ํ•จ์ˆ˜1 ๋ณ€ํ™˜ํ•จ์ˆ˜2 ๋ณ€ํ™˜ํ•จ์ˆ˜3 ... ;
transform: ์›๊ทผ๋ฒ• ์ด๋™ ํฌ๊ธฐ ํšŒ์ „ ๊ธฐ์šธ์ž„ ;

  • ์›๊ทผ๋ฒ•์„ ์ ์šฉํ•œ rotate ํ•จ์ˆ˜
  • skew ํ•จ์ˆ˜

  • perspective - ํ•˜์œ„ ์š”์†Œ๋ฅผ ๊ด€์ฐฐํ•˜๋Š” ์›๊ทผ ๊ฑฐ๋ฆฌ๋ฅผ ์ง€์ •
    โ†’ ํ•จ์ˆ˜๊ฐ€ ์•„๋‹ˆ๋ผ ์†์„ฑ!
    โ†’ ํ•จ์ˆ˜๋ณด๋‹ค ์†์„ฑ์ด ๋” ๊ถŒ์žฅ๋จ

  • backface-visibility - 3D ๋ณ€ํ™˜์œผ๋กœ ํšŒ์ „๋œ ์š”์†Œ์˜ ๋’ท๋ฉด ์ˆจ๊น€ ์—ฌ๋ถ€

    • ๊ธฐ๋ณธ๊ฐ’: visible - ๋’ท๋ฉด ๋ณด์ž„
    • hidden: ๋’ท๋ฉด ์ˆจ๊น€

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