overflow: scroll, auto, overlay

overflow: overlay라는 속성에 대해 새롭게 알게 되어서 다른 속성들까지 간단하게 정리해보았다.

 

기본 css 설정

기본 css 설정 이미지를 기준으로 설명하려고 한다.

overflow속성을 따로 지정한 것은 없다.

---

overflow: scroll

항상 스크롤바를 생성하기 때문에 내용의 변화에 따라 스크롤바를 생성하거나 사라지게 하지 않는다.

 

overflow: scroll 적용

 

콘텐츠 내용이 지정한 크기보다 넘치지 않은 경우에도 위의 사진과 같이 무조건 스크롤이 생성되는 것을 확인할 수 있다.

 

overflow: auto

컨텐츠가 요소 안에 들어간다면 visible과 같아 보이나 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 생성한다.

 

overflow: auto 적용 (height: 500px)

 

overflow: auto 적용 (height: 200px)

 

같은 overflow: auto를 적용했는데 height의 값에 따라서 스크롤이 자동으로 생성되는 것을 확인할 수 있다.

 

overflow: overlay

overflow: auto와 동일하게 동작하지만, 스크롤바가 공간을 차지하는 대신 컨텐츠 위에 위치한다.

 

overflow: overlay 적용

 

overflow: auto와 같이 스크롤이 생성되었지만 스크롤의 위치가 컨텐츠 위에 위치하는 것을 확인할 수 있다.

 

overlay속성은 Firefox, IE, Safari, Firefox for Android, Opera Android, Safari on IOS에서는 사용이 불가능하다. (https://developer.mozilla.org/ko/docs/Web/CSS/overflow)