CSS Units

오늘은 요소의 크기나 사이즈, 길이 등을 결정하는 Units에 대해 정리해보고자 한다.

Absolute length units

절대적 유닛은 cm부터 시작해서 px까지 다양한 것들이 있는데 이렇게 많은 유닛들을 다 사용하진 않는다. px를 제외한 유닛은 물리적인 세상에만 의미가 있기 때문에 css의 주된 목적인 스크린, 모니터 위에서 웹사이트를 구현할 때에는 대부분의 경우 px을 사용해서 css를 작성한다.

Pixels

px는 모니터에서 화면에 나타낼 수 있는 가장 작은 단위를 말한다.
절대적 유닛에선 px가 가장 많이 쓰이지만 컨테이너의 사이즈가 변경되어도 컨텐츠가 고정된 값 그대로 유지된다는 단점이 있다. 즉 반응형 웹사이트를 구현하기에 어려움이 있는데, 그래서 고정된 px보다는 %를 이용해서 부모의 비율로 컨텐츠를 표기하는 방식이 이용되고 있다.

Relative length units

상대적 유닛은 em부터 시작해서 다양한 유닛들이 존재하는데 현업에선 반복적으로 쓰는 유닛이 정해져있다.

em

타이포그래피에서 현재의 지정된 포인트 사이즈를 나타내는 단위이다.
선택된 폰트 사이즈에 상관없이 항상 고정된 폰트 사이즈를 가지고 있다.
em은 부모 요소의 상대적으로 크기가 계산된다.

기본적으로 브라우저에서 html에 할당되는 폰트 사이즈는 16px인데, parent에 8em이란 것은 parent의 부모 요소인 html의 16px의 8배가 곱해진 값이다. child는 부모인 parent의 값에 0.5em을 곱한 값이기 때문에 64px이 브라우저에 표기되어진다.

rem

em과 비슷하지만 부모에 따라 사이즈가 계산 되어지는 것이 아니라 root에 지정된 폰트 사이즈에 따라서 크기가 결정되는 유닛이다.

parent는 root요소인 html에서 기본적으로 지정된 16px의 8배가 곱해진 128px이 계산되고, child는 최고 root인 html의 16px의 0.5배가 곱해진 8px가 계산된다.

viewport related

• vw - viewport width ex) 50vw로 작성할시 즉 브라우저의 너비의 50%를 사용한다.
• vh - viewport height

%

부모 요소에 상대적으로 사이즈가 계산된다.