CSS의 크기 단위는 무엇입니까?

CSS에는 다양한 유형의 크기 단위가 있으며 각 단위에는 적용 가능한 시나리오와 용도가 있습니다. 다음에서는 일반적으로 사용되는 CSS 크기 단위를 자세히 소개하고 해당 코드 예제를 제공합니다.

1. 픽셀(px)
   픽셀은 가장 일반적으로 사용되는 크기 단위 중 하나입니다. 이는 화면의 물리적 픽셀을 기준으로 측정되며 고정된 크기를 갖습니다. CSS 스타일을 작성할 때 너비, 높이, 테두리, 내부 및 외부 여백과 같은 속성의 값으로 픽셀을 직접 사용할 수 있습니다. 예:

   div {
     width: 200px;
     height: 100px;
     border: 1px solid #000;
     padding: 10px;
     margin: 20px;
   }

2. Percent (%)
   Percent는 상위 요소의 크기를 기준으로 한 측정 단위입니다. 너비, 높이, 내부 및 외부 여백, 테두리와 같은 속성에 사용할 수 있습니다. 백분율을 설정하면 반응형 레이아웃을 얻을 수 있습니다. 예:

   div {
     width: 50%;
     height: 50%;
   }

3. em
   em은 현재 요소의 글꼴 크기를 기준으로 한 측정 단위입니다. 글꼴 크기가 명시적으로 설정되지 않은 경우 em 단위의 크기는 상위 요소의 글꼴 크기와 같습니다. 너비, 높이, 내부 및 외부 여백, 테두리와 같은 속성에 사용할 수 있습니다. 예:

   div {
     width: 2em;
     height: 2em;
     padding: 1em;
     border: 0.5em solid #000;
   }

4. rem
   rem은 루트 요소(예: html 요소)의 글꼴 크기를 기준으로 한 측정 단위입니다. 너비, 높이, 내부 및 외부 여백, 테두리와 같은 속성에 사용할 수 있습니다. 루트 요소의 글꼴 크기를 설정하여 전역 크기 제어를 수행할 수 있습니다. 예:

   html {
     font-size: 16px; /* 设置根元素的字体大小为16px */
   }
   div {
     width: 20rem;
     height: 10rem;
     padding: 4rem;
     border: 2rem solid #000;
   }

5. vw 및 vh
   vw는 뷰포트 너비의 백분율이고 vh는 뷰포트 높이의 백분율입니다. 브라우저 뷰포트의 크기를 기준으로 측정됩니다. 너비, 높이 등과 같은 속성에 사용할 수 있습니다. vw와 vh를 설정하면 반응형 레이아웃을 구현할 수 있습니다. 예:

   div {
     width: 50vw; /* 视口宽度的50% */
     height: 50vh; /* 视口高度的50% */
   }

요약:
이 문서에서는 픽셀, 백분율, em, rem, vw 및 vh를 포함하여 CSS에서 일반적으로 사용되는 크기 단위를 소개합니다. 크기 단위를 합리적으로 선택하고 사용하면 웹 페이지를 적응력 있고 반응성이 뛰어나게 만들 수 있습니다. 실제 개발 시 특정 요구 사항과 시나리오에 따라 적절한 설정 단위를 선택하면 페이지 레이아웃을 더욱 유연하고 아름답게 만들 수 있습니다.

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