웹 클라이언트를 개발하다 보면 콘텐츠의 양에 따라 스크롤바의 유무가 변경되는 경우가 존재한다. 이렇게 되는 경우 스크롤바의 유무에 따라 내부 content 사이즈가 변경되기 때문에 UI적으로 변화가 발생한다. 이는 사용자 입장에서 매우 보기가 안 좋다. 스크롤바가 존재하던 존재하지 않던 동일한 레이아웃을 보여줄 수 있다면 편리하지 않을까? 이 때 사용할 수 있는 CSS 속성이 바로 scrollbar-gutter이다.
scrollbar-gutter은 스크롤바가 할당될 위치를 미리 점지해줄 수 있다. scrollbar-gutter에 일반적으로 지정해줄 수 있는 값은 세 가지가 있다.
(1) auto
기본값이다. overflow가 scroll이거나 auto이면서 해당 element가 overflow중이라면, 즉 스크롤이 필요할 때에 한해서 스크롤바의 공간을 차지한다.
(2) stable
overflow가 auto, scroll, hidden 상태일 때 스크롤바가 존재하지 않더라도 그가 필요한 공간을 미리 할당해준다. 즉, 스크롤바의 필요 여부가 유동적인 경우에 scrollbar-gutter : stable;문장을 작성해주면 일관된 UI를 채택할 수 있다.
(3) both-edges
stable값과 함께 적용해줄 수 있으며 반대편 edge에도 똑같이 공간을 할당해주는 방법이다. (아직까지는 실용성 있게 사용해본 경험이 없다. 사용할 때에는 scrollbar-gutter : stable both-edges;와 같이 사용하면 된다.)
그 외에 지정해줄 수 있는 값은 inherit, initial, revert, revert-layer, unset이 있다.
'프론트엔드 기본개념 복습 > CSS' 카테고리의 다른 글
| [css, Scss] 텍스트 n줄까지만 출력하게 하기 (0) | 2022.04.14 |
|---|---|
| [CSS] clamp 함수로 간단한 반응형 구현하기 (0) | 2022.04.13 |
| [CSS] data-attribute를 값으로 사용하기 - data-color이 인식이 안 돼요! (0) | 2022.04.11 |
| [CSS] translate vs positioning (0) | 2022.04.09 |
| [CSS] currentColor (0) | 2022.04.09 |