CSS 단위 – %, em, rem, px, vh, vw

CSS 또는 CSS(Cascading Style Sheets)에는 필요에 따라 다양한 속성 값을 다양한 방식으로 표현할 수 있는 많은 단위가 있습니다. font-size, height, width 및 line-height와 같은 CSS 속성은 컨테이너의 다양한 속성을 정의하는 데 사용됩니다. 이러한 속성의 값은 다른 단위로 할당될 수 있습니다.

이 글에서는 다양한 CSS 단위를 자세히 살펴보고 실제로 구현하여 각 단위의 사용법을 이해해 보겠습니다.

CSS에는 많은 CSS 단위가 있지만 이 문서에서는 다음 속성만 배우거나 논의합니다. -

• 픽셀(px) - 픽셀 또는 px 단위는 가장 작으며 주로 초보자가 다양한 길이 속성의 값을 설정하는 데 사용됩니다. 수학적으로 1px는 1인치의 1/96으로 정의됩니다. 즉, 1px = 1인치의 1/96입니다.

문법

다음 구문은 픽셀 단위를 사용하여 다양한 길이 속성의 값을 설정하는 방법을 보여줍니다. -

으아아아

• em - em 속성은 요소의 글꼴 크기를 기준으로 길이 속성 값을 설정하는 데 사용됩니다. em을 픽셀과 비교하면 1em이 16px와 동일하다는 것을 알 수 있습니다. 즉, 1em = 16px입니다.

문법

다음 구문은 픽셀 단위를 사용하여 다양한 길이 속성의 값을 설정하는 방법을 보여줍니다. -

으아아아

• rem - rem 속성은 HTML의 루트 요소(즉, 태그)의 글꼴 크기를 기준으로 속성 값을 설정합니다. rem을 픽셀과 비교하면 1rem도 16px와 동일하다는 것을 알 수 있습니다. 즉, 1rem = 16px입니다.

문법

다음 구문은 픽셀 단위를 사용하여 다양한 길이 속성의 값을 설정하는 방법을 보여줍니다. -

으아아아

NOTE - 웹 페이지나 애플리케이션을 개발할 때 픽셀, em, rem 단위를 사용하지 않는 것이 좋습니다. 왜냐하면 웹 페이지를 반응형으로 만드는 동안 HTML의 컨테이너가 뷰포트 크기에 따라 너비와 높이를 동적으로 변경하는 것을 허용하지 않기 때문입니다.

• Viewport-width (vw) - viewport-width 또는 vw 속성은 웹 페이지를 보고 있는 사용자의 현재 뷰포트 너비를 기반으로 값을 설정하는 데 사용됩니다. 이를 통해 컨테이너는 웹 페이지의 현재 뷰포트 너비에 따라 너비를 동적으로 변경할 수 있습니다.

문법

다음 구문은 픽셀 단위를 사용하여 다양한 길이 속성의 값을 설정하는 방법을 보여줍니다. -

으아아아

• Viewport-height (vh) - 뷰포트 높이 또는 vh는 뷰포트 너비 속성과 거의 유사합니다. vw는 요소의 동적 너비를 설정하는 데 사용되고, vh는 요소의 동적 높이를 설정하는 데 사용됩니다. 사용자가 높이를 변경할 때마다 현재 뷰포트 높이를 기준으로 요소의 높이가 동적으로 설정됩니다.

문법

다음 구문은 픽셀 단위를 사용하여 다양한 길이 속성의 값을 설정하는 방법을 보여줍니다. -

으아아아

• Percent (%) - 백분율 또는 % 속성은 HTML 문서의 요소에 할당하려는 속성에 동적 값을 설정합니다. vw 및 vh와 같이 각 속성에 대해 서로 다른 % 기호를 사용하는 대신 각 속성에 대해 동일한 % 기호를 사용하여 값을 할당할 수 있습니다.

문법

다음 구문은 픽셀 단위를 사용하여 다양한 길이 속성의 값을 설정하는 방법을 보여줍니다. -

으아아아

이제 각각에 대해 논의하고 코드 예제의 도움으로 실제로 구현하여 차이점을 이해해 보겠습니다.

단계

• 1단계 - 첫 번째 단계에서는 다양한 HTML 요소를 정의하여 다양한 CSS 단위를 사용하여 다양한 길이 속성을 설정합니다.

• 2단계 - 다음 단계에서는

  요소 내에서 이전 단계에서 정의한 요소의 스타일을 정의합니다. /head> 태그입니다.

• 3단계 - 마지막 단계에서는 다양한 CSS 단위를 사용하여 속성에 값을 할당하고 속성 간의 차이점을 살펴보겠습니다.

예

아래 예는 모든 CSS 단위의 차이점을 이해하고 실제로 이해하는 데 도움이 될 것입니다 -

으아아아

위의 예에서는 다양한 CSS 단위를 사용하여 요소의 높이, 너비 및 글꼴 크기를 지정했습니다.

결론

이 글에서는 CSS의 길이 속성 값을 설정하는 데 사용할 수 있는 다양한 CSS 단위에 대해 배웠습니다. 코드 예제를 통해 실제로 구현하여 자세히 논의합니다.

위 내용은 CSS 단위 – %, em, rem, px, vh, vw의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!