๐ Viewport๋ ์น์ฌ์ดํธ์์ ๋ณด์ฌ์ง๋ ์์ญ์ ๋ปํ๋ฉฐ
vh
,vw
๋ ํ์ฌ ์คํ์ค์ธ ์คํฌ๋ฆฐ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ๋ฐํํ๋ ๋จ์์ด๋ค.
์๋ฅผ๋ค์ด ํ์ฌ ์คํฌ๋ฆฐ ๋์ด๊ฐ 1000px์ด๋ผ๋ฉด 1vh=10px, 50vh=500px ์ด ๋๋ค.
- ํน์ง 1)
vh
๋ width์์,vw
๋ height์์ ์ฌ์ฉ ๊ฐ๋ฅํ๋ค.- ํน์ง 2) ์ค์ ๋ณด์ฌ์ง๋ ํ๋ฉด์ ์๋์ ํฌ๊ธฐ๋ฅผ ๋ฐํํ๊ธฐ ๋๋ฌธ์ ์คํฌ๋กค๋ฐ๋ฅผ ํฌํจํ ํฌ๊ธฐ๋ฅผ ๋ฐํํ๋ค. ๋ฐ๋ฉด %๋ ์ ์ฒด ํ๋ฉด์ด ์๋ ๋ถ๋ชจ ์์์ ํฌ๊ธฐ์ ๋น๋กํ๊ธฐ ๋๋ฌธ์ ์คํฌ๋กค๋ฐ์ ์๊ด์ด ์๋ค.
div{ height: 20vh; }
div{ width: 20vw; }
๐
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๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ค.
div{
font-size: 20px;
width: 10em; /*200px*/
}
div{
font-size: 20px;
width: 10rem; /*160px*/
}