html & css/개념
Overflow
by Doo Hee
2023. 11. 18.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
white-space: nowrap;
/* 무조건 한줄 */
}
</style>
</head>
<body>
<!-- overflow -->
<!-- html 자식 요소가 부모 요소보다 콘텐츠의 크기가 -->
<!-- 더 클 경우 자식 요소를 어떻게 보여줄지를 결정 -->
<!-- overflow-x, overflow-y 동시에 사용시 overflow -->
<!-- overflow:scroll -> 인터넷 익스플로우 같은 브라우저는 콘텐츠의 길이, 높이에 상관없이 무조건 스크롤 바가 생긴다. -->
<!-- overflow:auto -> 콘텐츠의 길이, 높이가 부모 요소를 벗어나지 않는다면 스크롤바가 안보이고, 벗어난 스크롤 바가 자동으로 생김. -->
<div
style="
height: 200px;
width: 200px;
border: 3px solid green;
overflow-y: scroll;
"
>
<p>
콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠
콘텐츠콘텐츠콘텐츠콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠콘텐츠콘텐츠콘텐츠
콘텐츠 콘텐츠 콘텐츠 콘텐츠콘텐츠콘텐츠 콘텐츠 콘텐츠 콘텐츠
콘텐츠콘텐츠콘텐츠츠콘텐츠
</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
</div>
</body>
</html>
