css overflow 속성

CSS overflow 속성은 요소의 내용이 너무 커서 요소의 크기를 초과할 때, 어떻게 처리할지를 정의하는 속성입니다.

overflow 속성은 다음과 같은 값들을 가질 수 있습니다.

visible: 기본값입니다. 내용이 요소의 경계를 초과하더라도, 숨기지 않고 보여줍니다.

hidden: 요소의 내용이 요소의 경계를 넘어가면, 숨겨집니다.

scroll: 요소 내부에 스크롤바를 추가합니다. 내용이 요소의 경계를 초과하면, 스크롤바를 사용해서 볼 수 있습니다.

auto: 요소 내부에 스크롤바를 추가합니다. 내용이 요소의 경계를 초과하면, 스크롤바를 사용해서 볼 수 있습니다. 필요한 경우에만 스크롤바가 나타나며, 내용이 요소의 경계를 초과하지 않으면, 스크롤바가 나타나지 않습니다.

예를 들어, 다음과 같은 CSS 코드는 div 요소의 내용이 200px 이상일 때 스크롤바를 추가합니다.

div {
  width: 200px;
  height: 100px;
  overflow: auto;
}