Lengths

CSS에는 상대 길이와 절대 길이의 두 가지 유형이 사용된다.
엘리먼트가 얼마나 커질지 이해하기 위해서는 이 둘의 차이점을 아는 것이 중요하다.

절대 길이 단위

• cm : Centimeters
  1cm = 37.8px = 25.2/64in

• mm : Millimeters
  1mm = 1/10th of 1cm

• Q : Quarter-millimeters
  1Q = 1/40th of 1cm

• in : Inches
  1in = 2.54cm = 96px

• pc : Picas
  1pc = 1/6th of 1in

• pt : Points
  1pt = 1/72nd of 1in

• px : Pixels
  1px = 1/96th of 1in

위의 단위들의 대부분은 화면 모니터에 출력되는 것보다 인쇄에 사용할 때 더 유용하다.
화면에는 cm 또는 mm를 사용하지 않는다.
대신 화면에는 일반적으로 px만을 사용한다.

상대 길이 단위

상대 길이 단위는 다른 요소, 상위 요소의 글꼴 크기 또는 뷰포트 크기에 따라 달라진다.
상대 단위를 사용할 때의 이점은 텍스트 또는 요소의 크기가 페이지의 다른 모든 요소와 비교하여 조정되도록 할 수 있다는 것이다.

• em : font-size 프로퍼티와 같이 인쇄 관련 속성을 사용 할 때 부모의 font-size 가 기준이 된다.
  또한 width 와 같이 font-size가 아닌 다른 속성에서 사용할 경우 그 엘리먼트 자체의 font-size 가 기준이 된다.

• ex : 해당 폰트의 소문자 x의 높이가 기준이다.

• ch : 해당 폰트의 숫자 0의 너비가 기준이다.

• rem : 루트 엘리먼트의 폰트 사이즈가 기준이다.

• lh : 해당 엘리먼트의 line height가 기준이다.

• rlh : 해당 엘리먼트의 line height가 기준이다.
  단, 루트 엘리먼트에 font-size 또는 line-height 가 주어졌다면 그 값을 기준으로 한다.

• vw : 뷰포트 너비의 1%가 기준이다.

• vh : 뷰포트 높이의 1%가 기준이다.

• vmin : 뷰포트 높이 / 너비 중 작은 값의 1%가 기준이다.

• vmax : 뷰포트 높이 / 너비 중 큰 값의 1%가 기준이다.

• vb : 루트 엘리먼트의 블록 축 방향으로 뷰포트 길이의 1%가 기준이다.

• vi : 루트 엘리먼트의 인라인 측 방향으로 뷰포트 길이의 1%가 기준이다.

• svw , svh : 각각, small 뷰포트의 너비, 높이의 1%가 기준이다.
  

• lvw , lvh : 각각, large 뷰포트의 너비, 높이의 1%가 기준이다.
  

• dvw , dvh : 각각 dynamic 뷰포트의 너비, 높이의 1%가 기준이다.
  UA 인터페이스 요소가 표시되는지 여부에 따라 자동으로 조정된다.

대부분의 값 유형은 <length> 또는 <percentage> 를 허용하지만 <length> 유형만을 허용하는 프로퍼티가 있다.
해당 프로퍼티의 허용되는 값 유형에 <length-percentage> 라고 표시되어있으면 둘 다 허용되는 값이고 <length> 만 표시되어있으면 백분율을 사용할 수 없다.

Numbers

일부의 값 유형은 단위를 포함하지 않고 숫자만을 입력한다.
opacity 프로퍼티가 대표적인 예다.

Color

색상을 지정하는 방법은 여러가지가 있다.

• Color keywords

• Hexadecimal RGB values

• RGB and RGBA values
  rgb() 및 rgba() 함수를 사용해 나타낸다.

  rgba()로 투명도를 설정하는 것은 opacity 프로퍼티를 사용하는 것과 한 가지 주요 차이점이 있다.
  opacity 프로퍼티를 사용하면 요소와 요소 내부의 모든 것이 불투명해지는 반면, RGB를 알파 매개변수 색상과 함께 사용하면 지정하는 색상만 불투명해진다.

• HSL and HSLA values
  hsl() 함수를 사용해 나타낸다.

Images

url() 함수 또는 <gradient>을 통해 가리키는 실제 이미지 파일이다.
최신에 나온 element() , image() , cross-fade() , image-set() 을 통해서도 나타내질 수 있다.
근데 아직 지원하는 브라우저가 거의 없다.

Position

배경 이미지와 같은 항목을 배치하는데 사용되는 2D 좌표 집합을 나타낸다.
top , left , right , bottom , center 와 같은 키워드를 사용하여 나타낸다.
또한 length 값과 같이 사용해서 박스의 top 및 left 가장자리에서의 offset을 나타낸다.

일반적으로 두 개의 값으로 구성된다.
첫 번째 값은 수평값이고 두 번째 값은 수직 값이다.
하나의 값만 지정하면 다른 축은 자동으로 center 로 간다.

Strings and identifiers

위의 top , bottom 과 같은 키워드 값은 식별자로 간주되며 문자열과는 다르다.
문자열 값이 적용되는 예제로는 다음과 같다.

Functions

마지막으로 살펴볼 값 유형은 함수로 이루어진 그룹이다.
위에서 이미 몇몇의 함수 값들을 살펴보았지만 기존 프로그래밍 언어에서와 유사한 함수로 calc() 가 있다.
이 함수는 CSS 내부에서 간단한 계산을 수행할 수 있는 기능을 제공한다.
설계시 정의 할 수 없는 값을 계산하고 런타임에 브라우저를 사용해야 하는 경우 특히 유용하다.

[참고] : MDN