[css] layout을 위한 css 단위 – dvh, svh, lvh
2024.01.31 / css, layout

이번에 새로운 css 단위 – dvh, svh, lvh를 써 보니 생각보다 너무 좋아서 팀 공유 차 정리해 본다.

그동안 레이아웃을 잡을 땐 보통 vw, vh 단위로 많이 잡는 편이긴 한데 vh가 상 하단의 툴바로 인해 높이가 종종 변화될 때 레이아웃이 꼬이게 된다.

특히 직업 특성상 S 브라우져를 많이 쓰는데, 그건 상단 바도 있고 하단 바도 존재하다가 스크롤 하면 상 · 하단 바가 동시에 없어지면서 높이가 확 달라져 버리게 된다. 확 달라지면 이리저리 꼬이는 레이아웃들… 거기다 다국어에 맞춰 개별 높이 수정한 아이들도 꼬이게 되면 지옥 문이 열린다…

그 동안은

layoutCss(){
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
}

스크립트로 가능한 한 처리해서 css에서 vh 사용했었는데…

이번에 css에서 새로운 단위를 알게 되어 써 보게 되었다.

css 단위 – dvh, svh, lvh

일단 적용 브라우저 확인은 : https://caniuse.com/?search=dvh 여기서~

위 이미지 출처 : https://blanche-toile.com/web/large-small-and-dynamic-viewport-units

단위별 차이점

svh : 주소 바 UI가 포함되지 않은 상태의 뷰 포인트 높이. 단 s 브라우져처럼 스크롤로 중간에 툴 바가 사라져도 처음 잡은 최소 높이를 유지함.

lvh: 주소 바가 없는 최대의 뷰 포인트 높이. 주소 바가 있더라도 바가 없는 총 화면 높이를 기준으로 함.

dvh: 현재 보이는 뷰 포인트 높이를 동적으로 가져옴. 즉 같은 100dvh라도 주소 바에 따라 높이 값이 다를 수 있음.

실제 사용 후기

실제 사용해 보니 개인적으로는 레이아웃 잡기엔 dvh를 쓰기가 가장 편했다.

이 사이트를 s 브라우저에서 봤을 때, 최초 화면은 상 하단에 바가 있어서 우측 메뉴 쪽에 보면 DIET까지 보이나, 스크롤을 시작하면 상 하단 바가 없어져서 높이가 길어진다. 기존에 vh로 했을 경우 복잡했는데 dvh로 하고 간단히 flex로 잡아주면 자동으로 정렬이 되는 모습이 보인다.