1. px
절대 단위이며 직관적이고 사용하기 쉽다. 하지만 반응형 웹을 고려하면 다양한 상대단위를 잘 사용하는 것이 유리하다.
2. %
부모 요소를 기준으로하는 백분율 단위.
반응형으로 어떻게 쓰일까?
-
주로 요소가 간단하고 가로로 반응형을 쉽게 만드는 방법은 당연하게도 width : 100% 를 사용하면 되고 여기서 여러가지 응용을 하면 된다.
-
ex) section의 요소가 적지만 디자인상 section이 일정 width가 유지시키며 section을 가운데에 배치해야하는 경우
width: 고정값px ;
max-width: calc(100% - (margin)px);
margin : auto;를 주게 되면 웹페이지가 고정값px 기준으로 ~px가 반응형으로 줄어들었을 경우 width : 100%를 준 것 처럼 요소가 줄어들게 된다.
3. vw, vh
뷰포트의 width, height를 기준으로 하는 단위.
1vw = 화면의 1%이다.
html 요소가 너무 적지만 화면을 꽉 채우고 싶을 때
min-height : 100vh을 사용해주면 %와 달리 부모에 의존하지 않기 때문에 쉽게 요소들을 화면에 꽉 채워서 보여줄 수 있다.
4. em
부모 요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 단위.
요소 안에 가로로 img 아이콘과 글자를 넣고 싶을 때
img 태그를 이용해서 flex를 사용하거나 등등 방법은 여러가지지만 background-image로 이미지를 넣을 때는 text의 padding, 이미지의 size 를 em으로 설정해주면 더 직관적이다.
5. rem
root em.
최상의 요소 <html>의 글자 크기를 기준으로 하는 배수 단위.
왜 쓸까?
제작한 웹의 폰트 사이즈의 수정이 필요하거나 요청이 들어올 때 rem으로 폰트 사이즈를 설정해놓았다면 기준 폰트 사이즈를 변경하는 것으로 전체가 바뀌므로 유지보수에 용이하기 때문.
폰트는 rem, 폰트의 크기에 따라 변경되야하는 값들은 em으로!
