<html>의 font-size
html의 폰트사이즈는 아래 값을 변경하지 않는이상 항상 고정으로 font-size: 100%로 정의되어져 있음. 실제로 표기되어 있지는 않지만 하기와 같은 상태이며 우리가 변경도 가능하다.
html { font-size: 100%; (16px) }
절대적인 값
px
px => 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위
px사용시 문제점
- 컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 고정된 값으로 유지되는 문제점이 있음.
- 사용자가 브라우저에게 폰트 사이즈 설정을 변경해도 바뀌지 않음.
상대적인 값
em
부모의 폰트사이즈를 기준으로 자식의 크기를 정함.(부모의 폰트 사이즈를 곱한 값)
현재 지정된 포인트 사이즈를 나타내는 단위 지금 폰즈사이즈를 나타내는 단위
설계된 폰트 패밀리에 상관없이, 즉 선택된 폰트에 상관없이 항상 고정된 폰트사이즈를 가지고 있음.
기본적으로 브라우저에서 html에 할당 되는 폰트사이즈는 16px
- 부모의 font-size : 8em;(128px) // 부모의 부모인 HTML의 폰트사이즈인 16px *8
- 자식의 font-size:0.5em (64px) //부모가 8em(128px)이므로 부모의 절반인 64px로 정의
- font-size이외의 요소(height,width 등등)들은 em을 사용하면 현재 font-size를 기준으로 em을 계산
ex) div {
font-size: 100px;
width: 1em; <-- font-size를 기준으로 em을 계산하므로 100px가됨.
}
rem
em에 r(root)이 더해진것 // 부모에 따라 font-size가 결정되는 것이 아닌
루트에 지정된 폰트사이즈에 따라 크기가 결정됨.
- 부모의 font-size : 8rem;(128px) // 가장위인 html의 font-size의 8배
- 자식의 font-size :0.5em (8px) // 가장위인 html의 font-size 0.5배
%
부모 요소의 상대적으로 크기가 계산됨.
부모의 width가 500px이고
자식의 width를 50%라고 한다면 자식의 width는 250px가 되는것.
자식의 자식의 width를 50%라고 하면 자식의 자식의 width는 125px가됨.
vw,vh
vw ==> viewport의 wihdh
100vw의 경우 viewport의 100%를 가진 width값이라고 보면됨
vh ==> viewport의 height
100vh의 경우 viewport의 100%를 가진 height값이라고 보면됨.
상대적인 값을 사용하는 기준
부모요소에 따라 사이즈가 변경되야한다면
--> % , em 사용
부모와는 상관없이 browser사이즈에 따라 사이즈가 변경되야 한다면
-->vh,vw,rem
요소의 너비와 높이에 따라 사이즈가 변경되야 한다면
-> % vh,vw
font-size에 따라 사이즈가 변경되어야 한다면
-> em rem
페이지 어디에서 사용해도 사이즈가 고정되어야 한다면 rem
부모요소에 따라 사이즈가 유동적으로 변경되야 한다면 em을 사용해야됨.
