CSS 단위

절대값 absolute와 상대값 rerative

✅ 절대값의 대표적인 유닛, px

1) px

• 화면에 나타낼 수 있는 가장 작은 단위이자
  가장 많이 쓰이는 단위
  
  but, px의 단점이 있는데

• 컨테이너에 사이즈가 변경되어도 컨텐츠가 고정된 값으로 유지

• 사용자가 브라우저에서 폰트 사이즈 설정을 바꿔도 반응하지 않음.

그래서 대부분 크기를 지정할 땐 고정값인 px보다
유동적인 %를 이용한다.

body{
width : 80%;
}

✅ 상대값의 대표적 유닛

1) em

• 타이포그래피에서 현재 지정된 포인트 사이즈를 나타내는 단위
• 선택된 폰트 종류에 상관없이 항상 고정된 폰트 사이즈를 가짐
• 부모의 폰트 사이즈에 상대적으로 자식의 폰트 사이즈가 계산된다

div{
background-color:#ffffff;
}

.parent{
font-size : 3em;
//기본 단위가 16px = 1em 이므로 부모의 폰트 사이즈는 16 * 3 = 48px
}
.child{
font-size : 0.5em;
//부모의 폰트 사이즈가 기본 값이 되어 48 * 0.5 = 24px
}

2) rem

• root에 지정된 폰트 사이즈에 따라서 크기가 결정되는 단위
• 브라우저 기본값을 따르므로 부모의 값이 자식에게 적용되지 않는다

3) vw,vh

• viewport(화면상 보여지는 부분)의 너비와 높이 단위

4) %

• 부모 요소에 자식 요소가 상대적으로 크기가 계산되어진다
• em 과 비슷한 느낌