CSS 단위

CSS 단위에 대해 간단히 알아봅시다!

픽셀(절대)

글꼴 크기에 'px'를 사용하지 마십시오. 그림자나 테두리와 같은 작은 디테일에 사용합니다.

% (상대적인)

레이아웃과 너비/높이에 사용하기 좋습니다.

크기는 주로 상위 요소 값의 백분율로 정의됩니다.

.example {
font-size: 20 px;
line-height: 50%; /* 10px */
}

엠 (상대)

글꼴 크기 및 여백/패딩에 사용할 수 있습니다. 이렇게 하면 해당 요소의 글꼴 크기에 따라 이 속성이 조정됩니다.

속성에 따라 동작 변경

'em' = 상위 글꼴 크기

부모에 크기가 없으면 기본값은 16px(본문)입니다.

.parent-div {
font-size: 10px;
}

.list-item {
font-size: 2em; /* 10px * 2 or 20px */ 
}

렘(친척)

글꼴 크기 및 여백/패딩에 'rem'을 사용할 수도 있습니다. 'rem'은 'em'보다 작업하기 쉽습니다. 더 일관성이 있기 때문입니다.

무엇이든 상관없이 hoot HTML에 상대적입니다(기본값은 16px)

루트 HTML 크기를 변경할 수 있습니다. 예를 들어 20px로 변경하면 1'rem'은 항상 20px가 됩니다.

html {
font-size: 10px;
}

p{
font-size: 1.5rem;
}

여기서는 HTML 기본 크기를 10px로 설정했습니다. 따라서 1.5rem은 15px입니다. 2rem은 기본 32px 대신 20px입니다.

vw/vh(상대)

ww/vw는 브라우저 창의 너비/높이에 상대적입니다. 100vw는 화면의 전체 너비를 의미합니다. 배경과 같은 더 큰 레이아웃에는 vw/vh를 사용하십시오.

모든 것이 확장되기 때문에 반응형 웹 사이트에 매우 유용합니다.

채널(상대)

'ch'는 현재 글꼴의 숫자 0의 너비를 기준으로 합니다. 'ch'는 단락의 너비 크기를 지정하는 데 사용됩니다. 일반적으로 가독성을 위해 45-70자 너비의 열이 필요합니다.

다음과 같이 사용합니다.

최대 너비: 20ch;

이렇게 하면 열 너비가 한 줄에 최대 20자로 설정됩니다.

이것은 기억하기 어렵기 때문에...

이 게시물 좋아요 누르고 저장하기

영감을 준 Sai Pranay 덕분입니다.