1. CSS의 길이 단위
CSS에서는 많은 값이 길이를 값으로 사용합니다. 상자 모델의 속성은 너비, 높이, 여백, 패딩 및 테두리와 같은 몇 가지 명백한 값 속성입니다. 또한 오프셋 오프셋, 상자 그림자 크기 또는 글꼴 크기, 간격 등과 같이 값이 길이 값이기도 한 CSS 속성이 많이 있습니다. CSS에는 많은 길이 단위가 있습니다. 아래에서 설명하겠습니다. 길이 단위와 그 용도에 대해 알아보세요.
2. 간략한 소개 (길이의 단위는 무엇입니까?)
CSS에는 절대 길이 와 상대 길이라는 두 가지 유형의 길이 단위가 있습니다.
절대 길이: px, in, cm, mm, pt, pc;
상대 길이: em, rem, ex, vh, vw, vmin, vmax, %, fr.
3. 자세한 소개
1. 길이의 절대단위
절대 길이 단위는 실제 물리적 크기를 나타냅니다. 크기는 고정되어 있으며 다른 요소의 크기 변경으로 인해 변경되지 않습니다. 다음 표에는 CSS에서 지원되는 절대 길이 단위가 나열되어 있습니다.
px: 픽셀을 나타냅니다. 픽셀은 화면 해상도를 기준으로 합니다. 페이지는 정확한 픽셀로 표시되며 다른 요소의 크기 변경으로 인해 변경되지 않습니다. 예를 들어 Windows의 경우 해상도 입니다. Mac 사용자가 사용하는 해상도는 96픽셀/인치인 반면, Mac 사용자가 사용하는 해상도는 일반적으로 72픽셀/인치입니다. , 일반적인 JavaScript 언어의 단위는 사용되는 픽셀입니다.
div{너비:200px;}in:inch는 물리적 측정 파일이지만 CSS 필드에서는 인치가 픽셀로 직접 매핑됩니다. (1인치 == 2.54cm == 96px)
div{너비:2in;}c m: 센티미터는 친숙하고 유용한 물리적 측정 단위입니다. 픽셀로도 매핑됩니다. (1cm == 37.8px)
div{폭:20cm;}mm: 밀리미터 는 작은 크기의 물리적 측정 단위입니다. (1mm == 0.1cm == 3.78px )
div{폭:200mm;}p t: 포인트는 길이의 물리적 단위이기도 합니다. (1pt == 1/72in == 96/72px)
div{너비:20pt;}pc: Pica는 (1pc == 12pt)를 제외하면 포인트와 동일합니다.
div{너비:20pt;}예:
<!DOCTYPEhtml><html><head><title>절대 길이 단위</title><style>.box{width:4in;height:4.5cm;border:2mmsolidblack;font-size:16px;}.pt{font {글꼴 -크기: 2pt;}.pc{font-size:3pc;}</style></head><body><divclass=box>16px 글꼴입니다<pclass=pt>2pt 글꼴입니다</p><pclass =pc>3pc의 글꼴입니다</p></div></body></html>제시된 결과는 다음과 같습니다.
2. 상대 길이 단위
상대 길이 단위는 이 단위가 고정된 값을 가지지 않음을 의미하며, 그 값은 다른 요소 속성(예: 브라우저 창 크기, 상위 요소 크기)의 영향을 받습니다. 상대 길이 단위는 반응형에 매우 적합합니다. 레이아웃 다음 표에는 CSS에서 지원되는 상대적 길이 단위가 나열되어 있습니다.
em: em은 현재 개체 내 텍스트의 글꼴 크기를 기준으로 하는 상대적 단위입니다. 현재 행의 글꼴 크기가 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다. 초기에 조판 측정은 현재 글꼴의 대문자 M의 크기를 기준으로 합니다. 글꼴 모음이 변경되면 크기가 변경되지 않지만 글꼴 크기가 변경되면 크기가 변경됩니다. em은 상위 요소의 글꼴 크기를 상속받습니다. (아래에는 em과 rem의 예가 있습니다)
CSS 규칙이 없는 경우: (1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm)
div{너비:40em;}re em: rem은 em과 같은 상대 단위이지만, em과 달리 rem은 계단식 메서드를 사용하여 크기를 계산하는 em과 달리 항상 루트 요소(예: root{})에 상대적입니다 . 이 상대 단위는 사용이 더 간단합니다.
div{너비:40rem;}예: 문자의 높이에 따른 상대 길이 단위 기본 글꼴 크기. em과 달리 em은 글꼴 모음이 변경되어도 변경되지 않지만, 단위 값과 해당 글꼴에는 특별한 제약 관계가 있으므로 ex 단위는 변경됩니다.
div{너비:40ex;}ch: ch의 의미는 x에 대한 ex의 높이와 유사합니다. 단, ch는 문자 x의 높이 대신 문자 0의 너비를 기반으로 합니다. 1ch는 숫자 0의 너비입니다. 글꼴 계열이 변경되면 ch도 변경됩니다.
div{너비:40ch;}vw: vw(뷰포인트 너비)는 시각적 너비 단위(창 너비)입니다. 1vw는 시각적 영역 너비의 1%와 같습니다. 차이점은 모든 값입니다. vw의 는 모든 요소에 적용됩니다. 부모 요소나 부모 요소의 너비에 관계없이 rem 단위는 항상 루트 요소를 기준으로 합니다. (아래에 vh 및 vw의 예가 있습니다)
div{너비:40vw;}vh: vh(뷰포트 높이)와 vw(뷰포트 너비)의 단위는 동일합니다. vh는 시각적 영역의 높이(창 높이)를 기준으로 합니다.
div{너비:40vh;}vmin: vmin의 값은 현재 vw 및 vh 중 작은 값입니다. 표준 크기 유형 사용 예에서는 화면 크기를 직접 결정하는 vw 및 vh 단위와 비교할 때 vmin이 더 유용한 측정항목입니다.
div{너비:40vmin;}vmax: vmax의 값은 vw와 vh 중 더 큰 값입니다.
div{너비:40vmax;}%: 백분율, 백분율로 표시된 길이 값은 동일한 속성을 가진 상위 요소의 길이 값을 기준으로 합니다. 예를 들어 요소의 너비가 450px이고 하위 요소의 너비가 50%로 설정된 경우 하위 요소가 렌더링됩니다. 너비는 225px입니다. (모든 상위 요소에 대해 특정 값이 설정되지 않은 경우 높이 백분율을 설정하면 모든 요소의 값이 0이 됩니다.)
div{너비:40%;}fr: 그리드 레이아웃에서 사용되는 길이 단위입니다. 그리드 레이아웃에서는 계산을 위해 fr을 자주 사용합니다.
다음 명령문은 세 줄의 그리드를 선언합니다. 첫 번째 줄의 높이는 30px이고 두 번째 줄의 높이는 또한 30px이며 세 번째 줄의 높이는 60px입니다.
그리드 템플릿 행:30px1fr2fr;
예:
<!DOCTYPEhtml><html><head><title>상대 길이 단위</title><style>.box{width:60vw;height:88vh;border:1exsolidblack;font-size:16px;}.info{font- 크기:2em;}.ex>범위{글꼴 크기:3ex;}.ch>범위{fon t-size:4ch;}</style></head><body><divclass=box>16px 글꼴입니다<pclass=info>2em 글꼴입니다</p><pclass=ex>x:< span>3ex의 폰트입니다</span></p><pclass=ch>0: <span>4ch의 폰트입니다</span></p></div></body></ HTML>아래에 표시됩니다:
3. 길이 단위 요약:
(1) 먼저 한 가지를 이해해야 합니다. 즉, 화면 해상도가 정확히 무엇인지 이해해야 합니다. 해상도에 따라 픽셀 크기가 다르므로 동일한 웹 페이지도 px 단위로 표시됩니다. 길이 단위로 사용하면 해상도에 따라 표시되는 크기가 다릅니다. 낮은 해상도에서는 픽셀이 더 커지고 표시되는 페이지도 크지만 세부 사항이 선명하지 않습니다.
(2) 실제로 상대 단위든 절대 단위든 모든 단위(화면에 표시될 때)는 결국 px 단위로 변환되므로 일반적으로 웹 페이지를 만들 때 기본 단위는 pt 대신 px를 선택합니다. 또한 브라우저의 DPI를 통해 표시하기 위해 px로 변환됩니다(예: FireFox의 DPI는 96이면 9pt = 12px). pt, cm, in, mm 등의 단위도 px로 변환되므로 절대값이든 상대값이든 해상도에 따라 달라지게 됩니다. 길이를 3cm로 설정하면 100% 단위로 바뀔 것이라고 생각하지 마세요. 해상도는 3cm로 변경되지 않습니다.
(3) pt는 특히 인쇄할 때 여전히 매우 유용한 단위라고 생각합니다. 이제 일부 웹 페이지는 한 페이지를 표시하고 다른 방식으로 인쇄하도록 구현되었습니다. 해상도가 다르면 인쇄된 페이지의 크기가 모두 동일하기 때문에 이것이 절대 단위의 첫 번째 특징이지만 디스플레이에서는 이 단위가 실제 물리적 길이를 나타내지 않는다는 점을 기억해야 합니다. 픽셀의 실제 크기에 따라 조정해야 합니다(해상도와 관련됨).
(4) 실제로 우리는 이것을 이런 식으로 이해할 수 있습니다. px를 절대 단위(디스플레이의 절대 단위)로 간주하고 다른 단위는 이를 기반으로 합니다. 예를 들어 현재 텍스트 글꼴에 상대적인 높이인 em( 현재 텍스트 글꼴 크기가 12px이고 새 글꼴을 1.5em으로 설정한 다음 새 글꼴 크기가 12 * 1.5 =로 변환된다고 가정합니다. 18px), 기억해야 할 점은 em이 상위 요소에 상대적인 높이라는 것입니다. 첫 번째 div에서는 글꼴을 12px, 두 번째 레벨에서는 1.5em, 세 번째 레벨에서는 1.5em으로 설정했다고 가정합니다. 글꼴 표시는 첫 번째 레벨 12px, 두 번째 레벨 18px, 세 번째 레벨 18 * 1.5 = 27px입니다.