overflow

• 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

값

• visible : 기본값으로 생략가능, 넘친 내용을 그대로 보여줌
• hidden : 넘친 내용 부분을 숨겨줌(잘라냄)
• scroll : 넘친 내용 부분을 잘라내고 스크롤바가 생성
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

---

예시

<!-- html -->
<div class="parent">
  <div class="child"></div>
</div>

overflow : hidden;

/*css*/
.parent {
	width: 300px;
    height: 250px;
    background-color: royalblue;
    margin: 20px;
    overflow: hidden;
}

.child {
	width: 500px;
    height: 200px;
    background-color: pink;
}

overflow : scroll;

• 가로만 넘치는 경우에도 세로 스크롤이 생성됨
• x축, y축 스크롤바 생성

/*css*/
.parent {
	width: 300px;
    height: 250px;
    background-color: royalblue;
    margin: 20px;
    padding: 20px;
    overflow: scroll;
}

.child {
	width: 500px;
    height: 200px;
    background-color: pink;
}

overflow : auto;

• 가로만 넘치는 경우에서 가로 스크롤만 생성됨

/*css*/
.parent {
	width: 300px;
    height: 250px;
    background-color: royalblue;
    margin: 20px;
    padding: 20px;
    overflow: auto;
}

.child {
	width: 500px;
    height: 200px;
    background-color: pink;
}