vw, vh, vmax, vmin, rem, em, max-width, min-width 차이
쓸때마다 그냥 어렴풋이 알고 있는 지식으로 감 아닌 감으로 사용해서 아예 제대로 정리해볼 시간을 가졌다.
vw & vh
vw
브라우저 너비 값이 100px일때 1vw는 1px이다. (100분의 1)
퍼센트(%)로 계산할때 이해가 더 쉽다.
ex) viewport의 너비가 1000px이고 컨텐츠 요소가 80vw라면 1000px의 viewport에서 80%를 차지한다는 뜻이고 즉 요소의 너비는 800px이다.
vh
브라우저 높이 값이 100px일때 1vh는 1px이다. (100분의 1)
vw와 동일하게,
ex) viewport의 높이가 1000px이고 컨텐츠 요소가 80vh라면 1000px의 viewport에서 80%를 차지한다는 뜻이고 즉 요소의 높이는 800px이다.
width에 vh를, height에 vw를 쓸 수 있다.
퍼센트(%)는 부모 기준으로 사이즈가 변동되는 것과 달리, vw & vh는 브라우저 화면 전체를 기준으로 사이즈가 변동된다.
스크롤바를 포함한 화면의 전체 길이를 반환한다.
vmax & vmin
viewport의 최대 너비, 최소 너비
vw, vh와 비슷한듯 하지만 은근히(?) 다르다.
viewport가 어떻든 화면을 꽉 차게 해준다. (해당 요소의 스크린 사이즈가 어떻든 간에 화면에 꼭 보이도록)
vmax
브라우저의 너비와 높이를 비교 후 더 큰 값 선택
ex) width: 50vmax => 브라우저의 너비와 높이 사이즈에서 가장 작은 사이즈의 50% 차지
vmin
브라우저의 너비와 높이를 비교 후 더 작은 값 선택
ex) width: 50vmin => 브라우저의 너비와 높이 사이즈에서 가장 큰 사이즈의 50% 차지
ex)
See the Pen Untitled by Kang HeeWon (@kh2wone) on CodePen.
위의 코드를 참고해서 계속 적용해보면서 익혀보아도 좋다.
추가로 예를 들면 1000px * 500px의 viewport가 있다고 하자.
vmin은 둘 중에 작은 것(500px => 500/100 = 5px), vmax는 둘 중에 큰 것(1000px => 1000/100 = 10px)을 선택할 것이다.
그럼 1vmin = 5px, 1vmax = 10px이다.
viewport 사이즈의 너비와 높이에 따라 사이즈를 비교해서 둘 중에 가장 큰 값 혹은 가장 작은 값을 통해 알아서 적용한다는 것을 알아두자.
rem
r은 root라는 뜻으로 최상위 요소의 사이즈에 영향을 받는다.
예를 들어서 최상위 요소의 font-size가 16px이라면 특정 요소의 1rem은 16px이다.
em
em은 부모 요소의 사이즈에 영향을 받는다.
예를 들어서 부모 요소의 font-size가 14px이라면 특정 요소의 1em은 14px이 된다.
➕max-width & min-width 차이를 알고 싶다면?
참고하면 좋은 사이트
'WEB > CSS' 카테고리의 다른 글
[CSS] westagram - inline 속성에서 발생하는 여백에 대해 (0) | 2021.12.11 |
---|---|
[CSS] display inline, block, inline-block (0) | 2021.11.30 |
[CSS] position(relative, absolute, fixed)에 대한 간단 정리 (0) | 2021.11.30 |