โ em ๋จ์
- ๊ธฐ์ค: em ๋จ์๋ ์์์ ์ง์ ์ ์ธ ๋ถ๋ชจ ์์ ๋๋ ์์ ์ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ํฉ๋๋ค.
- ์๋์ ํฌ๊ธฐ: ๋ถ๋ชจ ์์์ ๊ธ๊ผด ํฌ๊ธฐ์ ์๋์ ์ด๋ฏ๋ก, ์ค์ฒฉ๋ ์์๋ค์ ํฌ๊ธฐ ๊ณ์ฐ์ด ๋ณต์กํด์ง ์ ์์ต๋๋ค.
- ์ฌ์ฉ ์: ํน์ ์์์ ํฌ๊ธฐ๋ฅผ ๊ทธ ์์๊ฐ ํฌํจ๋ ์ปจํ ์คํธ ๋ด์์ ์๋์ ์ผ๋ก ์ค์ ํ ๋ ์ ์ฉํฉ๋๋ค.
โ rem ๋จ์
- ๊ธฐ์ค: rem ๋จ์๋ ๋ฃจํธ ์์(html ์์)์ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ํฉ๋๋ค.
- ์ผ๊ด์ฑ: ์ ์ฒด ๋ฌธ์์์ ๋์ผํ ๊ธฐ์ค์ ์ฌ์ฉํ๋ฏ๋ก, ์ผ๊ด๋ ํฌ๊ธฐ ์กฐ์ ์ ํ ์ ์์ต๋๋ค.
- ์ฌ์ฉ ์: ์ ์ฒด ๋ฌธ์์์ ์ผ๊ด๋ ์๋์ ํฌ๊ธฐ๋ฅผ ์ค์ ํ ๋ ์ ์ฉํฉ๋๋ค.
์ฌ์ฉ ์
`em` ์ฌ์ฉ ์
Container element with font-size: 1.5em
Nested element with font-size: 1.2em
// css
<style>
body {
font-size: 16px;
}
.container {
font-size: 1.5em; /* 24px */
}
.nested {
font-size: 1.2em; /* 28.8px (24px * 1.2) */
}
</style>
// html
<body>
<div class="container">
Container element with font-size: 1.5em
<div class="nested">
Nested element with font-size: 1.2em
</div>
</div>
</body>
`rem` ์ฌ์ฉ ์
Container element with font-size: 1.5rem
Nested element with font-size: 1.2rem
// css
<style>
html {
font-size: 16px;
}
.container {
font-size: 1.5rem; /* 24px */
}
.nested {
font-size: 1.2rem; /* 19.2px (16px * 1.2) */
}
</style>
//html
<body>
<div class="container">
Container element with font-size: 1.5rem
<div class="nested">
Nested element with font-size: 1.2rem
</div>
</div>
</body>
โ๏ธ em ์ฌ์ฉ ์๊ธฐ
- ๋ด๋ถ ์์์ ํฌ๊ธฐ ์กฐ์
- em์ ๋ถ๋ชจ ์์์ ๊ธ๊ผด ํฌ๊ธฐ์ ์๋์ ์ด๋ฏ๋ก, ์ปจํ ์ด๋ ์์ ๋ด์ ์์ ์์๋ค์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ ๋ ์ ์ฉํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ฒํผ์ด๋ ๋ฉ๋ด ํญ๋ชฉ ๊ฐ์ ์ปดํฌ๋ํธ์ ๋ด๋ถ ์์ ํฌ๊ธฐ๋ฅผ ๋ถ๋ชจ์ ํฌ๊ธฐ์ ๋ง์ถ๊ณ ์ถ์ ๋ ์ฌ์ฉํฉ๋๋ค.
- ์๋์ ํฌ๊ธฐ ์ ์ง
- ์์๊ฐ ๋ค๋ฅธ ์์์ ์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ๊ฐ์ ธ์ผ ํ ๋ ์ ์ฉํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ฌ๋ฌ ๋ ๋ฒจ์ ์ค์ฒฉ๋ ๋ชฉ๋ก์ด๋ ๋ด๋น๊ฒ์ด์ ๋ฉ๋ด์์ ๊ฐ ๋ ๋ฒจ์ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ์๋์ ์ผ๋ก ์กฐ์ ํ ๋ ์ฌ์ฉํฉ๋๋ค.
- ๋ชจ๋ํ๋ ์ปดํฌ๋ํธ
- ๋ ๋ฆฝ์ ์ผ๋ก ์ค๊ณ๋ ๋ชจ๋ํ๋ ์ปดํฌ๋ํธ์์ em์ ์ฌ์ฉํ๋ฉด, ํด๋น ์ปดํฌ๋ํธ๊ฐ ๋ค๋ฅธ ํฌ๊ธฐ์ ์ปจํ ์คํธ์์ ์ฌ์ฌ์ฉ๋ ๋ ์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ์ ์งํ ์ ์์ต๋๋ค.
โ๏ธ rem ์ฌ์ฉ ์๊ธฐ
- ์ผ๊ด๋ ์ ์ญ ํฌ๊ธฐ
- rem์ ๋ฃจํธ ์์์ ๊ธ๊ผด ํฌ๊ธฐ์ ์๋์ ์ด๋ฏ๋ก, ์ฌ์ดํธ ์ ์ฒด์์ ์ผ๊ด๋ ํฌ๊ธฐ๋ฅผ ์ ์งํ๊ณ ์ ํ ๋ ์ ์ฉํฉ๋๋ค. ๊ธฐ๋ณธ ๊ธ๊ผด ํฌ๊ธฐ, ๊ธฐ๋ณธ ํจ๋ฉ ๋ฐ ๋ง์ง ๋ฑ์ ์ค์ ํ ๋ ์ฌ์ฉํฉ๋๋ค.
- ๋ฐ์ํ ๋์์ธ
- ๋ฐ์ํ ์น ๋์์ธ์์ ๋ทฐํฌํธ ํฌ๊ธฐ์ ๋ฐ๋ผ ๊ธ๊ผด ํฌ๊ธฐ๋ ๋ ์ด์์ ์์์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ ๋ ์ ์ฉํฉ๋๋ค. rem ๋จ์๋ฅผ ์ฌ์ฉํ๋ฉด, ๋ทฐํฌํธ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ฃจํธ ๊ธ๊ผด ํฌ๊ธฐ๋ง ์กฐ์ ํ๋ฉด ์ ์ฒด ๋ ์ด์์์ด ์ ์ ํ๊ฒ ๋ฐ์ํฉ๋๋ค.
- ๊ธ๋ก๋ฒ ์คํ์ผ ์ ์
- ์ฌ์ดํธ ์ ์ญ์์ ์ผ๊ด๋ ์คํ์ผ์ ์ ์ฉํ๊ณ ์ ํ ๋ ์ฌ์ฉํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ ์ฒด ๋ฌธ์์ ๊ธฐ๋ณธ ๊ธ๊ผด ํฌ๊ธฐ, ์ ๋ชฉ์ ํฌ๊ธฐ ๋ฑ์ ์ ์ํ ๋ ์ ์ฉํฉ๋๋ค.
๐๏ธ ๊ฒฐ๋ก
em
- ๋ถ๋ชจ ์์์ ๊ธ๊ผด ํฌ๊ธฐ์ ์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ์ค์ ํ ๋ ์ฌ์ฉํฉ๋๋ค.
- ์ปดํฌ๋ํธ ๋ด๋ถ ์์์ ํฌ๊ธฐ ์กฐ์ ์ด ํ์ํ ๋ ์ ์ฉํฉ๋๋ค.
- ๋ชจ๋ํ๋ ์ปดํฌ๋ํธ์์ ์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ์ ์งํ๊ณ ์ ํ ๋ ์ฌ์ฉํฉ๋๋ค.
rem
- ๋ฃจํธ ์์์ ๊ธ๊ผด ํฌ๊ธฐ์ ์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ์ค์ ํ ๋ ์ฌ์ฉํฉ๋๋ค.
- ์ ์ญ ์คํ์ผ๊ณผ ์ผ๊ด๋ ๋ฐ์ํ ๋์์ธ์ ๊ตฌํํ ๋ ์ ์ฉํฉ๋๋ค.
- ์ ์ฒด ์ฌ์ดํธ์ ๊ธฐ๋ณธ ํฌ๊ธฐ๋ฅผ ์ ์ํ๊ณ ์ ํ ๋ ์ฌ์ฉํฉ๋๋ค.
'๐ฉ๐ปโ๐ป ํ๋ก๊ทธ๋๋ฐ ์ธ์ด > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Tailwind] - Tailwind CSS์ ์ ํธ๋ฆฌํฐ ํด๋์ค ์ดํดํ๊ธฐ: ๋๊ดํธ์ ๋น๋๊ดํธ์ ์ฐจ์ด (0) | 2024.09.27 |
|---|---|
| [Tailwind] ์ฝ๊ณ ๋น ๋ฅธ Tailwind CSS ์ฒซ ์ฌ์ฉ๊ธฐ (0) | 2024.09.27 |
| [CSS] - Sass(SCSS) (0) | 2024.08.19 |
| [CSS] grid ๊ทธ๋ฆฌ๋ ์ฌ์ฉ๋ฒ (0) | 2024.06.10 |
