728x90
CSS 단위에 대해 알아봅시다 !
CSS에서 자주 사용되는 숫자 데이터 형식에 대해 알아보고, 길이 단위에 대해 알아봅시다.
숫자 데이터 형식
| 데이터 형식 | 설명 |
|---|---|
| <integer> | 1024 또는 -55 와 같은 정수 |
| <number> | 10진수, 소수 자릿수도 가능 |
| <dimension> |
45deg, 10px과 같이 단위가 붙어 있는 숫자 <length>,<angle>,<time> 및 <resolution> 종류 포함 |
| <percentage> |
50%와 같이 퍼센트를 나타냄 요소의 길이는 부모 요소의 길이를 기준으로 함 |
이 중 <length> 형식이 가장 많이 쓰이기 때문에 길이 단위에 대해 알아봅시다.
길이 단위에는 항상 동일한 크기인 절대 길이와 다른 것에 비례하여 조정되는 상대 길이로 나뉩니다.
절대 길이 단위
화면 출력보다 인쇄 시 더 유용합니다.
| 단위 | 이름 | 길이값 |
|---|---|---|
| cm | 센티미터 | 1cm = 96px/2.54 |
| mm | 밀리미터 | 1mm = 1/10th of 1cm |
| Q | 1/4 밀리미터 | 1Q = 1/40th of 1cm |
| in | 인치 | 1in = 2.54cm = 96px |
| pc | picas | 1pc = 1/6th 1in |
| pt | 포인트 | 1pt = 1/72th of 1in |
| px | 픽셀 | 1px = 1/96th of 1in |
상대 길이 단위
페이지 내 모든 요소에 비례하여 조정됩니다.
| 단위 | 설명 |
|---|---|
| em | 요소의 글꼴 크기 |
| ex | 요소 글꼴의 x-height 값 |
| ch | 요소 글꼴의 glyph "0"의 사전 길이(너비) |
| rem | 루트 요소의 글꼴 크기 |
| 1h | 요소의 라인 높이 |
| vw | viewport 너비의 1% |
| vh | viewport 높이의 1% |
| vmin | viewport의 작은 치수의 1% |
| vmax | viewport의 큰 치수의 1% |
예제로 살펴보자 !
html {
font-size: 16px;
}
.ems li {
font-size: 1.3em;
}
.rems li {
font-size: 1.3rem;
}
<ul class="ems">
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="rems">
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
✔️ em 단위는 '부모 요소의 글꼴 크기'를 의미하기 때문에 <ul> 내부에 <li> 요소는 부모 글꼴 크기의 1.3em(1.3배)로 설정되어 점점 커집니다.
✔️ rem 단위는 '루트 요소의 글꼴 크기'를 의미하며 <ul> 내부에 <li> 요소는 <html> 에서 글꼴 크기를 가져옵니다.
.box {
opacity: 0.6;
}
✔️ CSS에서 숫자를 값으로 사용하는 경우 따옴표 없이 사용해야 합니다.
✔️ opacity는 단위 없이 사용하는 속성이며, 0(투명)~1(불투명) 사이의 값을 사용합니다.
'CSS' 카테고리의 다른 글
| CSS | 요소를 숨기는 5가지 방법 (11) | 2022.08.26 |
|---|---|
| CSS | 색상 표현(Color) | 16진수, rgba, hsla (4) | 2022.08.24 |
| CSS | 이미지 스프라이트(image sprite) / ir 효과와 background 표현까지 (4) | 2022.08.20 |
| CSS | 움직이는 강아지 만들기 (8) | 2022.08.18 |
| CSS | SCSS (4) | 2022.08.18 |
댓글