-
[100DaysOfCode] 21๊ฐFront-end/100DaysOfCode 2022. 8. 13. 23:08
๐ก ์ด๋ฒ ๋ชจ๋ ๋ชฉํ: ๋ฐ์ํ ์น์ฌ์ดํธ ๋ง๋ค๊ธฐ
๋จผ์ ๋ฐ์ํ ์น์ฌ์ดํธ๋ก ๋ง๋ค์ด๋ณด๊ธฐ ์ ํฉํ ์น์ฌ์ดํธ๋ฅผ ํผ๋ธ๋ฆฌ์ฑํ๋ค! (ํ๋ฒ๊ฑฐ ๋จน๊ณ ์ถ๋ค)
em? rem? %? ์ด๋ค ๊ฒ์ ์ฌ์ฉํด์ผ ํ ๊น?
ํ์์ ์ฌ์ฉํ๋ ์ต์ํ px ์ธ์ ๋ค๋ฅธ ๋จ์๋ค์ ์๋ก ๋น๊ตํด๋ณด์
px % em rem ์ดํดํ๊ธฐ ์ฝ๊ณ , ์ ๋์ ์ธ ๊ฐ์ด๋ค ๋ถ๋ชจ ์์์ ์๋์ ์ด๋ค ํฐํธ ์ฌ์ด์ฆ์ ์๋์ ์ด๋ค root element(HTML, ๋ธ๋ผ์ฐ์ )์ ํฐํธ ์ฌ์ด์ฆ์ ์๋์ ์ด๋ค ์ฌ์ฉ์ ํ๊ฒฝ์ ๊ตฌ์ ๋ฅผ ๋ฐ์ง ์๊ณ , ์ฌ์ด์ฆ๊ฐ ๋ฐ๋์ง ์๋๋ค ํญํฌ์ฒ๋ผ ๋ถ๋ชจ- ์์ ๊ฐ์ ์ฐ์์ ์ธ ์์ฑ ๋๋ฌธ์ ๋ค๋ฃจ๊ธฐ๊ฐ ์ด๋ ต๋ค ํญํฌ์ฒ๋ผ ๋ถ๋ชจ- ์์ ๊ฐ์ ์ฐ์์ ์ธ ์์ฑ ๋๋ฌธ์ ๋ค๋ฃจ๊ธฐ๊ฐ ์ด๋ ต๋ค ๋ง์ฝ ์ ์ฉ ๊ฐ๋ฅํ ๊ฒฝ์ฐ ์ ํธ๋๋ค
๊ตฌ๊ธ ํฌ๋กฌ - ํ๊ฒฝ์ค์ ์์ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ณธ ํฐํธ ์ฌ์ด์ฆ๊ฐ 16์์ ํ์ธํ ์ ์๋ค
๋ก๊ณ ์ ํฐํธ ์ฌ์ด์ฆ๋ฅผ 1.5rem์ผ๋ก ์ค์ ํ ๊ฒฝ์ฐ, 24px(16 * 1.5) ๋ก ๋ณด์ธ๋ค
'Front-end > 100DaysOfCode' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[100DaysOfCode] 23๊ฐ - 24๊ฐ (0) 2022.08.17 [100DaysOfCode] 22๊ฐ (0) 2022.08.13 [100DaysOfCode] 20๊ฐ (0) 2022.08.05 [100DaysOfCode] 19๊ฐ (0) 2022.08.01 [100DaysOfCode] 18๊ฐ (0) 2022.08.01