๐์ ๋๋จ์
pt(google docs/text editor ๋ฑ์์ ๋ง์ด ์ฐ์ด๋ ๋จ์), cm,mm, pc, in(์ ์์จ์ ๋์ด๊ฐ๋ณด์)
1. px - ๋์คํ๋ ์ด ํด์๋์ ๋ฐ๋ผ ํ๋ฉด์์ ๋ณด์ด๋ ํฌ๊ธฐ ๋ณ๋
ํ์์ px์ด ์ง๊ด์ ์ด๊ณ ํธํด์ ์ฃผ๋ก ์ฌ์ฉํ๋ ๋จ์์๋๋ฐ ๋ฐ์ํ ์น์ผ๋ก ๋ง๋ค๊ธฐ ์ํด์ %์em,rem์ ์ต์ํด์ ธ์ผ๊ฒ ๋ค๋ ์๊ฐ์ ๋ง์ด ํ๋ค. - ์ฌ์ด์ฆ๊ฐ ํ์คํ๊ฒ ์ ํด์ ธ ์๋ ์์์๋ง ์ง์ด๋ฃ๊ธฐ
๐์๋๋จ์
1. % - ๋ถ๋ชจ ์์์ ๋นํด ์ผ๋ง๋ ์ปค์ผํ๋์ง ๋น์จ๋ก ๋ช ์ ๊ธฐ์ค์ ํฌ๊ธฐ๋ฅผ 100%๋ก ์ก๋๋ค. (์ ์๋ ์ด๋ ต๊ฒ ๋์ด ์์ง๋ง ์ฐ๋ฆฌ๊ฐ ์๊ณ ์๋ ๊ฐ์ฅ ํํ ๋จ์์ฌ์ ์ฝ๊ฒ ์๊ฐํ๋ฉด ๋๋ค. )
๊ณ์ฐ๋ฒ : ์์ ์ ํฌ๊ธฐ / ๊ธฐ์ค์ ํฌ๊ธฐ * 100
2. em - ๋ถ๋ชจ ์์์ ๋นํด ์ผ๋ง๋ ์ปค์ผํ๋์ง ์ฒ๋๋ก ๋ช ์ ๊ธฐ์ค์ ํฌ๊ธฐ๋ฅผ 1๋ก ์ก๋๋ค. ์์ ์์์ ํฌ๊ธฐ์ ๋ช ๋ฐฐ์ธ์ง๋ฅผ ์ ํ๋ ๋จ์ / font - size ๋ฅผ ๋ํ๋ด๋ ๋จ์
๊ณ์ฐ๋ฒ : ์์ ์ ํฌ๊ธฐ / ๊ธฐ์ค์ ํฌ๊ธฐ
<html>
<body>
<main id="wrap">
<h1>parent</h1>
<div class="box01">
<h2>child</h2>
</div>
</main>
</body>
</html>@charset "utf-8";
#wrap{
width: auto;
height: auto;
font:bold 20px sans-serif;
}
.box01{
font-size: 1em;
}์ด๋ font-size 1em์ 20px์ด ๋๋ ๊ฒ์ด๋ค.
โป๊ธฐ๋ณธ์ ์ผ๋ก 1em์ 16px์ด๋ค.
โปfont - size ์ธ์ padding ๊ณผ margin์๋ ์ ์ฉ์ด ๊ฐ๋ฅํ๋ค.
โป8em = 800% / 0.5em = 50%
3. rem - ์ต์์ ์์์ ํฌ๊ธฐ์ ๋ช ๋ฐฐ์ธ์ง๋ฅผ ์ ํ๋ ๋จ์ - ๋ณธ์ธ์ ๋ฐ๋ก ์์ ๋ถ๋ชจํฐํธ์ฌ์ด์ฆ๋ ๊ด๊ณ ์์ด ์ต์์ ์์์ ํฌ๊ธฐ๋ง์ผ๋ก ๊ฒฐ์ ๋๋ค.
์ต์์ ์์์ ํฐํธ๋ฅผ ์ง์ ํ์ง ์์ผ๋ฉด ๋ธ๋ผ์ฐ์ ์ ์ค์ ๋ ํฐํธ ํฌ๊ธฐ๋ฅผ ์์๋ฐ๋๋ค.
<html>
<body>
<main id="wrap">
<h1>parent</h1>
<div class="box01">
<h2>child</h2>
</div>
</main>
</body>
</html>@charset "utf-8";
#wrap{
width: auto;
height: auto;
font:bold 20px sans-serif;
}
.box01{
font-size: 1rem;
}์ด๋ font-size 1rem์ 16px์ด ๋๋ ๊ฒ์ด๋ค.
โป r์ root๋ฅผ ๋ํ๋ธ๋ค
โป ์ต์์ ์์๋ html{font-size:40px} ์ด๋ฐ์์ผ๋ก html์ ์ง์ font-size๋ฅผ ๋ฐ๋ก ์ค์ ํ๋ ๊ฒฝ์ฐ๋ฅผ ๋งํ๋ค.
โป ํฐํธ ํฌ๊ธฐ๋ฅผ ์ง์ ํ๊ฑฐ๋ ๊ผญ em๋จ์๋ฅผ ์จ์ผํ๋ ๊ณณ์ด ์๋๋ฉด rem๋จ์ ์ฌ์ฉ์ ๊ถ์ฅํ๋ค. ์์๋ค์ ์์ ํน์ฑ๊ณผ ๊ด๊ณ์์ด ์ผ๊ด๋ ํฌ๊ธฐ๋ฅผ ์ค์ ํด์ฃผ๋ ๊ฒ ๋ฟ๋ง์๋๋ผ px ๋จ์ ๋์ rem๋จ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์๊ฐ ์ค์ ํ ํฐํธ์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์ฌ์ดํธ์ ๋ฐฐ์น๋ ๋ชจ๋ ๊ตฌ์ฑ ์์๊ฐ ์ ์ ํ๊ฒ ๋ฐ์ํ๋ค.
4. vw(viewport width) - ๋ถ๋ชจ ์์๊ฐ ์๋์ ์ํฅ์ ๋ฐ๋ ๋จ์ ์ฒด๊ณ๋ก ๋ทฐํฌํธ์ ๋๋น์ ์ํฅ์ ๋ฐ๋๋ค.
๋ธ๋ผ์ฐ์ ๋๋น ๊ฐ์ด 600px์ด๋ฉด 1vw๋ 6px์ด ๋๋ค.
5. vh (viewport height) - vw์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ทฐํฌํธ์ ์ํฅ์ ๋ฐ๋๋ค. vh ์์๋ ๋์ด ๊ฐ์ 100๋ถ์ 1๋จ์์ด๋ค.
๋ธ๋ผ์ฐ์ ๋์ด ๊ฐ์ด 700px์ด๋ฉด 1vh๋ 7px์ด ๋๋ค.
โปviewport๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์๋ฏธํ๋ค.
โป๋ทฐํฌํธ ๋๋น๊ฐ๊ณผ ๋์ด๊ฐ ์ค ํฐ ๊ฒ์ vmax๋ก ์์ ๊ฒ์ vmin์ ๋จ์๋ก ์ฌ์ฉํ๋ค. ๋ง์ฝ ๋ธ๋ผ์ฐ์ ์ ํฌ๊ธฐ๊ฐ ๋๋น 1200px, ๋์ด 800px ์ด๋ฉด
1vim์ 8px, 1vmax๋ 12px ์ด ๋๋ค. ์ฆ vmax์ vmin์ ๋๋น๋ ๋์ด๋์ ๊ธฐ์ค์ด ์๋๋ผ ํฐ ๊ฐ๊ณผ ์์ ๊ฐ์ด ๊ธฐ์ค์ด ๋๋ค.
%,em์ ๋ถ๋ชจ ์์ ์ฌ์ด์ฆ์ ๋ฐ์ํ๊ณ vw,vh,rem์ ๋ธ๋ผ์ฐ์ ์ฌ์ด์ฆ์ ๋ฐ์ํ๋ค.
em๊ณผ rem์ font - size์ vw,vh,%๋ ์์, ๋๋น, ๋์ด์ ์ฌ์ฉํ์
padding๊ณผ margin์ em๊ณผ rem์ ์ฌ์ฉํ๊ณ top,bottom์ em์ left,right์๋ rem์ ์ฌ์ฉํ์
์ฐธ๊ณ ์๋ฃ
'Frontend > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| css - transform(์ธ ๋ณํ ํจ์๋ค), transtion (2) | 2023.04.15 |
|---|---|
| css - flexbox (container , item) (0) | 2023.04.06 |
| css - position,display (0) | 2023.04.05 |
| css - ๋ค์ ์ฐจ๊ทผ์ฐจ๊ทผ ๊ณต๋ถํ๊ธฐ! (0) | 2023.03.20 |
| css๋? (0) | 2023.03.19 |
