CSS 프로퍼티의 값은 특정 단위를 가지는 경우가 많다.

1. 키워드

키워드는 단위가 없는, 말그대로 키워드 형태의 프로퍼티 값을 말한다.

• 예를 들어 display 프로퍼티 값으로는 block, inline, inline-block, none과 같은 키워드들이 올 수 있다.

2. 크기 단위

CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다.

• px는 절대값이고, em, %는 상대값인 특징이 있다.
• 대부분의 브라우저의 기본 폰트 사이즈 값은 16px, 1em, 100%이다.
• 프로퍼티 값이 0인 경우는 단위를 생략할 수 있다.

이러한 크기 단위들은 주로 요소나 이미지의 크기를 지정하는 값에 사용된다.

2.1 px

• px는 픽셀을 의미하며, 1px는 화소 1개의 크기를 의미한다.
  • 22인치 LCD 모니터의 경우 해상도가 1680 * 1050 인데 이것은 가로에 1680개의 픽셀, 세로에 1050개의 픽셀을 가진다는 의미이다
  • 즉, 픽셀은 디바이스의 해상도(resolution)에 따라 상대적인 크기를 갖는다. 즉 실제 픽셀(화소)의 크기는 해상도별로 제각각이기 때문에 대부분의 브라우저는 1px를 실제 화소의 크기가 아니라 1/96인치의 절대 단위로 인식한다고 한다.

2.2 %

• %는 백분율 단위의 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다.

2.3 em

• em은 요소에 지정된 폰트 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. 1em이 100%라고 생각하면 된다.
• 오해하지 말아야 할 사실: em이 폰트 크기에 대한 상대 크기이지만, 폰트의 크기만을 지정하는데 쓰는 단위는 아니다. 다른 크기 단위와 마찬가지로 크기 값에 두루두루 쓰일 수 있다.
• 또한 주의할 점으로 중첩된 자식요소에 em을 지정하면 모든 자식요소의 사이즈에 영향을 미치기 때문에 주의하여야 한다. (본문 예시 참고) https://poiemaweb.com/css3-units

2.4 rem

• 앞서 em의 기준은 상속의 영향으로(즉 부모의 크기를 기준으로) 바뀔 수 있다고 했다.