5개의 CSS 단위 및 권장 사용 사례

Cover photo by Zan on Unsplash.

소개

CSS에는 한 문서에서 확실히 다룰 수 없는 단위가 있습니다a documentation or some sort.

이 기사에서는 정기적으로 보게 될 CSS 단위와 이를 사용하는 것이 가장 좋은 시기에 대한 권장 사항을 다룰 것입니다.

우리가 이야기할 단위는 다음과 같습니다.

em 단위

Root em은 rem로 표기됩니다.

픽셀은 px로 표기됩니다.

백분율은 %로 표기됩니다.

뷰포트 너비는 vw로 작성됩니다.

의 시작하자.

엠 단위

em 단위는 다른 길이 속성에 상대적인 길이를 설명하는 상대 단위입니다.

타이포그래피에서 1em은 16포인트와 같으며 이 값은 사용자가 변경하지 않는 한 대부분의 최신 브라우저에서 기본 글꼴 크기입니다.

Firefox의 기본 글꼴 크기

권장 사용 사례

이 단위는 확장되며 다음 상황에서 가장 잘 사용됩니다.

요소font-size 속성입니다.

.

미디어 쿼리 중단점.

추가 자료

The Power of em Units in CSS .

루트 엠

루트em는 루트 em을 기준으로 계산됩니다. 루트em는 일반적으로 브라우저 기본 글꼴 크기입니다.

웹 페이지의 루트 요소는 일반적으로 html 태그 또는 ::root 의사 요소입니다.

다음 코드 조각을 살펴보십시오.

/**
 * The computed font size value assume the
 * browser defualt font size is 16px.
 */
p {
    font-size: 3rem; /* 48px computed by the browser */
}

권장 사용 사례

앞의 코드 스니펫에서 설명한 대로 em 단위가 필요하지 않은 글꼴 크기 조정입니다.

추가 자료

Comprehensive Guide: When to Use Em vs. Rem

픽셀 단위

Bert Bos은 px 단위를 CSS의 마법 단위로 설명합니다. ( source ).
rem , em 또는 다른 단위를 사용하든 상관없이 계산된 브라우저는 px 에 있습니다.

권장 사용 사례

테두리 너비 크기 조정

추가 자료

The Lengths of CSS .

백분율 단위

백분율 단위는 상대 단위이며 % 로 표시됩니다. 부모 개체에 상대적인 크기를 정의하는 데 사용됩니다.

다음 예를 살펴보십시오.

.container {
    width: 50%; /* Half of its parent width */
}

권장 사용 사례

반응형 웹 디자인

추가 자료

CSS units by Flavio Copes .

뷰포트 너비 단위

뷰포트 단위는 요소가 점유할 수 있는 현재 뷰포트의 너비를 지정하는 데 사용됩니다.
vw로 작성되었으며 뷰포트 높이( vh )라는 가까운 친척이 있습니다.

권장 사용 사례

표시 영역의 너비를 변경해야 하는 모든 크기 조정입니다.

추가 자료

CSS Viewport Units: A Quick Start .

결론

이들은 대부분의 시간에 사용하게 될 단위이지만 여기에서 논의되지 않은 다른 단위와 함께 추가로 실험해 보시기 바랍니다.

확인할 수 있습니다Mozilla Developer Network Values and units article.