overflow 속성은 컨텐츠가 너무 커서 영역에 들어갈 수 없는 경우를 제어한다.
다음과 같은 값을 가진다.
visible : 기본값. 넘치는 부분이 잘리지 않는다. 넘치는 부분을 요소의 박스 바깥에 렌더링한다.
hidden : 넘치는 부분이 잘린다. 넘치는 부분이 보이지 않는다.
scroll : 넘치는 부분이 잘린다. 넘치는 부분을 볼 수 있게 스크롤바가 생긴다.
auto : 넘치는 부분이 잘린다면 남은 부분을 볼 수 있게 스크롤바가 추가된다.
overflow 속성은 높이가 지정된 블럭 요소에서만 작동한다.
overflow : visible
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_visible
overflow : hidden
div {
overflow: hidden;
}
https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_hidden
overflow : scroll
div {
overflow: scroll;
}
https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_scroll
overflow : auto
div {
overflow: auto;
}
https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_auto
overflow-x and overflow-y
overflow-x : 컨텐츠의 좌우 모서리에 뭘 할지 지정한다.
overflow-y : 컨텐츠의 상하 모서리에 뭘 할지 지정한다.
이 경우 수평 스크롤바는 숨겨지고, 수직 스크롤 바는 추가된다.
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_xy