CSS 속성 - 넘침제어(overflow)

넘침 제어 (overflow)란?

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

1, visible : 넘친 내용을 그대로 보여줌 —> 기본값!

2, hidden : 넘친 내용을 잘라냄

3, auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤 바 생성

일단 코드로 보면서 이해를 해보자

1, html 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./overflow.css" />
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

위의 코드를 보면

div태그를 이용하여 box 2개를 만들어주었고

이 둘은 부모 자식 관계이다!

2, CSS 코드

.parent {
  width: 200px;
  height: 150px;
  background-color: royalblue;
  margin: 20px;
}

.child {
  height: 100px;
  background-color: orange;
}

위의 코드를 보면 child부분에 width를 주지 않았는데