๐ŸŒˆ CSS value: Unit (CSS ๋‹จ์œ„)

์ •์€๊ฒฝยท2020๋…„ 5์›” 25์ผ
0

๐Ÿ‘ธ Front-End Queen

๋ชฉ๋ก ๋ณด๊ธฐ
4/278

๋””ํดํŠธ font-size๋Š” 3

CSS Unit

  • CSS์—๋Š” ๊ธธ์ด๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ์—ฌ๋Ÿฌ ๋‹ค์–‘ํ•œ ๋‹จ์œ„๊ฐ€ ์กด์žฌํ•จ
  • width, margin, padding, font-size ๋“ฑ์˜ ๊ธธ์ด ๊ฐ’์„ ๊ฐ€์ง€๋Š” ์†์„ฑ๋“ค์ด ์žˆ์Œ
  • ๊ธธ์ด์˜ ๋‹จ์œ„์—๋Š” 10px, 3em ๋“ฑ์ด ์žˆ์Œ
  • ๊ธธ์ด ๋‹จ์œ„ ํƒ€์ž…์—๋Š” ํฌ๊ฒŒ ์ ˆ๋Œ€/์ƒ๋Œ€๊ฐ€ ์žˆ์Œ
    • ์ ˆ๋Œ€ ๊ธธ์ด (absolute lengths)
      • cm, mm, in, px, pt, pc
    • ์ƒ๋Œ€ ๊ธธ์ด (relative lengths)
      • em, ex, ch, rem, vw, vh, vmin, vmax, %

px (ํ”ฝ์…€)

  • ํ•ด์ƒ๋„์— ๋”ฐ๋ผ์„œ 1px์ด๋ผ๋„ ์„œ๋กœ ์ฐจ์ด๊ฐ€ ๋‚  ์ˆ˜ ์žˆ์Œ

%

  • ๋ถ€๋ชจ ์š”์†Œ์˜ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ

em

  • ์ž๊ธฐ ์ž์‹ ์˜ font-size์— ์˜ํ–ฅ์„ ๋ฐ›์Œ

rem

  • root ๊ธฐ์ค€(htmlํƒœ๊ทธ)์˜ font-size์— ์˜ํ–ฅ์„ ๋ฐ›์Œ
  • ๋งŒ์•ฝ root์— font-size๋ฅผ ์ง€์ •์•ˆํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ?



    html์˜ ๋””ํดํŠธ font-size๋Š” 3px์ด ์•„๋‹Œ๊ฐ€๋ณด๋‹น
    ํ™•์‹คํžˆ ํ•˜๋ ค๋ฉด html ํƒœ๊ทธ์— font-size๋Š” px๋กœ ๋™‡ ๊ณ ์ •ํ•ด์•ผ๊ฒ ๋‹ค!

์‹ค์Šต ๊ฒฐ๊ณผ


https://codepen.io/eunkyoungjung/pen/abNPVeW

Reference

profile
#์˜์‹์˜ํ๋ฆ„ #์ˆœ๊ฐ„์ˆœ๊ฐ„ #์ƒ๊ฐ์˜์Šค๋ƒ…์ƒท

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