[HTML/CSS] Day11. ๋จ์(Units) ๐
์ฐ๋ฆฌ๋ HTML๋ก ๋งํฌ์
์ ํ ํ ์คํ์ผ์ ์ฃผ๊ธฐ ์ํด CSS๋ฅผ ์์ฑํ๋๋ฐ ๋ณดํต ๋จ์(Units)์ ์ ๋ง ๋ง์ด ์ฌ์ฉํ๋ค. px
๋ผ๋์ง, ์ต๊ทผ์์ผ ์์ธํ๊ฒ ๋ฐฐ์ ๋ em
๊ณผ rem
๋ฑ ๐
๊ทธ๋ฐ๋ฐ ์ฐ๋ฆฌ๊ฐ ์์ฃผ ์ฐ๋ ๋จ์๋ณด๋ค ๋ ๋ค์ํ ๋จ์๊ฐ ์๋ค๊ณ ํ๋ค.
๊ฐ์ธ์ ์ผ๋ก ์์
์ ๋ค์ผ๋ฉด์ "์ด๋ฐ ๋จ์๊ฐ ์์๋?"๋ผ๋ ์๊ฐ์ ์๊ฐ๋ง๋ค ํ๋ค.
๊ทธ์ ๋๋ก ๋ฐฐ์์ผํ๋ ๋จ์์์ง๋ง ๋ชฐ๋๋ค๋ ๋ป์ "์์ฃผ ์ฐ์ด์ง ์๋๋ค."๋ผ๋ ๊ฒฐ๋ก ์ด ๋์จ๋ค. ํ์ง๋ง ์ฐ๋ฆฌ๊ฐ ์ธ์ ์ธ์ง ๋ชจ๋ฅด๋ ๋ฐฐ์๋๋ ๊ฒ์ด ์ข๊ฒ ๋ค๋ผ๋ ์๊ฐ์ ์ ๋ฆฌ๋ฅผ ํ๋ ค๊ณ ํ๋ค.
๋จ์(Units)์ ๋ถ๋ฅ
๋จ์๋ ์ด 3๊ฐ์ง์ ๋ถ๋ฅ๋ก ๋๋๋ค.
-
์ ๋ ๊ธธ์ด ๋จ์ : ์ ๋์ ์ผ๋ก ๋ฐ๋์ง ์๋ ๊ณ ์ ๋จ์๋ฅผ ๋งํ๋ค.
px
,cm
,mm
๋ฑ์ด ์๋ค. -
์๋ ๊ธธ์ด ๋จ์ : ์๋์ ์ผ๋ก ์ฌ๋ฌ๊ฐ์ง ์์ธ(์คํฌ๋ฆฐ ํฌ๊ธฐ ๋ฑ)์ ์ํด ๋ณํ ์ ์๋ ๊ฐ๋ณ ๋จ์๋ฅผ ๋งํ๋ค.
em
,rem
,vh
,vw
๋ฑ์ด ์๋ค. -
๋ฐฑ๋ถ์จ : ๋ง ๊ทธ๋๋ก
%
๋ก ํ๊ธฐํ๋ ๋จ์๋ฅผ ๋งํ๋ค.
๋๋ ์ค๋ฌด์ ์ผ๋ก ๋ง์ด ์ฐ์ด๋ ๋จ์๋ฅผ ์์ฃผ๋ก ์ ๋ฆฌํ๋ ค๊ณ ํ๋ค.
๋ณํ์ง ์๋ ์ ๋ ๊ธธ์ด ๋จ์ โ
px
: 'ํ์'๋ฅผ ์๋ฏธํ๋Pixel
์ ์ฝ์์ด๋ฉฐ ๋๋ฐ์ด์ค ํ๋ฉด์์ ์ด๋ฏธ์ง๋ฅผ ํํํ๋ ๊ฐ์ฅ ์์ ๋จ์์ด๋ค. ๊ฐ์ด ๊ณ ์ ๋๋ค๋ ์ด์ ๋ก ์ง๊ด์ ์ผ๋ก ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๊ณ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ๋จ์์ด๋ค.
์ฃผ๋ก ์์์ width
๋ height
, padding
, margin
, border
, font-size
๋ฑ ๊ฐ์ ๋จ์์ ๋ง์ด ์ฌ์ฉ๋๋ค.
์์ ๋ฅผ ๋ณด๋ฉด ๊ฐ๊ฐ ๋ค๋ฅธ font-size
๋ฅผ ์ฃผ์๋ค.
<style>
h1 {
font-size: 20px;
}
p {
font-size: 14px;
}
span {
font-size: 5px;
}
</style>
<h1>Hello world - h1</h1>
<p>Hello world - p</p>
<span>Hello world - span</span>
๊ฒฐ๊ณผ๋ ๋ค ์๋ง๊ฒ ๋ค์ด๊ฐ๋ค ํ์ผ๋ ์ค๋ ์ฒ์ ์ ์ฌ์ค์ด ์์๋ค.
๋ธ๋ผ์ฐ์ ๋ง๋ค ๊ธฐ๋ณธ font-size
๋ฅผ ์ ํด๋๋๋ค๋ ๊ฒ์ ์๊ณ ์์๋ค. ์๋ฅผ ๋ค์ด ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๋ ๊ธฐ๋ณธ font-size
๊ฐ 16px
๋ก ์ง์ ๋์ด ์๋ค.
ํ์ง๋ง ์ต์ font-size
๊ฐ ์ ํด์ ธ ์๋ค๋ ๊ฒ์ ์ค๋ ์ฒ์ ์์๋ค. ์์ธํ ๋ณด๋ <span>
์ ์ฌ์ด์ฆ๊ฐ ์ด์ํ๋ค.
๋ถ๋ช
5px
์ด ์ ์ฉ๋์ด ์์ง๋ง ๊ณ์ฐ๋จ, computed
ํญ์ผ๋ก ๊ฐ๋ณด๋ฉด
font-size
๊ฐ 10px
๋ก ์ ์ฉ๋์ด ์๋ค. 10px
์ดํ๋ก ๋ด๋ ค๊ฐ๋ฉด ๋ฌด์กฐ๊ฑด 10px
์ ๋ง์ถ์ด ์ ์ฉ๋๋ค.
<style>
p:nth-child(1) {
font-size: 9px;
}
p:nth-child(2) {
font-size: 8px;
}
p:nth-child(3) {
font-size: 7px;
}
p:nth-child(4) {
font-size: 6px;
}
</style>
<p>Hello world - p</p>
<p>Hello world - p</p>
<p>Hello world - p</p>
<p>Hello world - p</p>
cm
๊ณผ mm
๋ ์ฌ์ฉํ๋ฉด ์ด์ํ ์ฌ๋์ด๋ค.
๋ธ๋ผ์ฐ์ ๋ง๋ค ์ต์ ํฐํธ ํฌ๊ธฐ๊ฐ ์๋ค๋ ๊ฒ์ ์์๋์์ผ ๊ฒ ๋ค.
๋ณํ๋ ์๋ ๊ธธ์ด ๋จ์ โญ๏ธ
-
em
: ๋ฐฐ์ ๋จ์์ด๋ฉฐ, ๋ถ๋ชจ ์์์ ๊ธ์ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ ์ผ๋ก ํ๋ค. -
rem
: ์ต์์ ์์์ธ<html>
์ ๊ธ์ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ค.
์๋์ ์์ค์ฝ๋๋ em
๊ณผ rem
์ ์์ ์ด๋ค.
<style>
html {
/* ์ต์์ ์์ font-size๋ 15px์ด๋ค. */
font-size: 15px;
}
.parents-em {
font-size: 2em;
color: red;
}
.child-em {
font-size: 1.5em;
}
.parents-rem {
font-size: 2rem;
color: dodgerblue;
}
.child-rem {
font-size: 1.5rem;
}
</style>
<!-- em -->
<div class="parents-em">
HELLO EM
<p class="child-em">HELLO EM</p>
</div>
<!-- rem -->
<div class="parents-rem">
HELLO REM
<p class="child-rem">HELLO REM</p>
</div>
๊ณ์ฐ์ด ์ด๋ป๊ฒ ๋๋์ง ์ ์์์ผํ๋ค.
์ฐ์ ๋ถ๋ชจ๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ em
์ ๊ฒฐ๊ณผ๋ฅผ ์ดํด๋ณด์.
์ฐ๋ฆฌ๋ <html>
ํ๊ทธ์ ๊ธฐ๋ณธ font-size
๋ฅผ 15px
๋ก ์ค์ ํ๋ค. ๊ทธ๋์ ์ฒซ๋ฒ์งธ ๋นจ๊ฐ์ ๊ธ์จ์ 2em
์ ๋ถ๋ชจ์ธ <html>
์ 15px
๋ฅผ ๋ฐ์ 15 * 2
์ธ 30px
๋ก ๊ณ์ฐ๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋๋ฒ์งธ ๋นจ๊ฐ์ ๊ธ์จ์ธ 1.5em
์ ๋ถ๋ชจ์ธ "์ฒซ๋ฒ์งธ ๊ธ์จ"์ ํฌ๊ธฐ์ธ 30px
์ ๋ฐ์ 30 * 1.5
์ธ 45px
๋ก ๊ณ์ฐ์ด ๋๋ค.
๋ค์ ์ต์์ ํ๊ทธ๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ rem
์ ๊ฒฐ๊ณผ๋ฅผ ์ดํด๋ณด์.
rem
์ ์ต์์ ํ๊ทธ์ธ <html>
์ 15px
์ ๊ธฐ์ค์ผ๋ก ํ๋ค.
๊ทธ๋์ ์ฒซ๋ฒ์งธ ํ๋์ ๊ธ์จ์ 2rem
์ 15 * 2
์ธ 30px
๋ก ๊ณ์ฐ๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋๋ฒ์งธ ํ๋์ ๊ธ์จ๋ 1.5rem
์ <html>
์ 15px
์ ๊ธฐ์ค์ผ๋ก 15 * 1.5
์ธ 22.5px
๋ก ๊ณ์ฐ๋๋ค.
์ฃผ์ํด์ผ ํ ์ ์ rem
๋จ์๊ฐ ์ ์ฉ๋ ์์ ์์๋ rem
์ ๊ณ์ฐ์ ๋ง์น ๋ถ๋ชจ ์์์ font-size
๊ฐ ์๋ ์ต์์ ํ๊ทธ <html>
์ font-size
๋ฅผ ๊ธฐ์ค์ผ๋ก ํด์ผํ๋ค.
-
%
: ๋ฐฑ๋ถ์จ ๋จ์์ด๋ค. -
vw
: ๋๋ฐ์ด์ค์ ํ๋ฉด ๋์ด๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ ๋ฐฑ๋ถ์จ ๋จ์์ด๋ค.1vw
๋ ๋๋ฐ์ด์ค ํ๋ฉด ๋์ด์1%
์ด๋ค. -
vh
: ๋๋ฐ์ด์ค์ ํ๋ฉด ๋์ด๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ ๋ฐฑ๋ถ์จ ๋จ์์ด๋ค.1vh
๋ ๋๋ฐ์ด์ค ํ๋ฉด ๋์ด์1%
์ด๋ค. -
vmin
: ๋๋ฐ์ด์ค์ ํ๋ฉด ๋์ด์ ๋์ด ์ค ์์ ๊ฐ์ ๊ธฐ์ค์ผ๋ก ํ๋ ๋ฐฑ๋ถ์จ ๋จ์์ด๋ค.1vmin
์ ํ๋ฉด์ ๋์ด์ ๋์ด ์ค ์์ ๊ฐ์1%
์ด๋ค. -
vmax
: ๋๋ฐ์ด์ค์ ํ๋ฉด ๋์ด์ ๋์ด ์ค ๋์ ๊ฐ์ ๊ธฐ์ค์ผ๋ก ํ๋ ๋ฐฑ๋ถ์จ ๋จ์์ด๋ค.1vmax
์ ํ๋ฉด์ ๋์ด์ ๋์ด ์ค ์์ ๊ฐ์1%
์ด๋ค.
์์ ์ด๋ฏธ์ง๋ vmin
๊ณผ vmax
๋ฅผ ์ค๋ช
ํ๊ธฐ ์ํ ์ด๋ฏธ์ง์ด๋ค.
ํ๋ ๋ฐ์ค๋ vmax
๋จ์์ด๊ธฐ ๋๋ฌธ์ ํ๋ฉด์ ๋์ด์ ๋์ด ์ค ๋์ด๊ฐ ํฌ๊ธฐ ๋๋ฌธ์ ๋์ด๋ฅผ ๊ธฐ์ค์ผ๋ก ํฌ๊ธฐ๊ฐ ๊ฒฐ์ ๋๋ค.
๋
ธ๋ ๋ฐ์ค๋ vmin
๋จ์์ด๊ธฐ ๋๋ฌธ์ ํ๋ฉด์ ๋์ด์ ๋์ด ์ค ๋์ด๊ฐ ์๊ธฐ ๋๋ฌธ์ ๋์ด๋ฅผ ๊ธฐ์ค์ผ๋ก ํฌ๊ธฐ๊ฐ ๊ฒฐ์ ๋๋ค.
ex
: ํ์ฌ ํฐํธ์x-height
์ ๊ฐ์ด๋ค. ์ฆ ํ์ฌ ํฐํธ์ '์๋ฌธ์ x'์ ๋์ด ๊ฐ์ ๊ธฐ์ค์ผ๋ก ํ ๋ฐฑ๋ถ์จ ๋จ์์ด๋ค.
์ค๊ฐ์ ์ฐํ ์ฃผํฉ์์ ๋ณด๋ฉด '์๋ฌธ์ x'์ ์์๋์ ํฌ๊ธฐ๊ฐ ๋ฑ ๋ง๊ฒ ๋ ๋ถ๋ถ์ด x-height
์ด๋ค. ์ด ๋ถ๋ถ์ ํฌ๊ธฐ๊ฐ 10px
์ด๋ผ๋ฉด 1ex
๋ 10px
๋ก ๊ณ์ฐ๋๋ค.
์ด์ธ์ ๋จ์๋ค
-
in
:inch
๋ฅผ ๋ํ๋ด๋ ๋จ์์ด๋ค. 1์ธ์น๋2.54cm
์ด๋ฉฐ96px
์ด๋ค. -
pc
:Picas
์ ์ฝ์์ด๋ฉฐ1pc
๋ "1์ธ์น์ 6๋ถ์ 1"์ ํฌ๊ธฐ๋ฅผ ๋ํ๋ด๋ ๋จ์์ด๋ค. -
pt
:Point
์ ์ฝ์์ด๋ฉฐ1pt
๋ "1์ธ์น์ 72๋ถ์ 1"์ ํฌ๊ธฐ๋ฅผ ๋ํ๋ด๋ ๋จ์์ด๋ค.
๋ธ๋ผ์ฐ์ ์ ๋จ์ ์ง์ํํฉ
์ ๋ฆฌ๋ฅผ ๋ง์น๋ฉฐ โณ๏ธ
๋ถ๋ช ๋ด๊ฐ ์ฐ๋ ๋จ์๋ ๋ช ๊ฐ ์์๋๋ฐ ์ด๋ ๊ฒ ๋ง์ ๋จ์๋ฅผ CSS์์ ์ฌ์ฉํ ์ ์๋ค๋ ๊ฒ์ ํ๋ฒ ๋ ๋๋ ํ๋ฃจ์๋ค.
ํ์ง๋ง ๊ฐ์ฌ๋๊ป์ ์ฐ๋ฆฌ๋ ์์ฃผ ์ฐ๋ ๋จ์๋ง ์ฐ๊ฒ ๋๋ ๊ตณ์ด ์ ๊ฒฝ์ธ ํ์๋ ์๊ณ ๊ฐํน ์ฐ๋ ๊ฐ๋ฐ์๋ฅผ ๋ง๋๋ค๋ฉด ๊ทธ๋ ๋ค์ ๋ณด๊ณ ๋ฐฐ์ฐ๋ ๊ฒ์ผ๋ก ์๊ฐํ๋ผ๊ณ ํ์ จ๋ค.
๊ฑฑ์ ๋ง๊ณ ๊ทธ๋ฅ ํ๋ฒ ์ฝ์ด๋ณด๊ณ ๋์ ์ตํ๋ ์ ๋๋ง ์์๋๋๋ก ํ์!
์ถ์ฒ
์น ํ์ดํฌ๊ทธ๋ํผ์ ํด๋ถํ
์ด ์ธ์์ ํ๋๋ ๋จ๊ธฐ๊ณ ๊ฐ์
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([HTML/CSS] Day11. ๋จ์(Units) ๐), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@untiring_dev/HTMLCSS-๋จ์Units์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค