CSS 단위 이해하기

<시간/>

CSS 단위는 글꼴 크기, 문자 크기, 표시 영역 크기 등과 같은 다양한 범주로 제공됩니다. 일반적으로 위에서 언급한 하위 범주로 구성된 절대 및 상대 단위의 두 가지 범주가 있습니다.

다음은 CSS 절대 단위입니다 -

Sr.No	단위 및 이름
1	cm 센티미터(1cm =100mm)
2	중 인치(1인치 =2.54cm)
3	mm 밀리미터
4	PC 파이카 (1 pc =12pt)
5	pt 포인트(1pt =1/72인치)
6	픽셀 픽셀(1픽셀 =0.75pt)

CSS 절대 단위의 예를 살펴보겠습니다 -

예시

<!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>

출력

버튼을 클릭하기 전에 -

CSS 단위 이해하기

'미리보기'를 클릭한 후 숫자 필드가 설정된 버튼 -

CSS 단위 이해하기

다음은 CSS 상대 단위입니다 -

Sr.No	단위 및 기준
1	% 상위 요소 차원
2	그들 요소의 글꼴 크기
3	예 요소 글꼴의 x 높이
4	렘 루트 요소의 글꼴 크기
5	vh 뷰포트 높이의 1%
6	vmax 뷰포트의 더 큰 치수의 1%
7	vmin 뷰포트의 작은 치수의 1%
8	vw 뷰포트 너비의 1%

CSS 상대 단위의 예를 살펴보겠습니다 -

예시

<!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>

출력

버튼을 클릭하기 전에 -

CSS 단위 이해하기

'미리보기'를 클릭한 후 'em'이 있는 버튼 옵션 선택 및 빈 텍스트 필드 -

CSS 단위 이해하기