CSS - 단위와 값

✅ 절대 길이 단위

절대 길이 단위는 항상 동일한 크기로 고정됩니다.
가장 많이 사용되는 값는 px(픽셀) 입니다.

• cm(센티미터)
  • 1cm = 96px/2.54
• mm(밀리미터)
  • 1mm = 1/10th of 1cm
• Q(4분의 1 밀리미터)
  • 1Q = 1/40th of 1cm
• in(인치)
  • 1in = 2.54cm = 96px
• px(픽셀)
  • 1px = 1/96th of 1in

✅ 상대 길이 단위

텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 할 수 있는 이점이 있습니다.

• em
  • 요소의 글꼴 크기
• ex
  • 요소 글꼴의 x-height
• ch
  • 요소 글꼴의 glyph "0" 의 사전 길이 (너비)
• rem
  • 루트 요소의 글꼴 크기
• lh
  • 요소의 라인 높이
• vw
  • viewport 너비의 1%
• vh
  • viewport 높이의 1%
• vmin
  • viewport 의 작은 치수의 1%
• vmax
  • viewport 의 큰 치수의 1%

---

✅ 함수 표기법

위에 기재되어 있는 단위들에 대한 계산식을 이야기 합니다.

• calc()
  • CSS 속성의 값으로 계산식을 지정합니다.

width: calc(100% - 80%);

• min()
  • 가장 작은(가장 음수) 값을 CSS 속성 값으로 설정합니다.

width: min(50vw, 200px);

위 예시에서 너비는 최대 200px 이지만 뷰포트 너비가 400px 미만인 경우 작아집니다.

• max()
  • 가장 큰(가장 양수인) 값을 CSS 속성 값으로 설정합니다.

width: max(20vw, 400px); 

위 예시에서 최소 너비는 400px 이지만 뷰포트의 너비가 2000px보다 크다면 더 커집니다.