CSS overflow속성은 콘텐츠가 너무 커서 영역에 적합하지 않게 되는 것을 제어합니다.

CSS Overflow

overflow속성은 요소의 내용이 너무 커서 지정한 영역에 들어가지 않을 때 내용을 클립할 지 또는 스크롤 막대를 추가할 지를 지정합니다.

overflow속성의 값은 다음과 같습니다.

• visible - 기본값. 오버플로가 짤리지 않습니다. 그것은 요소의 상자 밖에 랜더링됩니다.
  
• hidden - 오버플로가 짤리고 나머지 내용은 보이지 않습니다.
  
• scroll - 오버플로가 잘리지만 스크롤바가 추가되어 나머지 내용을 볼 수 있습니다.
  
• auto - 오버플로가 잘린 경우 스크롤바를 추가하여 나머지 콘텐츠를 확인해야 합니다.
  

** overflow속성은 지정된 높이의 블록요소에 대해서만 작동합니다.

overflow : visible

오버플로는 visible이 기본값이며 잘리지 않고 요소상자 밖으로 랜더링되는 것을 의미합니다.

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}

overflow : hidden

hidden값을 사용하면 오버플로가 잘리고 나머지 내용은 숨겨집니다.

div {
    overflow: hidden;
}

overflow : scroll

scroll값을 설정하면 오버플로가 잘리고 스크롤바가 추가되어 상자 안을 스크롤합니다. 스크롤 막대를 가로 및 세로로 추가합니다.

div {
    overflow: scroll;
}

overflow : auto

auto값은 scroll값과 유사합니다. 필요할 때만 스크롤 막대를 추가합니다.

div {
    overflow: auto;
}

overflow-x 와 overflow-y

overflow-x와 overflow-y속성은 수평 또는 수직의 콘텐츠 플로우를 변경할 지 여부를 지정합니다.

div {
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: scroll; /* Add vertical scrollbar */
}