CSS - Overflow 속성

Overflow

 

width * height를 갖는 요소 안에

content가 요소의 영역을 벗어났을 경우 사용함.

 

 

 

<value>

visible  |  auto  |  scroll  |  hidden

 

 

 

- default : visible

 

 

 

overflow-x, 

overflow-y 로 나눠서 설정 가능.

 

 

scroll	콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출
auto	콘텐츠가 넘칠 때만 스크롤바를 노출
hidden	콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냄. 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않음.

 

p {
     width: 12em;
     height: 6em;
     overflow: scroll; 
}

- width, height 설정해준 후, overflow 해주기

 

 

overflow.html

0.00MB

 

 

 

 

.box {
     width: 500px;
     height: 400px;
     overflow-x: auto;
     overflow-y: hidden;
   }

 

이런식으로 overflow-x와 overflow-y로 나눠서 설정 가능.

(좌우 스크롤만 생김)

 

---

REF > 

 

overflow - CSS: Cascading Style Sheets | MDN