[ CSS ] - vh, vw, em, rem

yricogยท2022๋…„ 5์›” 14์ผ
0

Today I Learn _ WEB's study

๋ชฉ๋ก ๋ณด๊ธฐ
2/7
post-thumbnail
post-custom-banner

vh / vw

๐Ÿ“Œ Viewport๋Š” ์›น์‚ฌ์ดํŠธ์—์„œ ๋ณด์—ฌ์ง€๋Š” ์˜์—ญ์„ ๋œปํ•˜๋ฉฐ vh, vw๋Š” ํ˜„์žฌ ์‹คํ–‰์ค‘์ธ ์Šคํฌ๋ฆฐ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ƒ๋Œ€์ ์ธ ํฌ๊ธฐ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋‹จ์œ„์ด๋‹ค.
์˜ˆ๋ฅผ๋“ค์–ด ํ˜„์žฌ ์Šคํฌ๋ฆฐ ๋†’์ด๊ฐ€ 1000px์ด๋ผ๋ฉด 1vh=10px, 50vh=500px ์ด ๋œ๋‹ค.

  • ํŠน์ง• 1) vh ๋Š” width์—์„œ, vw๋Š” height์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ํŠน์ง• 2) ์‹ค์ œ ๋ณด์—ฌ์ง€๋Š” ํ™”๋ฉด์˜ ์ƒ๋Œ€์  ํฌ๊ธฐ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์Šคํฌ๋กค๋ฐ”๋ฅผ ํฌํ•จํ•œ ํฌ๊ธฐ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ๋ฐ˜๋ฉด %๋Š” ์ „์ฒด ํ™”๋ฉด์ด ์•„๋‹Œ ๋ถ€๋ชจ ์š”์†Œ์˜ ํฌ๊ธฐ์— ๋น„๋ก€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์Šคํฌ๋กค๋ฐ”์™€ ์ƒ๊ด€์ด ์—†๋‹ค.

vh (Viewport height)

  • 100vh = ์ „์ฒดํ™”๋ฉด ๊ธฐ์ค€
  • 1vh = Viewport ๋†’์ด์˜ 1%
div{ height: 20vh; }

vw (Viewport width)

  • 100vw = ์ „์ฒดํ™”๋ฉด ๊ธฐ์ค€
  • 1vw = Viewport ๋„ˆ๋น„์˜ 1%
div{ width: 20vw; }

em / rem

๐Ÿ“Œ em, rem ์€ ๋ชจ๋‘ font-size๊ฐ’์— ๋น„๋ก€ํ•œ ์ƒ๋Œ€ ๋‹จ์œ„์ด๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด font-size๊ฐ€ 16px์ผ ๋•Œ, 1em=16 x 1=16px, 2em=16 x 2=32px ์ด๋‹ค. ์—ฌ๊ธฐ์„œ ๊ธฐ์ค€์ด ๋˜๋Š” font-size๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด ๊ทธ์— ๋”ฐ๋ฅธ ์ƒ๋Œ€๋‹จ์œ„ ๊ฐ’๋“ค๋„ ํ•จ๊ป˜ ๋ณ€๊ฒฝ๋œ๋‹ค.

em, rem ์˜ ์ฐจ์ด์ ์€ ์–ด๋–ค font-size๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜๋Š”๊ฐ€์— ๋”ฐ๋ผ ๋ฐœ์ƒํ•œ๋‹ค.
em์€ ํ•ด๋‹น ์š”์†Œ์˜ font-size๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜๊ณ , rem์˜ r์€ root๋ฅผ ๋œปํ•˜๋ฏ€๋กœ ์ตœ์ƒ์œ„ ์š”์†Œ(html)์˜ font-size๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•œ๋‹ค.

  • em

div{ 
	font-size: 20px;
	width: 10em; /*200px*/
}
  • rem

    -html์˜ font-size๊ฐ€ 16px์ผ ๋•Œ
div{ 
	font-size: 20px;
	width: 10rem; /*160px*/
}
profile
์—ฌํ–‰ ์ข‹์•„ํ•ด์š”๐Ÿชด
post-custom-banner

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