CSS HTML 글자 박스 크기 단위(em, rem, px, vmax, pt 등)

CSS HTML 속성에 필요한 단위

 

CSS에선 디자인을 위한 다양한 요소들이 있습니다. 글꼴이나 박스 등의 크기는 단위를 지정하여 조절합니다. CSS에서 사용되는 단위 요소에는 어떠한 것들이 있으며 어디에 사용되는지 살펴보겠습니다.

 

html 단위에 대해 알아봅니다

 

 

 

CSS HTML 단위의 종류

 

em

• 글자 크기나 박스 크기를 설정할 때 사용합니다.
• 1em은 부모 요소에서 설정된 기본 크기를 의미합니다.

 

rem

• 글자 크기를 조절할 때 사용합니다.
• 1rem은 html에 설정된 기본 글자 크기를 의미합니다.
• 1rem의 표준 크기는 16픽셀입니다.

 

vw

• vw는 viewport width의 약자입니다.
• 1vw는 뷰 포트의 넓이의 1/100을 의미합니다.
• 100vw는 뷰 포트(브라우저 화면) 전체를 다 사용한다는 뜻입니다.

 

 

vh

• vh는 viewport height의 약자입니다.
• 1vh는 뷰 포트 높이의 1/100을 의미합니다.

 

 

vmin

• vmin은 뷰 포트의 넓이와 높이 가운데 짧은 쪽을 사용한다는 뜻입니다.
• 1vmin은 뷰 포트 넓이, 높이 가운데 짧은 쪽의 1/100입니다.

 

 

vmax

• vmin은 뷰 포트의 넓이와 높이 가운데 긴 쪽을 사용한다는 뜻입니다.
• 1vmin은 뷰 포트 넓이, 높이 가운데 긴 쪽의 1/100입니다.

 

 

px

• px은 글자나 박스 크기를 지정할 때 사용합니다.
• 1px은 고정된 1픽셀로 크기를 정한다는 의미입니다.

 

 

%

• 기준이 되는 너비, 높이에서의 비율을 의미합니다. 

 

 

deg

• 각도 단위로 트랜스폼 설정 시 사용합니다.
• 1deg는 1º를 의미합니다.

 

 

 

rad

• 각도 단위로 트랜스폼 설정 시 사용합니다.
• 1rad는 1라디안을 뜻합니다.

 

 

s

• 시간 단위로 애니메이션 설정 시 사용합니다.
• 1s는 1초를 의미합니다.

 

 

ms

• 1ms는 1/1000초를 의미합니다.

 

 

HTML 많이 사용하는 특수문자 코드 정리