CSS 측정 단위는 무엇입니까?

CSS 측정 단위는 요소의 크기, 간격, 테두리 및 기타 속성을 지정하는 데 사용되며 절대 단위와 상대 단위로 나눌 수 있습니다. 절대 단위에는 픽셀, 인치, 센티미터, 밀리미터 및 포인트가 포함됩니다. 상대 단위에는 백분율, 창 너비, 창 높이, 창 최소 너비, 창 최대 너비 및 글꼴 상대 단위가 포함됩니다. 올바른 측정 단위를 선택하면 다양한 단위의 특성과 호환성을 고려하면서 페이지를 적응력 있고 반응적으로 만들 수 있습니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.

CSS에는 요소의 크기, 간격, 테두리 및 기타 속성을 지정하는 데 사용되는 다양한 측정 단위가 있습니다. 이러한 측정 단위는 절대 단위와 상대 단위의 두 가지 범주로 나눌 수 있습니다.

1. 절대 단위:

- 픽셀(Pixel, px): 픽셀은 화면상의 한 점을 나타내는 가장 일반적으로 사용되는 절대 단위입니다. 픽셀은 고정되어 있으며 화면 크기에 따라 변경되지 않습니다. 예를 들어 width: 200px는 요소의 너비가 200픽셀임을 의미합니다.

- 인치(in): 인치는 물리적 단위로, 1인치는 2.54센티미터와 같습니다. 예를 들어 width: 2in는 요소의 너비가 2인치임을 의미합니다.

- 센티미터(cm): 센티미터는 물리적 단위로 1센티미터는 0.3937인치와 같습니다. 예를 들어 width: 5cm는 요소의 너비가 5cm임을 의미합니다.

- 밀리미터(mm): 밀리미터는 물리적 단위로 1밀리미터는 0.03937인치와 같습니다. 예를 들어 width: 50mm는 요소의 너비가 50mm임을 의미합니다.

- 포인트(Point, pt): 포인트는 물리적 단위로 1포인트가 1/72인치임을 나타냅니다. 예를 들어, 글꼴 크기: 12pt는 글꼴 크기가 12포인트임을 의미합니다.

2. 상대 단위:

- 백분율(%): 백분율은 상위 요소를 기준으로 한 측정 단위입니다. 예를 들어 width: 50%;는 요소 너비가 상위 요소 너비의 50%임을 의미합니다.

- 뷰포트 너비(vw): 뷰포트 너비는 브라우저 창 너비를 기준으로 한 측정 단위입니다. 예를 들어, width: 50vw;는 요소의 너비가 브라우저 창 너비의 50%임을 의미합니다.

- 뷰포트 높이(vh): 뷰포트 높이는 브라우저 창의 높이를 기준으로 한 측정 단위입니다. 예를 들어, height: 50vh;는 요소의 높이가 브라우저 창 높이의 50%임을 의미합니다.

- 뷰포트 최소 너비(vmin): 뷰포트의 최소 너비는 브라우저 창 너비와 높이 중 더 작은 크기를 기준으로 한 측정 단위입니다. 예를 들어, width: 50vmin;은 요소의 너비가 브라우저 창 너비와 높이 중 더 작은 것의 50%임을 의미합니다.

- 뷰포트 최대 너비(vmax): 뷰포트의 최대 너비는 브라우저 창 너비와 높이 중 더 큰 크기를 기준으로 한 측정 단위입니다. 예를 들어, width: 50vmax;는 요소의 너비가 브라우저 창 너비와 높이 중 더 큰 것의 50%임을 의미합니다.

- 글꼴 관련 단위: 글꼴 관련 치수를 지정하는 데 사용되는 em, rem 및 ch와 같은 상대 단위를 포함합니다. em은 상위 요소를 기준으로 한 글꼴 크기이고, rem은 루트 요소(예: html 요소)를 기준으로 한 글꼴 크기이며, ch는 0개 문자를 기준으로 한 너비입니다.

적절한 측정 단위를 선택하면 페이지가 다양한 기기에서 일관되게 표시되고 반응이 빨라질 수 있습니다. 측정 단위를 선택할 때 실제 요구 사항과 설계 요구 사항을 기반으로 요소의 크기, 레이아웃, 사용 가능한 공간과 같은 요소를 고려해야 합니다. 동시에 다양한 브라우저와 장치에서 스타일의 일관성과 신뢰성을 보장하기 위해 다양한 측정 단위의 특성과 호환성에도 주의를 기울여야 합니다.

요약하자면 CSS는 절대 단위(픽셀, 인치, 센티미터, 밀리미터, 포인트)와 상대 단위(백분율, 창 너비, 창 높이, 창 최소 너비, 창 최대 너비, 글꼴 상대 단위)를 포함한 다양한 측정 단위를 제공합니다. ). 올바른 측정 단위를 선택하면 다양한 단위의 특성과 호환성을 고려하면서 페이지를 적응력 있고 반응적으로 만들 수 있습니다.

위 내용은 CSS 측정 단위는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!