스크롤바

화면에 다 표시할 수 없을 정도로 콘텐츠가 길다면 세로 스크롤바가 생긴다. 그럼 세로 스크롤바의 폭 때문에 콘텐츠를 표시할 영역이 줄어들어 위 이미지처럼 레이아웃이 변형된다. 스크롤바가 생겨서 레이아웃이 변형되는 것을 방지하고 싶다면 scrollbar-gutter 속성을 사용하면 된다. scrollbar-gutter는 브라우저가 스크롤바 영역을 미리 확보하도록 하는 속성이다. 스크롤바 영역을 미리 확보했으므로 스크롤이 생겨도 레이아웃 변형이 없다. scrollbar-gutter: auto | stable && both-edges?.box { padding: 1rem; max-height: 220px; overflow-y: auto; scrollbar-gutter: stable; /* sc..