1. ํฐํธ ํฌ๊ธฐ์์์ em, rem, %
1) px
- ์ฅ์ : Easy to understand & translateable
- ๋จ์ : Limited user focus & not scalable
2) em vs. rem
(1) em (element)
- Size is relative to font-size
- ๋ค๋ฅธ ์์์ ํฐํธ ํฌ๊ธฐ์ ์ฐ๊ด๋ ํฌ๊ธฐ - ํฐํธ ํฌ๊ธฐ๋ ๋ถ๋ชจ ์์์ ํฌ๊ธฐ์ ๋ฌ๋ ค์๋ค.
- ๋จ์
- %์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ถ๋ชจ ์์์์ ์์๋ฐ๋ ํฌ๊ธฐ์ ๋ฐ๋ผ ์ฌ์ด์ฆ๊ฐ ๋ฌ๋ผ์ง๊ธฐ ๋๋ฌธ์ ๊ด๋ฆฌ๊ฐ ์ด๋ ต๋ค.
(2) rem (root em)
- Size is relative to root element’s font size
- ํ์ฌ ์์์ ํฐํธ ํฌ๊ธฐ์ ์ต์์ ์์์ ํฐํธ ํฌ๊ธฐ์ ์ฐ๊ฒฐ๋์ด ์๋ค.
- HTML์์ ์ต์์ ์์: <html>
- ์ต์์ ์์์ ํฐํธ ํฌ๊ธฐ๋ฅผ ๋ฐ๋ก ์ถ๊ฐํ์ง ์์๋ค๋ฉด ํฌ๊ธฐ๋ ํญ์ ์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ์ ์ค์ ๋์ด ์๋๋๋ก ์ ํด์ง๋ค.
- ๋ธ๋ผ์ฐ์ ์ค์ - Font size
3) %
- Relative to parent element size
- ํ์ฌ ์์
ํ๊ณ ์๋ ์์์ ๋ถ๋ชจ ์์์ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ์ฐธ์กฐํ์ฌ ์ ์ฉ
- ๋จ์
- ๋ถ๋ชจ ์์์ ํฌ๊ธฐ์ ๋ฐ๋ฅด๋ ์ข
์์ ์ธ ์ฑ์ง์ ๊ฐ๊ธฐ ๋๋ฌธ์ ์ ๋์ด ๋ง์์ง๊ณ ๋ณต์กํ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง ์น ํ์ด์ง์์๋ ๊ด๋ฆฌ๊ฐ ์ด๋ ค์์ง ์ ๋ฐ์ ์๋ค. (Hard to manage due to cascading nature)
4) ์ ๋ฆฌ
- em๊ณผ %๋ ํฐํธ ํฌ๊ธฐ์์๋ ๋น์ทํ ๊ฒฐ๊ณผ๋ฅผ ๋์ถํ๋ค.
- rem ๋จ์๋ก๋ ํฐํธ ํฌ๊ธฐ๋ฅผ ํญ์ ์ต์์ ์์์ ๊ธฐ๋ฐํ์ฌ ๊ณ์ฐํ ์ ์๋ค.
- ์ต์์ ์์์ ๋ฐ๋ก ์ง์ ๋ ํฐํธ ํฌ๊ธฐ๊ฐ ์๋ค๋ฉด html ์๋ฆฌ๋ฉํธ์ ์ค์ ํด์ค ์ ์์ง๋ง ์ด ๋ฐฉ๋ฒ์ ์ถ์ฒํ์ง ์์
- html ์์์ ์ ์ฉ๋ ์ค์ ์ด ์์ผ๋ฉด rem ๋จ์๋ก ํฐํธ ํฌ๊ธฐ๋ฅผ ์ ์ดํ ์ ์์
- ํ์ง๋ง rem์ด ์ ๋ต์ธ ๊ฒ๋ง์ ์๋๋ค. ๋จ์ ์ค์ ์ ๊ฐ์ธ ์ ํธ๋ ํ๋ก์ ํธ์ ์๊ตฌ์ฌํญ์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ์ ์ฉ๋ ์ ์๋ค.
2. ํฐํธ๊ฐ ์๋ ๋ค๋ฅธ ์์์์์ em, rem, %
- % ๋จ์ ์ฌ์ฉ ์ ๋ถ๋ชจ ์์์ ๋๋น๋ฅผ ์ฐธ์กฐ
- em๊ณผ rem์ ์ฌ์ฉํ๋ฉด ์ด๋ค ํ์ ์์์ ์ ์ฉ๋๋๋ผ๋ ์ค์ ๋ก ์ ์ฉ๋๋ ํฐํธ ํฌ๊ธฐ ์์ฑ์ ์ฐธ์กฐ
- ์์ - padding
- em ๋จ์๋ ํด๋น ์์ ์์ฒด์ ํฐํธ ํฌ๊ธฐ๋ฅผ ์ฐธ์กฐ
- rem ๋จ์๋ ์ต์์ ์์์ ํฐํธ ํฌ๊ธฐ๋ฅผ ์ฐธ์กฐ
em ์์
.food-item-content {
font-size: 200%;
/* padding: 16px; */
/* padding: 10%; */
padding: 0.1em;
text-align: center;
}
์๋ฅผ ๋ค์ด ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ํฐํธ ํฌ๊ธฐ๊ฐ 22px๋ผ๋ฉด,
food-item-content ํด๋์ค๋ฅผ ๊ฐ์ง div์์ ํฐํธ ํฌ๊ธฐ๋ font-size: 200%์ผ๋ก ์ธํด 44px๊ฐ ๋๋ฏ๋ก,
<div class="food-item-content">์ padding๊ฐ์ 44px์ 0.1๋ฐฐ์ธ 4.4px์ด ๋๋ค.
rem ์์
.food-item-content {
font-size: 200%;
/* padding: 16px; */
/* padding: 10%; */
padding: 0.1rem;
text-align: center;
}
์๋ฅผ ๋ค์ด ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ํฐํธ ํฌ๊ธฐ๊ฐ 22px๋ผ๋ฉด,
html ์์์ ์๋ฌด๋ฐ font-size ์ค์ ์ด ์๋ ๊ฒฝ์ฐ ์ต์์ html ์์์ ํฐํธ ํฌ๊ธฐ๋ 22px์ด๋ฏ๋ก
<div class="food-item-content">์ padding๊ฐ์ 22px์ 0.1๋ฐฐ์ธ 2.2px์ด ๋๋ค.
