유투브 알고리즘이 인도해줘서 관련 강의를 보고 정리.
CSS에서 크기를 설정할 수 있는 단위에는 절대적인 값(Absolute)과 상대적인 값(Relative)이 있다.
절대적인 값은 지정한 사이즈를 변동시킬 수 없는 것이며, px을 예로 들 수 있다.
상대적인 값은 브라우저의 크기, 설정 등을 통해 변동되는 것이며 em, rem, vw, vh, % 등을 예로 들 수 있다.
절대적인 값
px
모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위.
컨테이너의 사이즈가 변경되어도 컨텐츠가 고정된 값으로 유지된다. 폰트 값으로 줄 경우, 사용자가 브라우저에서 폰트 사이즈 설정을 해도 반응하지 않는다.
상대적인 값
em
타이포그래피에서 현재의 지정된 포인트 사이즈를 나타내는 단위(현재의 폰트 사이즈를 나타내는 단위)
선택된 폰트 패밀리에 상관없이 항상 고정된 폰트 사이즈를 지닌다.
부모의 폰트 사이즈에 따라 상대적으로 크기가 계산 된다.
기본적으로 브라우저에서 html에 할당하는 폰트 사이즈 = 16px
parent 요소의 폰트에 8em 을 줄 경우, 해당 parent 요소에는 16 8 (128)px 의 사이즈가 적용된다.
해당 parent의 child에 0.5em을 주면, child의 사이즈는 부모 요소의 0.5배, 128 0.5, 즉 64px 이 된다.
부모의 폰트 사이즈를 곱한 값으로 계산.
rem
em과 비슷하지만 기준이 되는 값이 부모가 아니라 루트에 지정된 사이즈가 된다.
parent 요소의 폰트에 8rem을 줄 경우 em과 같이 128px이 적용, 그러나 child 요소에 0.5rem을 주면 해당 요소는 부모의 사이즈인 128px이 아니라 root의 사이즈인 16px을 기준으로 정해지므로 8px이 된다.
vw / vh
vw와 vh는 %와 비슷하다.
단 % 는 부모 요소를 기준으로 비율이 적용되지만, vw와 vh는 부모 요소를 무시하고 브라우저의 가로 세로 크기를 기준으로 비율이 적용된다.
