티스토리 뷰
CSS 단위
CSS에서 사용하는 단위는 font-size, text-indent, line-height, width, height, padding 등 크기를 나타내는 값에 쓰입니다. 크게는 절대 크기가 변하지 않는 절대 단위와 상황에 따라 크기가 변하는 상대 단위로 나뉩니다
절대 단위
“절대”단위는 부모 요소나 창 크기에 관계없이 동일한 크기입니다. 즉, 절대 단위를 가진 값으로 설정된 속성은 전화 또는 대형 모니터에서 볼 때 그 크기가 됩니다 (그리고 그 사이의 모든 것!) 응답성을 고려하지 않은 프로젝트에서 작업 할 때 절대 단위가 유용 할 수 있습니다. 예를 들어 크기를 조정할 수 없는 데스크톱 앱은 기본 크기로 스타일을 지정할 수 있습니다. 창 크기가 조정되지 않으면 내용이 필요하지 않습니다
| 절대단위 | 설명 | 예제 |
|---|---|---|
| px | 1/96 of 1 inch (96px = 1 inch) | font-size: 12px; |
| pt | 1/72 of 1 inch (72pt = 1 inch) | font-size: 12pt; |
| pc | 12pt = 1pc | font-size: 12pc; |
| px | 1/96 of 1 inch (96px = 1 inch) | font-size: 12px; |
| cm | centimeter | font-size:0.6 |
| mm | millimeter (10 mm = 1 cm) | font-size: 4mm |
| in | inches | font-size: 0.2in |
상대 단위
상대 단위는 반응형 사이트의 스타일을 지정하는 데 유용합니다 (단위에 따라) 부모 또는 창 크기를 기준으로 크기가 조정되기 때문입니다.
일반적으로 반응 형 사이트의 기본값으로 상대 단위를 사용할 수 있습니다. 이렇게 하면 다양한 화면 크기에 맞게 스타일을 업데이트하지 않아도 됩니다.
| 상대단위 | 설명 |
|---|---|
| % | 해당 속성의 부모 요소 값에 상대적 |
| em | 요소의 현재 글꼴 크기와 관련 |
| rem | 루트의 글꼴 크기와 관련 (e.g. the <html> element). “rem” = “root em” |
| ch | 문자 수 (1 문자는 현재 글꼴의 너비 인 0/0과 같습니다) |
| vh | 뷰포트의 높이 (창 또는 앱 크기)를 기준으로 합니다. 1vh = 뷰포트 높이의 1/100 |
| vw | 뷰포트의 너비를 기준으로 합니다. 1vw = 뷰포트 너비의 1/100 |
| vmin | 뷰포트의 작은 치수와 관련 (예 : 세로 방향의 경우 너비가 높이보다 작으므로 너비를 기준으로 합니다). 1vmin = 뷰포트 작은 크기의 1/100 |
| vmax | 뷰포트의 더 큰 차원에 상대적 (예 : 세로 방향의 높이). 1vmax = 뷰포트 더 큰 치수의 1/100 |
| ex | 현재 글꼴의 소문자 "x"의 높이를 기준으로 합니다. |
UP NEXT : CSS
댓글
© 2018 webstoryboy