가장 일반적인 CSS 단위는 무엇입니까?

소개

특정 CSS 속성의 크기를 정의할 때 CSS는 사용할 단위에 대한 여러 대안을 제공합니다. 관리하기 쉽고 모든 장치에서 아름답게 보이는 방식으로 스타일을 지정하려면 모든 CSS 단위 옵션을 배우는 것이 중요할 수 있습니다.

CSS 유닛이란 무엇입니까?

CSS 단위는 요소 또는 해당 콘텐츠에 대해 지정하는 속성의 크기를 설정하는 데 사용됩니다. margin: 20px와 같은 측정을 정의하려면 CSS 단위가 필요합니다. 여기서 px(또는 픽셀)는 CSS 단위입니다. 무엇보다도 여백, 패딩 및 길이를 지정하는 데 사용됩니다.

예시:

p {
  margin: 20px;
}

이 경우 여백은 20px 속성입니다. 는 값이고 px(또는 "픽셀")는 CSS 단위입니다.

CSS에는 절대 길이 단위와 상대 길이 단위라는 두 가지 주요 단위 유형이 있습니다.

절대 단위

절대 길이 단위는 고정되어 있으며 이러한 단위로 표현된 길이는 해당 크기로 표시됩니다.

화면 크기는 매우 다양하기 때문에 절대 길이 단위는 화면에서 사용하지 않는 것이 좋습니다. 그러나 인쇄 레이아웃과 같이 출력 매체를 알고 있는 경우 사용할 수 있습니다.

절대 단위는 화면 크기가 변경될 때 크기가 조정되지 않기 때문에 반응형 사이트에 적합하지 않습니다.

다음은 모두 절대 길이 단위입니다.



다음은 절대 단위의 예입니다 – px

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

px – 픽셀을 나타냅니다. 이것은 대부분 CSS를 위해 설계되었으며 가장 많이 사용되는 절대 길이 중 하나입니다.

상대 단위

상대 길이 단위는 다른 길이 속성과 비교하여 길이를 정의합니다. 상대 길이 단위는 다양한 렌더링 매체에서 잘 확장됩니다.
상대 단위를 사용하는 이점은 신중한 계획을 통해 텍스트 또는 기타 요소의 크기가 페이지의 다른 모든 항목에 비례하여 조정되도록 할 수 있다는 것입니다.

다음은 모두 상대 길이 단위입니다.



다음은 상대 길이 단위의 예입니다 – rem

html {
    font-size: 10px;
}
p {
    font-size: 1.4rem; // This would be 14px (1.4 * 10px)
}
h1 {
    font-size: 2.2rem; // 22px
}

CSS에서 rem은 루트 요소의 글꼴 크기를 나타내는 측정 단위인 "root em"을 나타냅니다. 즉, 1rem은 html 요소의 글꼴 크기와 같으며 대부분의 브라우저에서 기본값은 16px입니다. rem을 사용하면 UI 전체에서 글꼴 크기와 간격의 일관성을 유지하는 데 도움이 됩니다.

결론

CSS 단위는 CSS에서 요소의 속성 크기를 표현하는 데 사용되는 측정 단위입니다.

절대 및 상대 길이 단위가 모두 허용됩니다. 그러나 접근성에 관심이 있다면 상대 길이 단위를 가장 먼저 선택해야 합니다.

CSS에 대해 더 알고 싶습니까? 그런 다음 here로 이동하여 더 많은 기사를 읽으십시오.

CSS 값 및 단위에 대한 자세한 내용은 MDN Web Docs- CSS values and units을 참조하십시오.