[Frontend/CSS] 웹 화면을 대시보드화면처럼 꽉차게 만들기

Viewport 단위

 

단위	설명
vh	viewport의 높이에 따라 달라지는 단위입니다. (1vh = Viewport Height x 1%)
vw	viewport의 너비에 따라 달라지는 단위입니다. (1vw = Viewport Width x 1%)

 

---

보이는 화면에 맞추는 CSS 코드

세로 사이즈가 100vh로 했다고 해서, 가로 사이즈를 100vw 를 사용하면 우측에 스크롤이 없다고 가정하고 너비를 측정하기 때문에 화면보다 더 넓어지는 현상이 발생합니다. 따라서 100%를 사용해야만 스크롤을 고려하면서 가로사이즈를 꽉 차게 맞출 수 있습니다.

 

See the Pen 보이는 화면에 맞추기 by Hongjiseong (@hongjiseong) on CodePen.