๋ฐ์ํ์ผ๋ก ์น๋์์ธ์ ํ๋ค๋ณด๋ฉด ๋์ด์ ๋์ด, ์ฌ์ด์ฆ ๋จ์์ ๋ํ ๊ณ ๋ฏผ์ ํ๊ฒ ๋๋ค. ๋ฐ์ํ์ ๊ณ ๋ คํ์ง ์๊ณ ๋์์ธ์ ํ ๋๋ px๋ฅผ ์ผ์ง๋ง, ์ ์ฐํ ํ์ด์ง๋ฅผ ๋์์ธ ๊ณ ๋ คํ๋ ๊ฒฝ์ฐ em, rem๋จ์๋ฅผ ์ฌ์ฉํด ์ฃผ๋ ๊ฒ์ด ์ข๋ค.
px๋ ๊ฐ์ด ๊ณ ์ ๋์ด์๋ ์ ๋๋จ์
em๊ณผ rem์ ํ๊ฒฝ์ ๋ฐ๋ผ ๋ณํ๋ ์๋๋จ์
์๋ ๋จ์๋ ๊ณ ์ ๋์ง ์๊ณ ์ด๋ค ๊ธฐ์ค์ ๋ฐ๋ผ ์ ๋์ ์ผ๋ก ๋ฐ๋๋ ๊ธธ์ด๋ฅผ ๋ํ๋ธ๋ค.
์) em, rem, %, vw, vh ๋ฑ
์ ๋ ๋จ์๋ ์ด๋ค ์ํฉ์์๋ ํญ์ ๊ณ ์ ๋ ๊ธธ์ด๋ฅผ ๋ํ๋ด๋ ๋จ์. ์น์์ ์ ๋ ๋จ์๋ px์ ์ ์ธํ๊ณ ๋ ์ ์ฐ์ด์ง ์์.
์น์ ๋๋ฐ์ด์ค๋ ์ฌ์ฉ์ ํ๊ฒฝ์ ๋ฐ๋ผ ์ปจํ ์ธ ํฌ๊ธฐ๊ฐ ์ ๋์ ์ผ๋ก ๋ณํจ. ๋ฐ๋ผ์ ์ ๋ ๋จ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝํ ์ธ ์ ์ ์ฐ์ฑ์ด ์ ํ๋จ.
1. CSS ํฌ๊ธฐ์ ๋จ์ ์ข ๋ฅ
| ๊ตฌ๋ถ | ์ค๋ช | ์์ |
| px | ํฌ๊ธฐ์ ๊ธฐ๋ณธ ๋จ์ | width: 100px; |
| % | ๋ถ๋ชจ ์์ ๋ด ์์ ์์๊ฐ ์ฐจ์งํ๋ ๋น์จ | width: 50%; |
| em | em ๋จ์๊ฐ ์ฌ์ฉ๋ ์์์ ํฐํธ ์ฌ์ด์ฆ์ ๋ฐฐ์ | width: 10em; |
| rem | ๋ฌธ์ ๊ธฐ๋ณธ ํฐํธ ์ฌ์ด์ฆ(16px)์ ๋ฐฐ์ | width: 10rem; |
| vw | viewport ๋๋น ์์๊ฐ ์ฐจ์งํ๋ ๋๋น์ ๋น์จ | width: 50vw; |
| vh | viewport ๋๋น ์์๊ฐ ์ฐจ์งํ๋ ๋์ด์ ๋น์จ | height: 20vh; |
2. ๋จ์ ๋น๊ต(์ถ๋ ฅํ๋ฉด ์์ ์ฐธ์กฐ)
[์ฝ๋]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{background: #ccc; margin: 10px 0;}
.px{width: 400px;}
.percent{width: 50%;}
.parent{width: 400px;}
.child{width: 50%; background: green;}
.em{width: 10em;}
.rem{width: 10rem;}
.vw{width: 50vw;}
.vh{height: 20vh;}
</style>
</head>
<body>
<h1> ๋จ์ </h1>
<div class="px">400px</div>
<div class="percent">50%</div>
<div class="vw">50vw</div>
<div class="parent">
<div class="child">50%</div>
</div>
<div class="em">10em</div>
<div class="rem">10rem</div>
<div class="vh">20vh</div>
</body>
</html>
[๊ฒฐ๊ณผ ํ๋ฉด]
2-1. px (ํฝ์ )
์์์ ๋๋น, ๋์ด, ๊ธ์์ ํฌ๊ธฐ, ํ ๋๋ฆฌ์ ๋๊ป, ์ฌ๋ฐฑ ์ง์ ํ ๋ ๊ธฐ๋ณธ ๋จ์
2-2. % (ํผ์ผํธ)
๋๋น์ ๋์ด์ ๊ฒฝ์ฐ ๋ถ๋ชจ ์์์ ๋๋น ๋ฐ ๋์ด์์ ์์ ์์๊ฐ ์ฐจ์งํ๋ ๊ณต๊ฐ์ ๋น์จ. ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ํ์ธํ๋ฉด ํด๋์ค๋ช Percent ์์์ ๋๋น๊ฐ ๋ถ๋ชจ ์์์ธ Body ์์์ ๋๋น ๋๋น 50%์ธ ์ ๋ฐ์ ๋๋น๋ฅผ ์ฐจ์งํ๊ณ ์๋ค. ๋ ์์ ๊ฒฐ๊ณผ ์ฐฝ์์ ํด๋์ค๋ช Child๋ ๋ถ๋ชจ ์์์ธ Body ์์์ ๋๋น 400px์ 50%์ธ 200px๋ก ํํ๋ ๊ฒ(์ด๋ก ์ ๋ฐ)์ ํ์ธํ ์ ์๋ค.
2-3. vw
Viewport ๋๋น ์์์ ๋๋น ๋น์จ์ ์ง์ ํ๋ค. %์ ๋ค๋ฅด๊ฒ Viewport๋ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ์ ์ฒด ์์ญ์ ๋งํ๋ค. ํนํ ์คํฌ๋กค๋ฐ๊ฐ ์๊ธฐ๋ ๊ฒฝ์ฐ ์คํฌ๋กค๋ฐ ์์ญ๊น์ง๋ Viewport์ ํฌํจ๋๋ค.
2-4. em
em์ ํด๋น ๋จ์๊ฐ ์ฌ์ฉ๋๊ณ ์๋ ์์์ font-size๋ฅผ ๊ธฐ์ค์ผ๋ก px๋ก ๋ฐ๋์ด ํ๋ฉด์ ํ์ํด ์ค๋ค. ๊ฐ์ ์๋ฆฌ๋จผํธ์ ์ค์ ๋ ํฐํธ ํฌ๊ธฐ ๊ฐ์ด ์์ ๊ฒฝ์ฐ์๋ ์์ ์์์ ํฐํธ ์ฌ์ด์ฆ๊ฐ ๊ธฐ์ค์ด ๋๋ค. ์ฆ, ํ ๋ง๋๋ก
em ๋จ์๋ em ๋จ์๊ฐ ์ฌ์ฉ๋ ์์์ ํฐํธ ์ฌ์ด์ฆ์ ๋ฐฐ์.
์ฝ๋์์ ํ์ฌ ํด๋์ค๋ช
em์ ๋๋น๋ ํด๋น ์์์ ํฐํธ ์ฌ์ด์ฆ๋ฅผ ์ง์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ฌธ์์ ๊ธฐ๋ณธ๊ฐ 16px์ 10๋ฐฐ์์ธ 160px์ ๋๋น๋ฅผ ๋ณด์ธ๋ค. ๋ง์ฝ <Style> ํ๊ทธ์ Body์ ํฐํธ ์ฌ์ด์ฆ๋ฅผ 12xp๋ก ๋ณ๊ฒฝํ๋ฉด?
๊ฐ๋ฐ์๋๊ตฌ(F12) ๋๋ฌ์ Element ํญ์ผ๋ก ๊ฐ ํ em ์์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ค์ ํ์ธํด ๋ณด๋ฉด 120px๋ก em ์์์ํฐํธ ์ฌ์ด์ฆ๋๋ถ๋ชจ ์์์ธ Body์์ ์ง์ ํ 12px์ 10๋ฐฐ์์ธ 120px๋ก ๋ํ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค. ์ด๋ ๋ฏ em๋จ์๋ ๊ธฐ์ค์ด ๋๋ ํฐํธ ์ฌ์ด์ฆ๋ฅผ ๋ณ๊ฒฝํจ์ผ๋ก์จ ์์์ ๋๋น ๋๋ ํฐํธ ์ฌ์ด์ฆ๋ฅผ ์ ์ฒด์ ์ผ๋ก ์์ ํ๊ธฐ ์ฉ์ดํ๋ค.
๐ก ์ฌ์ฉ๋ฒ
<style>
html {
font-size: 16px;
}
div {
font-size: 20px;
width: 10em; /* 200px */
}
</style>
๐ก ๋ง์ฝ ํด๋์ค๊ฐ ์ค์ฒฉ๋ ๊ฒฝ์ฐ๋ผ๋ฉด?
<style>
.container {
font-size: 14px;
}
.container.title {
font-size: 2em; // 28px
}
.container.subtitle {
font-size: 1.5em; // 21px
}
.container.subtitle.leading {
font-size: 0.5em;
}
</style>
<body>
<div class="container">
<div class="title"></div>
<div class="subtitle"></div>
</div>
</body>
leading์ ๊ธ๊ผด์ ํฌ๊ธฐ๋ container์์ subtitle์์ ์๊ธฐ ๋๋ฌธ์, 14x1.5x0.5 = 10.5px์ด ๋๋ค.
2-5. rem
rem์์ r์ root, ์ฆ ์ต์์ ์๋ฆฌ๋จผํธ์์ ์ง์ ๋ font-size์ ๊ฐ์ ๊ธฐ์ค์ผ๋ก ๋ณํ๋๋ค. HTML์์ ์ต์์ ์์๋ htmlํ๊ทธ์ด๋ค. ๋ฐ๋ผ์ rem์๊ฒฝ์ฐ, html ์์์ font-size ์์ฑ๊ฐ์ด ๊ธฐ์ค์ด ๋๋ค. ๋ง์ฝ ๋ณ๋์ font-size๋ฅผ ์ค์ ํ์ง ์์์ ๊ฒฝ์ฐ์๋ ๊ฐ ๋ธ๋ผ์ฐ์ ์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ค์ ๋ ๊ฐ์ ์์ ๋ฐ๋๋ค. (์ผ๋ฐ์ ์ผ๋ก 16px)
๋ง์ฝ ์๋์ฒ๋ผ ๋ฃจํธ๋ฅผ ์ ์ธํ๊ณ ํฐํธ ์ฌ์ด์ฆ๋ฅผ ์ค์ ํด์ฃผ๋ฉด ๋ฃจํธ์ ํฐํธ์ฌ์ด์ฆ ๊ฐ์ด ๊ธฐ์ค์ด ๋์ด ์๋ ์ฝ๋์ ๊ฒฝ์ฐ ๊ฒฐ๊ณผ๊ฐ์ด 180px์ด ๋๋ค.
2-6. vh
Viewport ๋์ด ๋๋น ์์์ ๋์ด ๋น์จ์ ์ง์ ํ๋ค. html ํ์ผ์ ๋ธ๋ผ์ฐ์ ํ๋ฉด์์ ํ์ธํ๋ฉด ํด๋์ค๋ช vh๋ ์์ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์ธ๋ก ์ ์ฒด ๋์ด ๋๋น์ 20% ๋์ด๋ฅผ ์ฐจ์งํ๋ ๊ฒ์ ํ์ธ ๊ฐ๋ฅ
3. ๊ฒฐ๋ก
em์ ์ฌ์ฉํด์ผ๋ง ํ๋ ํ๋นํ ์ด์ ๊ฐ ์๋ ๊ฒฝ์ฐ๋ผ๋ฉด ๊ฐ๊ธ์ rem์ ์ฐ์ ์ ์ผ๋ก ์ฐ๋ ๊ฒ์ด ๊ถ๊ณ ๋จ.
์๋ํ๋ฉด em์ ๊ฒฝ์ฐ ์์์ ๋ณด์๋ฏ์ด ์ค์ ๋ช px๋ก ๋ณํ๋ ์ง์ ์ํฅ์ ์ฃผ๋ ๋ณ์๊ฐ ๋ง์์ง๊ธฐ ๋๋ฌธ
=> em์ ์ฌ์ฉํด์ ์คํ์ผ๋ ์์์ ๊ฒฝ์ฐ ์ฌ์ฌ์ฉ์ด ์ด๋ ต๊ณ ์ ์ง๋ณด์๊ฐ ํ๋ ๊ฒฝํฅ
ํ์ง๋ง rem๊ณผ em๋ ์ฉ๋์ ๋ง๊ฒ ์ ์ ํ ํผ์ฉํด์ ์ฌ์ฉํด ์ฃผ๋ ๊ฒ์ด ์ข๋ค.
์๋ฅผ ๋ค์ด ์ด๋ ํ์ด์ง์์๋ ๊ณ ์ ๋ ์ฌ์ด์ฆ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค๋ฉด rem,
๋ถ๋ชจ ์์์ ๋ฐ๋ผ ์ ๋์ ์ผ๋ก ๋ณํด์ผ ํ๋ ๊ณณ์๋ em์ ์ฌ์ฉํ๋ฉด ๋๋ค.
๊ทธ๋์ ๋ณดํต font-size์๋ rem์ ์ฌ์ฉํ๊ณ padding์ด๋ margin๊ฐ์ด ํ๋ฉด์ ๋ฐ๋ผ ์ ์ฐํ๊ฒ ๋ณํ๋ ํฌ๊ธฐ๋ em์ ์ฌ์ฉํ๋ค.
