css 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보자.
css 작업을 할 때 주로 픽셀(px) 단위를 사용한다.
하지만 고정 단위인 px보다 유동 단위인 %를 사용하면 좀 더 유연한 코드를 만들 수 있다.
% 이외에도 유연한 값을 가지는 단위가 몇 개 있다.
1️⃣ vw / vh
1. vw
= Viewport Width
뷰포트를 기준으로 한 단위이다. 보여지는 영역에서 얼만큼 차지할 것인지를 지정하는 단위이다.
1vw = 뷰포트 너비의 1%
예를들어, 500px 너비의 뷰포트일 때 1vw = 5px이다.
따라서 속성만 사용해도 브라우저 크기에 반응해 알아서 바뀌게 한다.
2. vh
= Viewport Height
1vh = 뷰포트 높이의 1%
예를들어, 800px 높이의 뷰포트에서 1vh = 8px이다.
활용법
vw, vh는 뷰포트 영역 전체를 차지하게 하거나, 일부분만 차지하게 하는데 유용하게 쓸 수 있다.
100vw, 100vh를 쓰면 너비와 높이를 꽉꽉 채울 수 있다.
창 크기를 바꾸거나 회전시켜도 상관이 없다.
calc() 와 결합하면 더 좋다!
header 높이가 50px이고 컨텐츠 영역 높이를 헤더를 제외한 나머지 높이 전체로 만들고 싶다면, height: calc(100vh-50px)을 지정해주면 된다.
100% 과 100vh는 무슨 차이죠?
vh는 뷰포트를 기준으로 계산한 단위이고
%는 부모 요소를 기준으로 계산한다는 점에서 차이가 있다.
예를 들어, 뷰포트 높이를 꽉 채우는 섹션이 있는 페이지를 만든다고 가정했을 때
height: 100%를 지정하려면 부모에게도 height:100%을 지정해야 한다.
그래야 상속받아서 쓸 수 있다.
반면, height: 100vh를 지정하면 부모의 높이와 무관하게 전체 영역을 차지한다.
vh는 부모가 아닌, 뷰포트를 기준으로 한 단위이기 때문이다.
폰트 사이즈나 여백 등에 다양한 속성에 쓸 수 있다.
2️⃣ vmin / vmax
vmin과 vmax 또한 viewport를 기준으로 하는 단위이다.
vmin : vw과 vh 중 더 작은 것을 적용
vmax : vw과 vh 중 더 큰 것을 적용
예를 들어, 1200px * 600px 뷰포트가 있다고 가정해보자.
1vw = 12px, 1vh = 6px 이 된다.
따라서 1vmin = 6px으로 계산되고
1max = 12px로 계산된다.
vmin 과 vmax는 어디에 사용되는거야?
언제든 화면에 보이는 요소와 언제든 화면을 꽉 채우는 요소를 쉽게 만들 수 있다.
예를 들어, 80vw * 80vw로 지정한 요소가 있다고 가정하다.
뷰포트가 1000px 1000px이면 요소의 실제 크기는 800px 800px 이다.
여기서 vw는 너비에만 반응하고, 높이에는 반응하지 않는다.
따라서 높이가 500px로 줄어도 vw는 반응하지 안아 요소의 크기는 변하지 않고
높이가 반절로 잘려보인다.
만약 가로 세로 값이 80vw가 아니고 80vmin인 요소인 경우
높이가 1000px에서 500px로 줄어들어도
둘 중 작은 값을 택하기 때문에 화면에서 잘리지 않고 표현된다.
3️⃣ em / rem
em보다 rem의 계산이 더 쉽기 때문에 rem을 주로 사용한다.
1. em
em 역시 동적 단위이다.
이 단위는 폰트 크기에 영향을 받는다.
1em = 부모의 폰트 크기
예를 들어, 부모의 폰트 크기가 16px일 때, 1em = 16px이다.
2. rem
em과 다른 점이 있다면 rem은 relative to the root element이다.
여기서 root element는 요소를 가리킨다.
1rem = html 요소에 지정된 폰트 크기
preference
