반응형
CSS Unit
CSS에는 길이를 표현하기 위한 몇 가지 다른 단위가 있다.
많은 CSS 속성은 width, margin, padding, font-size 등의 "length" 값을 사용합니다.
Length는 10px, 2em 등 길이 단위 뒤에 오는 숫자이다.
| <!DOCTYPE html> <html> <head> <style> h1 { font-size: 60px; } p { font-size: 25px; line-height: 50px; } </style> </head> <body> <h1>제목 1</h1> <h2>T제목 2</h2> <p>단락용 텍스트입니다..</p> <p>단락용 텍스트입니다.</p> </body> </html> |
참고: 숫자와 단위 사이에 공백을 둘 수 없다. 그러나 값이 0인 경우에는 단위를 생략할 수 있다.
일부 CSS 속성의 경우 음의 길이가 허용된다.
길이 단위에는 absolute 단위와 relative 단위의 두 가지 유형이 있다.
절대 단위(Absolute Unit)
절대 길이 단위는 고정되어 있으며 이들 중 하나로 표현된 길이는 정확히 그 크기로 나타난다.
화면 크기가 너무 다르기 때문에 절대 길이 단위는 화면에서 사용하는 것이 좋다. 그러나 인쇄 레이아웃과 같이 출력 매체를 알고 있는 경우 사용할 수 있다.
| unit | 설명 |
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels(1px = 1/96th of 1in) |
| pt | points(1pt = 1/72 of 1in) |
| pc | picas (1pc = 12pt) |
* 픽셀(px)은 보기 장치에 대해 상대적입니다. 저dpi 장치의 경우 1px는 디스플레이의 하나의 장치 픽셀(점)이다. 프린터 및 고해상도 화면의 경우 1px는 여러 장치 픽셀을 의미한다.
상대 유닛(Relative unit)
상대 길이 단위는 다른 길이 속성에 대한 상대 길이를 지정한다. 상대 길이 단위는 다른 렌더링 매체 간에 더 잘 확장된다.
| unit | 설명 |
| em | 요소의 글꼴 크기에 상대적(2em은 현재 글꼴 크기의 2배를 의미함) |
| ex | 현재 글꼴의 x 높이와 상대적으로 사용됨) |
| ch | 0의 폭에 대한 상대적인 값(0) |
| rem | 루트 요소의 글꼴 크기에 대한 상대적인 값 |
| vw | 뷰포트 폭의 1% 상대* |
| vh | 뷰포트 높이의 1% 상대* |
| vmin | 뷰포트* 작은 치수의 1%에 대한 상대적인 비율 |
| vmax | 뷰포트* 더 큰 치수의 1%에 대한 상대적인 비율 |
| % | 상위 요소에 대한 상대적인 값 |
지금까지 CSS에서 사용하는 단위(unit)에 대해 살펴보았다. 절대 단위와 상대 단위를 표와 같이 정리하였으니까 참조하여 사용하면 좋을 것 같습니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > CSS문법' 카테고리의 다른 글
| CSS !Important rule(중요도 규칙) (0) | 2023.09.13 |
|---|---|
| CSS Specificity (0) | 2023.09.12 |
| CSS Counter (0) | 2023.09.10 |
| CSS Website Layout (0) | 2023.09.09 |
| CSS textarea, select menu, input button etc (0) | 2023.09.08 |
댓글