Absoulte length units
pixels (px): 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위
폰트 사이즈를 px로 쓰게 되면 화면에 고정이 된다. %로 width 지정해주면 컨텐츠가 유동적으로 변한다.
Relative length units
1.em
em: 지금 폰트사이즈를 나타내는 단위 (relative to parent element)
font-family에 따라 사용자에게 보여지는 text크기는 달라질 수 있다. em은 선택된 font-family에 상관없이 항상 고정된 폰트 사이즈를 가진다.
.parent{
font-size:8em;
.child{
font-size:0.5em;
}
}
기본적으로 브라우저에서 HTML에 할당되는 font-size는 16px이다. 8em(16px8=128px), 0.5em(128px0.5=64px)
em은 부모의 font-size를 곱한 값으로 계산이 된다.(부모요소에 상대적으로 결정이 됨)
2.rem
rem: root에 지정된 폰트 사이즈에 따라서 크기가 결정되는 것
relative to root element
위 예제코드로 살펴보면, 8rem(16px8=128px), 0.5rem(16px0.5=8px)
rem은 root요소에 상대적으로 크기가 결정된다.
3.vw
50vw:viewport width 즉 브라우저 너비의 반을 쓰겠다고 지정하는 것
4.vh
vh는 viewport height을 의미한다.
5.%
부모요소에 상대적으로 크기가 계산된다.
부모요소 사이즈에 따라 사이즈가 변경이 되야 한다면? %,em 사용
부모와는 상관없이 브라우저 사이즈에 따라 반응해야 한다면? viewport, rem 사용
요소의 너비와 높이에 따라 사이즈가 변경되야 한다면? %,viewport
font사이즈에 따라 사이즈가 변경되야 한다면? em,rem
.title{
font-size:1.5rem;
padding:1em;
}
.contents{
font-size:1.125rem;
padding:1em;
}위처럼 이렇게 작성하면 반응적으로 보이게 할 수 있다.
