CSS에는 다양한 CSS 속성의 크기를 결정할 때 사용할 단위에 대한 몇 가지 옵션이 있습니다. 

CSS 단위에 대한 모든 옵션을 배우는 것은 모든 화면에서 관리하기 쉽고 멋지게 보이는 방식으로 스타일링의 핵심이 될 수 있습니다.

https://alligator.io/css/css-units-explained/ 

CSS 단위 란 무엇입니까? 

CSS 단위는 요소 또는 내용에 대해 설정하는 속성의 크기를 결정합니다. 예를 들어 단락의 속성 margin을 설정하려면 특정 값을 지정하십시오. 이 값에는 CSS 단위가 포함됩니다.

p { margin: 20px; } 

이 경우 margin은 20px 속성입니다. 20px는 값이고 px (또는 "pixel")는 CSS 단위입니다.

px와 같은 단위를 사용하는 것이 일반적이지만 큰 문제는 종종 "여기에 가장 적합한 단위는 무엇입니까?"입니다.

그럼 알아 봅시다! ✨

절대 대 상대 단위 

사용할 단위에 대한 모든 옵션을 고려할 때 절대 및 상대의 두 가지 범주의 단위를 고려해야 합니다.

절대 단위 

“절대”단위는 부모 요소나 창 크기에 관계없이 동일한 크기입니다. 즉, 절대 단위를 가진 값으로 설정된 속성은 전화 또는 대형 모니터에서 볼 때 그 크기가 됩니다 (그리고 그 사이의 모든 것!)

응답성을 고려하지 않은 프로젝트에서 작업 할 때 절대 단위가 유용 할 수 있습니다. 예를 들어 크기를 조정할 수 없는 데스크톱 앱은 기본 크기로 스타일을 지정할 수 있습니다. 창 크기가 조정되지 않으면 내용이 필요하지 않습니다.

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

픽셀 (px)은 일반적으로 화면에서 가장 인기 있는 절대 단위입니다. 센티미터, 밀리미터 및 인치가 인쇄에 더 일반적이며 옵션인지 알지 못할 수도 있습니다!

상대 단위 

상대 단위는 반응형 사이트의 스타일을 지정하는 데 유용합니다 (단위에 따라) 부모 또는 창 크기를 기준으로 크기가 조정되기 때문입니다.

일반적으로 반응 형 사이트의 기본값으로 상대 단위를 사용할 수 있습니다. 이렇게 하면 다양한 화면 크기에 맞게 스타일을 업데이트하지 않아도 됩니다. 

상대 단위는 사용할 단위를 결정하는 데 절대 단위보다 약간 어려울 수 있으므로 옵션을 자세히 살펴 보겠습니다.

각 유형의 CSS 속성에 가장 적합한 옵션이 항상 확실하지는 않습니다. 예를 들어, %는 일반적으로 글꼴 크기보다 너비와 같은 레이아웃 관련 속성에 더 적합합니다.

다음은 각 상대 단위를 사용할 때의 몇 가지 예입니다. (스포일러 : 예전엔 거의 오지 않습니다.?)

% : 자식 요소가 부모 너비의 10%를 여백으로 갖도록 하여 부모 요소 전체를 채우지 않습니다. 부모의 크기가 변하면 여백도 업데이트 됩니다.

.child { margin: 10%; } 

em : 하위 요소의 글꼴이 부모의 글꼴 크기 (예 : 섹션 제목 아래 단락)의 절반 크기가 되도록 하려고 합니다.

.child { font-size: 0.5em; } 

rem : 글꼴 크기는 루트 요소의 글꼴 크기의 두 배여야 합니다. 이것은 부모 컨테이너에 관계없이 헤더의 크기가 모두 같아야 헤더 크기를 지정할 수 있습니다.

.header { font-size: 2rem; } 

ch : 모노 간격 글꼴이 있고 (문자는 항상 같은 너비) 10 자만 사용할 수 있습니다.

.small-text { width: 10ch; } 

vh : 방문 페이지는 항상 뷰포트 / 창의 높이 여야 합니다.

.wrapper { height: 100vh; } 

vw : 텍스트가 있는 섹션은 뷰포트 / 창 너비의 절반이어야 합니다.

.half-size { width: 50vw; } 

vmin : 이미지가 항상 뷰포트의 작은 크기만큼 넓어야 합니다. 휴대 전화를 세로 모드로 유지하면 이미지가 뷰포트 너비만큼 넓어집니다.

.min-width { width: 100vmin; } 

vmax : 더 큰 치수의 뷰포트를 완전히 채우기 위해 이미지가 잘 리더라도 신경 쓰지 않아도 됩니다. 예를 들어, 패턴 이미지가 배경으로 사용되는 경우입니다.

.max-width { width: 100vmax; } 

ex : 아마 자주 ex를 만나지 못할 수도 있지만 일반적으로 글꼴의 중간 부분을 측정하는 것이 좋습니다. 글꼴의 높이를 글꼴의 "x"높이의 두 배로 설정하려고 한다고 가정 해 보겠습니다.

.double-x { line-height: 2ex; } 

CSS 단위를 언제 어떻게 선택하면 몇 가지 질문이 나옵니다.

뷰포트 크기가 변경 될 때 스타일을 조정하고 싶은가?

크기를 조정하려면 앱에서 크기를 조정하려면 무엇을 원합니까?

이 질문에 대답하면 사용할 단위를 훨씬 쉽게 정할 수 있습니다. ?