units, containing block 등에 관해 알아보자.

단위에는 절대 단위와 상대 단위가 있다.

절대 길이 단위

• px이 대표적이다

상대 길이 단위

• '무엇을 기준으로 삼는지'가 중요하다.
• vw, vh, vmin, vmax: viewport가 기준이다.
• em, rem: em은 상속된 현재 폰트 크기가 기준이고, rem은 html의 font-size가 기준이다. (하지만 폰트에만 국한된 단위가 아니다.)
• %: position 속성에 따라 기준이 달라진다.

vw, vh, vmin, vmax

브라우저 크기를 기준으로 삼는다.
예를 들어 vw: 50%으로 하면 브라우저 화면 너비의 50%만 채운다.

em, rem

em

'엠'이라고 읽는다. 대문자 M의 너비와 길이를 기준으로 삼아 만든 단위라 em이라는 이름이 되었다.

em은 상속된 현재 폰트 크기가 기준이다.

예를 들어 div1 > div2 > div3로 부모-자식 관계라고 가정해보자.

div1의 font-size가 16px이다.
div2의 font-size가 1.25em이면 => 20px이다.(20 = 16 * 1.25)
div3의 font-size가 1.5em이면 => 30px이다.(30 = 20 * 1.5)

rem

'렘'이라고 읽는다. root-em을 줄여서 rem이라는 이름이 되었다.

rem은 html의 font-size가 기준이다.

html의 font-size가 10px이라고 가정하면, 어느 요소이든 1.5rem이면 15px이 된다.
(html의 font-size를 생략시 브라우저 기본값에 따르며 이는 일반적으로 16px이다.)

(보다 자세한 내용은 아래 링크를 참고하라.
https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984)

%

position 속성을 뭘로 지정했는지에 따라 기준이 되는 containing block이 달라진다.

• position: fixed: viewport 기준
• position: absolute: position(static 제외)이 지정된 조상 요소의 content + padding이 기준
• position: static 혹은 position: relative: 블록 레벨인 조상 요소의 content가 기준