#10. CSS 프로퍼티 값의

CSS에는 cm, mm, 인치 등의 단위가 있지만 CSS에서 사용하는 대표적인 크기 단위는 px, em, %입니다.

px는 절대값이고 em과 %는 상대값입니다.

대부분의 브라우저의 기본 글꼴은 16px, 1em, 100%입니다.

1.1픽셀

px는 픽셀(pixel) 단위입니다.
1px는 1픽셀의 크기를 의미합니다.

예를 들어 요즘 비디오는 보통 1920*1080의 해상도를 따릅니다.
즉, 가로로 1920픽셀, 세로로 1080픽셀이 있습니다.

픽셀(픽셀)의 크기는 장치마다 다르기 때문에 픽셀을 기준으로 한 단위가 고유하지 않습니다.
따라서 대부분의 브라우저는 1px를 1/96인치의 절대 단위로 인식합니다.

px는 주로 요소의 크기나 이미지의 크기를 나타내는 데 사용됩니다.

1.2%

%는 백분율 단위의 상대 단위입니다.
요소의 지정된 크기를 기준으로 크기를 설정합니다.

예) 14px * 120% = 16.8px

1.3em

em은 다중 단위로서의 상대적인 단위입니다.
요소의 지정된 크기를 기준으로 크기를 설정합니다.

예를 들어 1em은 항목에 대해 지정된 크기이고 2em은 항목에 대해 지정된 크기의 두 배입니다.

폰트 크기나 내용물을 담고 있는 컨테이너의 크기를 설정할 때 사용하면 상대적인 설정이 가능해서 편리합니다.

예)1.2em > 14px * 1.2 = 16.8px

1.4 나머지

rem은 최상위 요소의 크기를 기반으로 합니다.
rem의 r은 루트를 나타냅니다.

Reset Css를 사용하여 미리 HTML 요소의 글꼴 크기를 설정해야 합니다.
지정하지 않으면 기본값은 16픽셀입니다.

1.5 뷰포트 단위(vh, vw, vmin, vmax)

뷰포트 단위는 상대 단위로 뷰포트를 기준으로 한 상대적인 크기를 의미합니다.

예를 들어 뷰포트 너비가 1000픽셀이고 높이가 600픽셀인 경우

1vw : 10px, 뷰포트 너비 1000px의 1%

1vh : 6px, 뷰포트 높이 600px의 1%

1vmin : 6px, 뷰포트 높이 600px의 1%

1vmax: 10픽셀(뷰포트 너비 1000픽셀의 1%)

2. 색상 표현 단위

키워드를 사용하여 색상을 지정할 수 있습니다.
사용하기 쉽지만 표현할 수 있는 색상의 수에 제한이 있습니다.

CSS에서 사용할 수 있는 색상 목록은 여기에서 찾을 수 있습니다.

https://developer.mozilla.org/en/docs/Web/CSS/color_value

– CSS: 계단식 스타일 시트 | MDN

CSS-데이터 유형은 색상을 나타냅니다.
또한 이 색상을 배경과 합성하는 방법을 지정하는 알파 채널 투명도 값을 가질 수 있습니다.

developer.mozilla.org

키워드 뿐만 아니라 더 다양한 색상을 사용하고 싶다면 다음과 같은 색상 표현 단위를 사용할 수 있습니다.