CSS 단위 – %, em, rem, px, vh, vw-CSS 튜토리얼-php.cn

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

PHPz

풀어 주다： 2023-09-08 14:09:02

앞으로

1310명이 탐색했습니다.

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는 요소의 동적 높이를 설정하는 데 사용됩니다. 사용자가 높이를 변경할 때마다 현재 뷰포트 높이를 기준으로 요소의 높이가 동적으로 설정됩니다.