사이즈 단위
참고 링크
절대 단위
- px : 픽셀. pixels. 보이는 기기에 따라 실제 보이는 너비가 다를 수 있다. (1px = 1/96th of 1in)
- pt : 포인트. points. 1pt = 1/72 of 1in
- pc : 피카. picas. 1pc = 12 pt
- cm : 센치미터. centimeters
- mm : 미리미터. millimeters
- in : 인치. inches. 1in = 96px = 2.54cm
상대 단위
- em : font-size 기준
- ex : 현재 보이는 글꼴의 'x'의 높이 기준 (보통 0.5em)
- ch : 현재 보이는 글꼴의 '0'의 너비 기준
- rem : root element(≶html>)에 지정된 font-size기준
- vw : viewport(보이는화면)의 너비 기준 (1=1%)
- vh : viewport(보이는화면)의 높이 기준 (1=1%)
- vmin : vw와 vh중 작은 값 기준 (1=1%)
- vmax : vw와 vh중 큰 값 기준 (1=1%)
- % : 부모요소 기준
사이즈 단위 비교표
사이즈 단위 비교표
비율 |
|
1 |
0.75 |
16 |
37 |
370 |
96 |
|
단위 |
px |
pt |
pc |
cm |
mm |
in |
1 |
px |
1 |
0.75 |
16 |
37 |
370 |
96 |
0.75 |
pt |
1.333333 |
1 |
21.33333 |
49.33333 |
493.3333 |
128 |
16 |
pc |
0.0625 |
0.046875 |
1 |
2.3125 |
23.125 |
6 |
37 |
cm |
0.027027 |
0.02027 |
0.432432 |
1 |
10 |
2.594595 |
370 |
mm |
0.002703 |
0.002027 |
0.043243 |
0.1 |
1 |
0.259459 |
96 |
in |
0.010417 |
0.007813 |
0.166667 |
0.385417 |
3.854167 |
1 |
테스트
css 환경
-
html {font-size:16px;}
.p-box {
vertical-align: top;
margin:3px;
font-size:30px;
overflow: hidden;
background-color: #abc;
width:300px;height:300px;
display:inline-block;
display: inline-flex ;
justify-content: center;
align-items: center;
}
-
vw : 00 , vw : 00
상대 단위
부모 font-size:30px;
상대 단위
부모 font-size:30px;