CSS의 길이 단위를 살펴 봅니다

CSS 길이 단위에 대한 자세한 설명 : 절대에서 상대적으로, 뷰포트 관련 에 이르기까지

정확한 측정은 웹 디자인의 중요한 부분입니다. CSS에서 적어도 10 개의 다른 길이 단위의 존재만으로도 이것을 설명하기에 충분합니다. 각 장치에는 고유 한 특정 목적이있어 웹 페이지가 다양한 장치에 더 잘 적응할 수 있습니다. 이 장치를 마스터하면 요소 크기를보다 정확하게 조정할 수 있습니다. 이 튜토리얼은 CSS에서 사용 가능한 다양한 장치를 탐색하고 어떤 상황에서 사용되는지와 사용 방법에 대해 논의합니다.

키 포인트

CSS는 다양한 길이의 길이를 제공하는 각 단위를 제공하여 웹 페이지가 다른 장치에 더 잘 적응할 수 있도록합니다. 이 단위는 대략 절대 길이 단위, 상대 길이 단위 및 뷰포트 상대 길이 단위로 나눌 수 있습니다.

절대 길이 단위 (예 : 픽셀, 인치, 밀리미터 및 센티미터)는 물리적 측정을 나타내며 화면 크기 또는 해상도의 영향을받지 않습니다. 그러나 디지털 장치 나 해상도가 알려지지 않은 상황에 적합하지 않을 수 있습니다.

상대 길이 단위 (EM, REM 및 뷰포트 장치 포함)는 다른 사전 정의 된 값 또는 특성에 따라 값을 조정하여 반응 형 레이아웃을 생성하는 데 이상적입니다. 사용 된 글꼴 또는 화면의 창 높이 및 너비에 상대적 일 수 있습니다.

