CSS 단위는 어떻게 분류되나요?

CSS 단위 분류에는 절대 단위와 상대 단위가 포함됩니다. 자세한 소개: 1. 절대 단위는 물리적 치수와 관련된 단위이며 해당 값은 픽셀, 인치, 센티미터, 밀리미터 및 포인트를 포함하여 다양한 장치 및 환경에서 고정되어 있습니다. 2. 상대 단위는 다른 크기 또는 환경에 따라 해당 값은 반응형 레이아웃을 구현하고 백분율, 창 단위, 글꼴 상대 단위 및 상대 길이 단위를 포함하여 다양한 화면 크기에 맞게 조정될 수 있습니다. 올바른 장치를 선택하면 다양한 화면 크기에 맞게 정밀하게 제어하고 적응할 수 있습니다.

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

CSS의 단위는 특성과 용도에 따라 분류할 수 있습니다. 일반적인 분류 방법에 따라 CSS 단위는 다음 범주로 나눌 수 있습니다.

1. 절대 단위: 절대 단위는 물리적 치수와 관련된 단위이며 해당 값은 다양한 장치 및 환경에 걸쳐 고정되어 있습니다. 일반적인 절대 단위는 다음과 같습니다.

- 픽셀(Pixel, px): 픽셀은 가장 일반적으로 사용되는 절대 단위이며 화면의 한 점을 나타냅니다. 픽셀은 고정되어 있으며 화면 크기에 따라 변경되지 않습니다. CSS에서 픽셀은 요소의 크기, 간격, 테두리와 같은 속성을 지정하는 데 자주 사용됩니다.

- 인치(in): 인치는 물리적 단위로, 1인치는 2.54센티미터와 같습니다. CSS에서는 인치를 크기 단위로 사용하여 요소의 크기를 지정할 수 있습니다.

- 센티미터(cm): 센티미터는 물리적 단위로 1센티미터는 0.3937인치와 같습니다. CSS에서는 크기 단위로 센티미터를 사용하여 요소의 크기를 지정할 수 있습니다.

- 밀리미터(mm): 밀리미터는 물리적 단위로 1밀리미터는 0.03937인치와 같습니다. CSS에서는 크기 단위로 밀리미터를 사용하여 요소의 크기를 지정할 수 있습니다.

- 포인트(Point, pt): 포인트는 물리적 단위로 1포인트가 1/72인치임을 나타냅니다. CSS에서는 포인트를 크기 단위로 사용하여 요소의 크기를 지정할 수 있습니다.

2. 상대 단위: 상대 단위는 다른 차원이나 환경에 상대적인 단위이며 해당 값은 상황의 변화에 ​​따라 변경됩니다. 상대 단위를 사용하면 반응형 레이아웃이 가능하고 다양한 화면 크기에 맞게 조정됩니다. 일반적인 상대 단위는 다음과 같습니다.

- 백분율(%): 백분율은 상위 요소를 기준으로 한 측정 단위입니다. CSS에서는 백분율을 사용하여 요소의 크기, 여백, 패딩 및 기타 속성을 지정할 수 있습니다. 예를 들어 width: 50%;는 요소 너비가 상위 요소 너비의 50%임을 의미합니다.

- 뷰포트 단위: 뷰포트 단위는 브라우저 뷰포트를 기준으로 한 측정 단위입니다. 뷰포트 단위는 브라우저 창의 크기에 따라 요소의 크기를 조정합니다. 일반적인 창 단위는 다음과 같습니다.

- 뷰포트 너비(vw): 창 너비 단위는 브라우저 창 너비에 대한 백분율을 나타냅니다. 예를 들어, width: 50vw;는 요소의 너비가 브라우저 창 너비의 50%임을 의미합니다.

- 뷰포트 높이(vh): 창 높이 단위는 브라우저 창 높이에 대한 백분율을 나타냅니다. 예를 들어, height: 50vh;는 요소의 높이가 브라우저 창 높이의 50%임을 의미합니다.

- 뷰포트 최소 너비(vmin): 뷰포트의 최소 너비 단위는 브라우저 창 너비와 높이 중 더 작은 것에 대한 백분율을 나타냅니다. 예를 들어, width: 50vmin;은 요소의 너비가 브라우저 창 너비와 높이 중 더 작은 것의 50%임을 의미합니다.

- 뷰포트 최대 너비(vmax): 뷰포트의 최대 너비 단위는 브라우저 창 너비와 높이 중 더 큰 것에 대한 백분율을 나타냅니다. 예를 들어, width: 50vmax;는 요소의 너비가 브라우저 창 너비와 높이 중 더 큰 것의 50%임을 의미합니다.

- 글꼴 관련 단위: 글꼴 관련 단위는 글꼴 크기에 상대적인 단위입니다. 일반적인 글꼴 관련 단위는 다음과 같습니다.

- em: em 단위는 요소에 상대적인 글꼴 크기의 배수입니다. 예를 들어, 글꼴 크기: 1.2em은 글꼴 크기가 상위 요소 글꼴 크기의 1.2배임을 의미합니다.

- rem: rem 단위는 루트 요소(즉, html 요소)를 기준으로 글꼴 크기의 배수입니다. 예를 들어, 글꼴 크기: 1.5rem은 글꼴 크기가 루트 요소 글꼴 크기의 1.5배임을 의미합니다.

- ch: ch 단위는 "0" 문자 너비의 배수입니다. 예를 들어, width: 10ch는 요소의 너비가 "0" 문자 너비의 10배임을 의미합니다.

- 상대 길이 단위: 상대 길이 단위는 요소 자체의 특정 속성 값에 상대적인 단위입니다. 일반적인 상대 길이 단위는 다음과 같습니다.

- rem: rem 단위는 루트 요소(즉, html 요소)를 기준으로 글꼴 크기의 배수입니다. CSS에서는 rem 단위를 사용하여 요소의 크기, 간격, 테두리 및 기타 속성을 지정할 수 있습니다. rem 단위는 전체 페이지의 상대적 크기를 구현하는 데 자주 사용됩니다.

-em: em 단위는 요소에 상대적인 글꼴 크기의 배수입니다. CSS에서는 em 단위를 사용하여 요소의 크기, 간격, 테두리 및 기타 속성을 지정할 수 있습니다. em 단위는 자체 글꼴 크기에 따라 요소의 크기를 조정할 수 있습니다.

이 장치의 선택은 특정 요구 사항과 설계 요구 사항에 따라 다릅니다. 절대 단위는 정확한 크기 제어가 필요한 상황에 적합하고 상대 단위는 반응형 레이아웃과 다양한 화면 크기에 대한 적응성이 필요한 상황에 적합합니다. 단위를 선택할 때 페이지가 다양한 장치에서 일관되고 적응할 수 있도록 다양한 장치와 화면 간의 차이점을 고려해야 합니다.

요약하자면 CSS 단위는 절대 단위(픽셀, 인치, 센티미터, 밀리미터, 포인트)와 상대 단위(퍼센트, 창 단위, 글꼴 상대 단위) 등 특성과 용도에 따라 분류할 수 있습니다. 상대 단위는 상대 길이 단위로 세분화될 수도 있습니다. 올바른 장치를 선택하면 다양한 화면 크기에 맞게 정밀하게 제어하고 적응할 수 있습니다.

위 내용은 CSS 단위는 어떻게 분류되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!