CSS 단위는 글꼴 크기, 문자 크기, 뷰포트(화면) 크기 등 다양한 용도에 따라 여러 종류로 나뉩니다. 크게 절대 단위(Absolute Units)와 상대 단위(Relative Units) 두 가지 범주로 분류할 수 있으며, 각 범주는 앞서 언급한 하위 단위들로 구성됩니다.
1. CSS 절대 단위
절대 단위는 화면 크기나 다른 요소에 영향을 받지 않고 항상 고정된 물리적 크기를 나타냅니다. 주로 인쇄물 설계나 정확한 크기 지정이 필요한 경우에 사용됩니다.
다음은 대표적인 CSS 절대 단위입니다.
| 번호 | 단위 및 이름 |
|---|---|
| 1 | cm 센티미터 (1cm = 100mm) |
| 2 | in 인치 (1in = 2.54cm) |
| 3 | mm 밀리미터 |
| 4 | pc 파이카 (1pc = 12pt) |
| 5 | pt 포인트 (1pt = 1/72in) |
| 6 | px 픽셀 (1px = 0.75pt) |
절대 단위 예제
아래 예제는 각 절대 단위를 실제로 적용해 보는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Absolute Units</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#container {
display: flex;
}
.child{
margin: 5px 0;
height: 40px;
color: white;
border-width: 4px 0 4px 4px;
border-color: black;
border-style: solid;
}
.child:nth-of-type(1){
background-color: #FF8A00;
width:1cm;
}
.child:nth-of-type(2){
background-color: #F44336;
width:1in;
}
.child:nth-of-type(3){
background-color: #C303C3;
width:1mm;
}
.child:nth-of-type(4){
background-color: #4CAF50;
width:1pc;
}
.child:nth-of-type(5){
background-color: #03A9F4;
width:1pt;
}
.child:nth-of-type(6){
background-color: #FEDC11;
width:1px;
border-right-width: 4px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Absolute-Units</legend>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div><br>
<div><span class="child">cm</span><span class="child">in</span><span class="child">mm</span><span class="child">pc</span><span class="child">pt</span><span class="child">px</span></div><br>
<input type="number" id="numSelect" value="1" min="1">
<input type="button" onclick="changeWidth()" value="Preview">
<script>
var numSelect = document.getElementById("numSelect");
function changeWidth() {
var divChild = document.getElementsByClassName('child');
for(var i=0; i<6; i++){
divChild[i].style.width = numSelect.value+divChild[i+6].textContent;
}}
</script>
</body>
</html>실행 결과
버튼을 클릭하기 전 화면입니다.
숫자를 입력한 후 'Preview' 버튼을 클릭하면 입력한 값만큼 각 단위의 너비가 변경되어 표시됩니다.
2. CSS 상대 단위
상대 단위는 부모 요소, 루트 요소, 뷰포트 등 기준이 되는 값에 비례하여 크기가 결정됩니다. 반응형 웹 디자인에서 필수적으로 활용되며, 다양한 화면 크기에 유연하게 대응할 수 있도록 도와줍니다.
다음은 대표적인 CSS 상대 단위입니다.
| 번호 | 단위 및 기준 |
|---|---|
| 1 | % 부모 요소의 크기 기준 |
| 2 | em 해당 요소의 글꼴 크기 기준 |
| 3 | ex 요소 글꼴의 x-height(소문자 x의 높이) 기준 |
| 4 | rem 루트(root) 요소의 글꼴 크기 기준 |
| 5 | vh 뷰포트 높이의 1% |
| 6 | vmax 뷰포트에서 더 큰 쪽 치수의 1% |
| 7 | vmin 뷰포트에서 더 작은 쪽 치수의 1% |
| 8 | vw 뷰포트 너비의 1% |
상대 단위 예제
아래 예제는 각 상대 단위를 실제로 적용해 보는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#container {
display: flex;
}
.child{
margin: 5px 0;
height: 40px;
color: white;
border-width: 4px 0 4px 4px;
border-color: black;
border-style: solid;
}
.child:nth-of-type(1){
background-color: #FF8A00;
width:1%;
}
.child:nth-of-type(2){
background-color: #F44336;
width:1em;
}
.child:nth-of-type(3){
background-color: #C303C3;
width:1ex;
}
.child:nth-of-type(4){
background-color: #4CAF50;
width:1rem;
}
.child:nth-of-type(5){
background-color: #03A9F4;
width:1vh;
}
.child:nth-of-type(6){
background-color: #FEDC11;
width:1vw;
border-right-width: 4px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div><br>
<div><span class="child">%</span><span class="child">em</span><span class="child">ex</span><span class="child">rem</span><span class="child">vh</span><span class="child">vw</span></div><br>
<input type="number" id="numSelect" value="1" min="1">
<input type="button" onclick="changeWidth()" value="Preview">
<script>
var numSelect = document.getElementById("numSelect");
function changeWidth() {
var divChild = document.getElementsByClassName('child');
for(var i=0; i<6; i++){
divChild[i].style.width = numSelect.value+divChild[i+6].textContent;
}}
</script>
</body>
</html>실행 결과
버튼을 클릭하기 전 화면입니다.
'em' 옵션을 선택하고 숫자 입력란을 비운 상태에서 'Preview' 버튼을 클릭한 결과입니다.
마무리
절대 단위는 고정된 크기가 필요한 경우에, 상대 단위는 화면 크기나 부모 요소에 따라 유연하게 조정해야 하는 반응형 웹에 적합합니다. 프로젝트의 성격과 목적에 맞게 두 단위를 적절히 조합하여 사용하면 더욱 안정적이고 일관된 스타일링을 구현할 수 있습니다.