CSS overflow 사용법

 CSS의 `overflow` 속성은 요소의 내용이 컨테이너를 넘어갈 때 어떻게 다룰지를 지정하는 데 사용됩니다. 이 속성은 다양한 값을 가지며, 요소 내용이 컨테이너를 넘어가는 경우 스크롤바를 표시하거나 요소를 잘라내거나 숨기도록 할 수 있습니다. 아래에서 `overflow` 속성의 사용법을 자세히 알려드리겠습니다.

`overflow` 속성의 값:
1. `visible`: 기본값으로, 요소의 내용이 컨테이너를 넘어가더라도 가려지지 않고, 컨테이너 외부로 렌더링됩니다.
2. `hidden`: 컨테이너 외부로 넘어가는 내용을 잘라내고 숨깁니다.
3. `scroll`: 컨테이너가 내용을 포함하지 못할 때 스크롤바를 표시하며, 사용자는 스크롤바를 사용하여 내용을 볼 수 있습니다.
4. `auto`: 내용이 컨테이너를 넘어갈 때만 스크롤바를 표시합니다. 내용이 컨테이너 내에 모두 들어갈 경우 스크롤바가 표시되지 않습니다.



/* 컨테이너를 잘라내고 내용을 숨김 */
.overflow-hidden {
    overflow: hidden;
}

/* 스크롤바를 표시하여 내용을 스크롤 가능하게 함 */
.overflow-scroll {
    overflow: scroll;
}

/* 내용이 컨테이너를 넘어갈 때만 스크롤바를 표시 */
.overflow-auto {
    overflow: auto;
}

/* 기본값: 내용이 컨테이너를 넘어가더라도 가려지지 않음 */
/* 다음과 같이 설정하지 않아도 됩니다. */
.overflow-visible {
    overflow: visible;
}

반응형

예를 들어, 다음은 `overflow` 속성을 사용하여 내용이 넘칠 때 스크롤바가 표시되도록 하는 예시입니다:


<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</div>


.container {
    width: 200px;
    height: 100px;
    overflow: auto;
}


이렇게 하면 컨테이너 내용이 컨테이너를 넘어갈 때만 스크롤바가 표시되어 사용자가 내용을 스크롤할 수 있게 됩니다.