뷰포트의 상대 길이는 뷰포트의 높이와 너비를 기반으로합니다. 이 유닛 (VH (Viewport Height), VW (Viewport Width), VMIN (Viewport Minimum) 및 VMAX (Viewport Maximum)를 포함하여 브라우저 창의 크기에 따라 요소를 확장하는 데 사용할 수 있습니다.

• 절대 길이 단위
절대 단위는 실제 물리적 측정의 수치 표현입니다. 이 장치는 화면 크기 또는 해상도와 관련이 없습니다. 따라서 절대 길이 단위는 디지털 장치에서 사용되거나 해상도를 알 수없는 경우에 적합하지 않습니다. 이 장치는 인쇄와 같은 물리적 매체를 설계 할 때 더 적합합니다.
• 절대 단위는 다음을 포함합니다
cm (cm) mm (mm) in (inch) PC (카드 예약) pt (lb)

px (픽셀)

• 사양의 편집 초안에는 1/4 밀리미터 (Q) 장치도 포함되지만 브라우저를 지원하지 않는 새로운 장치입니다.
절대 길이를 사용하면 동일한 단위의 동일한 값이 다른 화면에 대해 다른 디스플레이 효과를 가질 수 있습니다. 화면의 DPI (인치당 도트)가 다르기 때문입니다. 고해상도 화면은 저해상도 화면보다 DPI가 높기 때문에 이미지 나 텍스트가 작게 보입니다.
• 모든 절대 단위의 가장 널리 사용되는 픽셀은 픽셀 (px)입니다. 픽셀은 종종 화면에서 단일 점으로 이해되지만 기술적으로는 그보다 더 복잡합니다. 가장 작은 측정 단위이며 일반적으로 다른 장치의 벤치 마크로 사용됩니다.
다른 단위 (예 : 인치, 밀리미터 및 센티미터)는이 단위의 물리적 크기를 나타냅니다. 파운드 (PT) 장치는 1/72 인치를 나타내며 카드 (PC) 장치는 1/6 인치를 나타냅니다. 다음은 6 개의 공통 절대 단위를 사용하는 몇 가지 CSS 코드입니다.

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

Codepen demo 상대 길이 단위 이름에서 알 수 있듯이 상대 단위에는 고정 된 값이 없습니다. 그들의 값은 다른 사전 정의 된 값 또는 속성과 관련이 있습니다. 상대 단위를 사용하면 너비, 높이, 글꼴 크기 등을 다른 벤치 마크 매개 변수와 연결할 수 있으므로 요소 크기를 쉽게 쉽게 조정할 수 있습니다.

반응 레이아웃을 만들 때이 장치는 일반적으로 권장되며 디지털 미디어에 더 적합합니다. 그들의 값은 사용중인 글꼴 또는 화면의 창 높이 및 너비에 상대적 일 수 있습니다.

상대 단위는 다음을 포함합니다

ex (x height) ch (캐릭터) em (인쇄 이름을 따서 명명되었지만 동일하지는 않음)

rem (root em)

이 장치를 더 자세히 살펴 보겠습니다.

x 높이 (예) 및 문자 (ch) 단위 ex 단위는 개발에 거의 사용되지 않습니다. 1EX는 사용 된 글꼴의 소문자 "X"크기와 같습니다. 대부분의 경우 1EX 값은 거의 0.5EM과 같습니다. 그러나 이것은 글꼴에 따라 다릅니다. 이 장치는 EM의 수직 등가 단위로 간주 될 수 있습니다.

문자 (ch) 장치는 "0"문자와 관련이 있습니다. 1CH는 글꼴에서 "0"문자의 발전 측정입니다.

• em 단위 장치의 값은 기본 요소 또는 부모 요소의 글꼴 크기와 같습니다. 예를 들어, 부모 요소의 글꼴 크기가 20px 인 경우 1EM 값은 모든 직접 어린이의 경우 20px로 계산됩니다. 기본 단위에 따라 어린이 요소의 글꼴 크기를 쉽게 증가 시키거나 감소시킬 수 있습니다. 숫자가 정수 일 필요는 없습니다.
EM을 사용하면 다양한 요소의 글꼴 크기를 고정 된 규모로 쉽게 유지할 수 있습니다. 예를 들어, 상위 요소의 글꼴 크기 값이 50px 인 경우 하위 요소의 글꼴 크기를 2EM으로 설정하는 것은 100px로 설정하는 것과 동일합니다. 마찬가지로 0.5EM으로 설정하면 하위 요소의 글꼴 크기가 25px가됩니다.
• 다음 데모는 EM 장치의 작동 방식에 대한 간단한 예를 보여줍니다.
Codepen demo
• 그러나 그러나 때로는 EM 유닛이 중첩 된 요소의 경우 바람직하지 않은 결과를 낳습니다. 이는 EM 값이 부모가 직접 표시 한 값을 취하기 때문에 각 중첩 된 자식 요소는 동일한 EM 값을 가지지 만 계산 된 값은 항상 직접 부모와 관련이 있기 때문에 계산 된 값은 다릅니다. 따라서 전류 요소의 값을 비 방향 상위 요소 또는 비 뿌리 상위 요소에 비해 부모 요소의 비율로 설정 해야하는 경우 어려워집니다.
다음은 EM 장치의 예외 중첩 효과를 보여주는 데모입니다. 이 예에서는 문서의 벤치 마크 글꼴 크기가 16px (일반적으로 기본값)라고 가정합니다.
• Codepen demo
HTML의 중첩 요소에 주목하십시오. 각 요소의 내용은 계산 된 글꼴 크기를 선언합니다.
다음은이 예제의 CSS입니다

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

모든 div 요소가 1.15EM으로 정의 되더라도 실제 글꼴 크기가 중첩되어 있기 때문에 다릅니다.
REM 장치 이것은 REM 장치가 유용한 곳입니다. REM의 값은 항상 루트 요소의 글꼴 크기 (HTML 문서의 HTML 요소)와 같습니다. REM 데모는 EM 장치와 유사합니다. 다음은 CSS입니다 :

이것은 이전 데모와 동일한 중첩을 가진 간단한 데모이지만 이번에는 rem을 사용합니다 :

Codepen demo

중첩은 여전히 ​​존재하지만 중첩 요소의 계산 된 글꼴 크기에는 영향을 미치지 않습니다.

뷰포트 상대 길이 단위 뷰포트의 상대 길이는 뷰포트의 높이와 너비를 기반으로합니다. 창 또는 뷰포트는 화면에 보이는 영역 또는 프레임 공간입니다.

p {
  font-size: 2ex;
}

뷰포트 상대 단위는 다음을 포함합니다

vh (뷰포트 높이) vw (뷰포트 너비) vmin (뷰포트 최소값) Vmax (Viewport Maximum Value)

뷰포트 높이 (VH) 및 뷰포트 너비 (VW) VH 장치는 뷰포트와 밀접한 관련이 있습니다. VH의 값은 뷰포트 높이의 1/100과 같습니다. 이 장치는 브라우저 창의 높이에 따라 요소를 확장하려는 경우 유용합니다. 예를 들어, 뷰포트의 높이가 400px 인 경우 1VH는 4px입니다. 뷰포트 높이가 800px 인 경우 1VH는 8px입니다.

VH가 창의 높이와 관련이있는 것처럼, VW 장치는 뷰포트와 밀접한 관련이 있습니다. 따라서 1VW의 값은 유사하게 도출 될 수 있습니다. 이는 1VW가 뷰포트 너비의 1/100과 같음을 의미합니다. 예를 들어, 창의 너비가 1200px 인 경우 1VW는 12px입니다. 뷰포트 장치를 사용하여 너비, 높이 및 요소의 CSS를 다음과 같이 설정하십시오. Codepen demo

VMIN (Viewport Minimum) 및 VMAX (Viewport Maximum) 장치 VMIN 장치는 값이 낮은 뷰포트 모서리와 관련되므로 높이 또는 너비가 될 수 있습니다. 1VMIN의 값은 길이의 가장 짧은 가장자리의 1/100과 같습니다. 예를 들어, 뷰포트 크기가 500 x 700 인 경우 1Vmin 값은 5px와 같습니다. 크기가 1000 x 700 인 경우 값은 7px입니다.

대조적으로 Vmax는 뷰포트의 최대 값을 고려합니다. 스케일 계수는 여전히 1/100이므로 1Vmax는 값이 높은 가장자리의 1/100과 같습니다. 위와 동일한 예제를 사용하면 뷰포트 크기가 500 x 700 인 경우 1vmax 값은 7px와 같습니다. 크기가 1000 x 700 인 경우 값은 10px입니다. VMIN 및 VMAX를 사용하여 너비와 높이를 설정하는 CSS는 다음과 같습니다.

Codepen demo

브라우저 지원 ch Firefox, Chrome 27, IE 9, Safari 7 및 Opera 20.
rem IE9를 포함하여 사용되는 모든 브라우저. 더 많은 지원이 필요한 경우 다음은 폴리 필이 있습니다.
vw, vh 및 vmin Chrome 20, IE 9, Firefox 19, Safari 6 및 Opera 20. 기억할 가치가있는 한 가지는 Internet Explorer에서 VMIN이 비표준 VM 구문을 통해 지원된다는 것입니다. PolyFill의 경우 vminpoly를 사용해 보거나 -Prefix -Free 및 플러그인을 사용하십시오.

<.> vmax Chrome 20, Firefox 19 및 Opera 20 및 Safari 6.1. IE는 그것을 지원하지 않습니다. 이 폴리 필드를 시도하여 해킹 지원을 받고 다른 모바일 브라우저의 일부 버그를 도울 수 있습니다.

결론 이 튜토리얼은 반응 형 레이아웃 및 교차 장치 측정을 용이하게하는 많은 장치를 포함하여 CSS에서 사용 가능한 다양한 길이 단위를 간략하게 소개합니다. 모든 프로젝트에서 REM 또는 뷰포트 장치를 사용 했습니까? 당신의 경험은 어떻습니까? 주석 섹션 에서이 단위를 사용할 때 발생하는 팁이나 문제를 공유하십시오.

CSS 길이 단위 FAQ 다른 유형의 CSS 길이 단위는 무엇입니까? CSS 길이 단위는 웹 페이지의 다양한 요소의 크기를 지정하는 데 사용됩니다. CSS에는 절대 단위와 상대 단위의 두 가지 유형의 길이 단위가 있습니다. 절대 단위는 고정되어 있으며 페이지의 다른 속성에 따라 크기가 변경되지 않습니다. 여기에는 픽셀 (PX), 파운드 (PT), PICAS (PC), 인치 (IN), 센티미터 (CM) 및 밀리미터 (MM)가 포함됩니다. 반면에 상대 단위는 다른 길이 값과 관련이 있습니다. 여기에는 em, ex, ch, rem, vw, vw, vh, vmin, vmax 및 백분율 (%)이 포함됩니다.

내 프로젝트에 올바른 CSS 길이 장치를 선택하는 방법은 무엇입니까?

CSS 길이 단위 선택은 프로젝트의 특정 요구 사항에 따라 다릅니다. 화면 크기 나 글꼴 크기에 관계없이 변경되지 않는 고정 크기가 필요한 경우 절대 장치를 사용해야합니다. 그러나 디자인이 반응이 좋고 다양한 화면 크기 또는 글꼴 크기에 적응하려면 상대 장치를 사용해야합니다.

CSS의 "EM"과 "REM"단위의 차이점은 무엇입니까?

"em"과 "rem"은 CSS의 상대 단위입니다. 가장 가까운 상위 요소에 대한 "EM"장치의 글꼴 크기. 한편, "rem"은 모성 요소가 아닌 루트 요소 (HTML)에 비해 "루트 em"을 나타냅니다. 즉, "rem"은 둥지 레벨에 관계없이 항상 일관되므로 CSS의 전체 크기를보다 쉽게 ​​제어 할 수 있습니다.

CSS의 "VW"및 "VH"장치는 어떻게 작동합니까?

CSS의 "VW"(뷰포트 너비) 및 "VH"(Viewport Height)의 단위는 각각 뷰포트 너비 및 높이의 백분율을 나타냅니다. "VW"의 한 단위는 뷰포트 너비의 1%와 같고 "VH"단위는 뷰포트 높이의 1%와 같습니다. 이 장치는 뷰포트 크기에 맞는 반응 형 디자인을 만드는 데 특히 유용합니다.

단일 프로젝트에서 다른 CSS 길이 장치를 혼합 할 수 있습니까?

예, 단일 프로젝트에서 다른 CSS 길이 장치를 혼합 할 수 있습니다. 그러나 이러한 장치의 작동 방식과 디자인의 일관성과 응답 성을 보장하기 위해 어떻게 상호 작용하는지 이해하는 것이 중요합니다. 예를 들어, 테두리 너비의 "px", 글꼴 크기의 경우 "em", 레이아웃 너비의 경우 "vw"를 사용할 수 있으며 다양한 화면 크기에 걸쳐 확장되는 디자인을 생성 할 수 있습니다.

CSS 상대 단위를 사용하는 장점은 무엇입니까?

CSS의 상대 단위는 특히 반응 형 디자인에서 몇 가지 장점을 제공합니다. 이를 통해 요소의 크기가 서로, 뷰포트 크기 또는 사용자의 기본 글꼴 크기에 비해 확장 할 수 있습니다. 이를 통해 디자인이보다 유연하고 다양한 화면 크기 및 사용자 기본 설정에 적응할 수 있습니다.

다른 CSS 길이 단위 사이에서 변환하는 방법은 무엇입니까?

다른 CSS 길이 단위 사이에서 변환하는 것은 현재 글꼴 크기, 뷰포트 크기 및 화면의 픽셀 밀도와 같은 다양한 요소에 따라 다르기 때문에 복잡 할 수 있습니다. 그러나 이러한 전환에 도움이되는 온라인 도구와 계산기가 있습니다.

CSS의 기본 글꼴 크기는 얼마입니까?

대부분의 브라우저의 기본 글꼴 크기는 16px입니다. 이는 1EM 또는 1REM이 기본적으로 16px와 같음을 의미합니다. 그러나 사용자는 브라우저 설정 에서이 기본 글꼴 크기를 변경할 수 있으므로 상대 장치는 일반적으로 글꼴 크기로 권장됩니다.

픽셀 밀도는 CSS 길이 단위에 어떤 영향을 미칩니 까?

픽셀 밀도는 주어진 스크린 물리적 영역의 픽셀 수를 나타냅니다. 보통 인치당 픽셀 (PPI). 픽셀 밀도가 높은 화면은 동일한 물리적 공간에서 더 자세한 내용을 보여줍니다. CSS에서 픽셀 (PX)은 화면의 물리적 픽셀이 아니라 스크린의 픽셀 밀도를 고려하는 물리적 측정 단위 인 기준 픽셀입니다. 이는 CSS의 1px 길이가 고밀도 스크린의 여러 물리적 픽셀에 해당 할 수 있음을 의미합니다.

CSS의"CH "장치는 무엇입니까?

CSS의 "CH"장치는 현재 글꼴에서 "0"(0) 문자의 너비를 나타내는 상대 장치입니다. 실제 글꼴 크기에 관계없이 특정 수의 문자와 정렬 해야하는 폭 또는 여백을 설정하는 데 유용합니다.

위 내용은 CSS의 길이 단위를 살펴 봅니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!