상대 길이 단위
- 상대 길이 단위는 다른 요소(상위 요소의 글꼴 크기 또는 viewport 크기)와 관련이 있다.
- 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다.
- 상대 단위를 사용하면, 디바이스의 크기에 따라 레이아웃이 깨지는 걸 방지할 수 있다.
%, vw, vh
%, vw, vh 는 수치를 입력해야하는 속성에 대부분 사용가능하다.
(vw 는 font-size 단위로도 많이 사용.)
1. %
부모 요소의 값을 기준으로 설정한다.
- 즉, 부모 요소의 width 값이 100px이고 자식 요소의 width 값이 50% 라면, 자식 요소의 width 값은 50px이 된다.
2. vw, vh
viewport(=screen)의 가로 세로 값을 기준으로 사용하는 상대 단위 값.
- 화면 가로 값과 세로 값의 100분의 1 단위
- 부모와 상관없이 viewport를 기준으로 값을 설정한다.
- font-size에 많이 사용한다.
+ 사용하는 디바이스 크기의 차이가 너무 클 때, media query 사용
- 상대 단위를 사용해도 디바이스 크기의 차이가 너무 큰 경우, 레이아웃이 깨질 수 있는데 이럴 때는 media query를 사용하여 screen의 min-width와 max-width를 지정한 후, screen size에 맞게 css를 수정한다.
- media query - velog
