CSS는 여러 길이 단위를 지원합니다. 절대 길이 단위(디스플레이 장치와 관계없이 절대 크기로 길이를 정의), 상대 길이 단위(브라우저에 알려진 다른 단위에 상대적인 길이를 정의)라는 두 가지 주요 범주로 나눌 수 있습니다.
절대 길이 측정은 인치(in), 센티미터(cm), 밀리미터(mm), 포인트(포인트, pt로 표시), 문자 높이(pica, pc로 표시) 등 5가지 단위로 측정할 수 있습니다. 포인트 및 활자 높이는 일반적으로 인쇄 단위로 사용되며, 여기서 1pica=12pt입니다. CSS는 1pica를 1/72in, 즉 72pica=1in으로 정의합니다. 이는 고품질 프린터에서 일반적으로 사용되는 Adobe의 포스트스크립트 언어에서 사용되는 정의이기도 합니다.
CSS는 또한 픽셀 단위의 "절대" 길이를 지원합니다. 픽셀은 컴퓨터 디스플레이의 한 점입니다. 그러나 픽셀 밀도의 차이와 사용자가 선택한 디스플레이 해상도(동일한 디스플레이 화면은 640*480의 해상도 또는 1024*768의 해상도를 지원할 수 있음)로 인해 픽셀의 절대 크기는 디스플레이마다 다릅니다. . 따라서 픽셀 단위의 길이는 실제로 디스플레이에 따라 다릅니다. 픽셀을 컴퓨터 디스플레이 단위로 사용하면 픽셀이 엄격하게 정의된 단위라는 장점이 있습니다. 그러나 픽셀 단위는 웹 문서를 인쇄할 때 문제를 일으킬 수 있습니다.
인치 및 센티미터와 같은 절대 길이 단위는 고정 크기 용지에 문서를 배치하는 데 필요한 절대 위치를 제공하므로 인쇄 레이아웃에 매우 유용합니다. 이러한 이유로 전자 디스플레이 문서에서는 절대 길이를 사용해서는 안 됩니다. 이는 디스플레이가 6인치*4인치와 21인치 대각선 디스플레이 간에 다르며 브라우저가 주어진 조건에서 동일한 길이를 표시한다는 보장이 없기 때문입니다. 표시 고정된 창 영역을 사용하여 문서를 표시할 수 있습니다(창 크기는 사용자가 선택 가능). 이러한 차이를 고려하여 표시 영역의 크기나 텍스트 글꼴 크기에 자동으로 조정되는 단위를 사용하는 것이 적절합니다. 다행히도 이 동작을 가능하게 하는 세 가지 CSS 길이 단위가 있습니다.
상대 길이 측정은 em 단위, ex 단위 및 백분율의 세 가지 형식으로 나타날 수 있습니다. em 및 ex 단위는 글꼴 크기에 상대적인 길이를 정의합니다. em 단위는 글꼴의 실제 포인트 크기를 기준으로 길이를 정의합니다. 따라서 현재 글꼴 크기가 12pt이면 1.5em = 18pt입니다. 대조적으로, ex 단위는 글꼴의 x 높이를 기준으로 길이를 정의합니다. 즉, 현재 글꼴의 문자 "x" 높이를 기준으로 합니다. 이러한 방식으로 단위의 ex 크기는 글꼴 크기와 글꼴 모음 유형에 따라 달라집니다. 왜냐하면 주어진 포인트 크기의 실제 x 높이가 글꼴 모음마다 다르기 때문입니다.
현재 em 단위는 ex 단위보다 더 안정적입니다. 다양한 브라우저 간의 최상의 호환성을 위해서는 em 단위를 사용하는 것이 가장 좋습니다. 그러나 em과 ex 장치 모두 인쇄 문제를 일으킬 수 있다는 점에 유의하십시오.
백분율 단위는 세 번째 상대 단위입니다. 이 단위는 길이를 상대 길이에 대한 백분율로 정의합니다. CSS 사양에 따르면 관련 길이는 상위 단위의 글꼴 크기 또는 상위 형식 단위의 너비입니다. 각 경우는 질문의 특성에 따라 달라집니다. 매우 중요한 주의 사항이 있습니다. 기존 브라우저는 셀 너비에 대한 백분율 값을 계산하지 않으므로 백분율 길이를 올바르게 구현하지 않습니다. 대신 모든 브라우저는 글꼴 독립적인 백분율 길이를 전체 브라우저 창 너비의 백분율로 계산합니다.
길이 값의 형식은 기호('+' 또는 '-', 기본값은 '+'), 숫자, 단위 식별자(2자리 약어)로 구성됩니다. 길이 단위에는 상대 단위와 절대 단위의 두 가지 형태가 있습니다. 스타일 시트는 상대 단위를 사용하여 한 매체에서 다른 매체로(예: 컴퓨터에서 레이저 프린터로) 크기 조정을 더 쉽게 제어할 수 있도록 합니다. 백분율 단위와 키 값(예: 'x-large')은 동일한 장점을 갖습니다. 다음과 같이:
H1 { 여백: 0.5em } 요소 글꼴 높이
화면의 그래픽 해상도를 기준으로
문자 'x'의 높이(
픽셀 단위)입니다.출력 장치의 픽셀 밀도가 표준 컴퓨터 화면과 크게 다른 경우 사용자는 픽셀 값의 크기를 다시 조정해야 합니다. 권장 픽셀 값은 리더에서 팔 길이만큼 떨어진 곳에서 90dpi입니다. 하위 요소는 상대 값 대신 계산된 결과 값을 상속합니다. 예:
BODY {
글꼴 크기: 12pt;
텍스트 들여쓰기: 3em;
}
H1 { 글꼴 크기: 15pt }
위의 예에서 'H1'의 'text-indent' 값은 45pt가 아닌 36pt입니다.
==================================
em 태그--강조 태그
* em 태그는
* 속성:
* 공통 - 일반 속성
* em은 강조의 약어입니다.