내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정. > visible : 영역을 벗어난 부분을 표시.(기본) hidden : 영역을 벗어난 부분을 잘라내서 보이지 않게 함. scroll : 영역을 벗어난 부분이 없어도 스크롤을 표시. auto : 영역을 벗어난 부분이 있을 때 스크롤을 표시. 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정. > visible : 영역을 벗어난 부분을 표시.(기본) hidden : 영역을 벗어난 부분을 잘라내서 보이지 않게 함. scroll : 영역을 벗어난 부분이"> 08-04_overflow

overflow

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08-04_overflow</title>
<!--
	# overflow
	- 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정.
	  > visible : 영역을 벗어난 부분을 표시.(기본)
	    hidden  : 영역을 벗어난 부분을 잘라내서 보이지 않게 함.
	    scroll  : 영역을 벗어난 부분이 없어도 스크롤을 표시.
	    auto	: 영역을 벗어난 부분이 있을 때 스크롤을 표시.
-->
<style type="text/css">
* { margin: 0; padding: 0; }

div {
	width: 200px;
	height: 200px;
	background-color: silver;
	margin-right: 10px;
	display: inline-block;
}

.visible { overflow: visible; }
.hidden { overflow: hidden; }
.scroll { overflow: scroll; }
.auto { overflow: auto; }

</style>
</head>
<body>
	<h1>overflow</h1>
	<br>
	<div class="visible">
		<p>
		내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정.
	    > visible : 영역을 벗어난 부분을 표시.(기본)
	      hidden  : 영역을 벗어난 부분을 잘라내서 보이지 않게 함.
	      scroll  : 영역을 벗어난 부분이 없어도 스크롤을 표시.
	      auto	: 영역을 벗어난 부분이 있을 때 스크롤을 표시.
		내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정.
	    > visible : 영역을 벗어난 부분을 표시.(기본)
	      hidden  : 영역을 벗어난 부분을 잘라내서 보이지 않게 함.
	      scroll  : 영역을 벗어난 부분이 없어도 스크롤을 표시.
	      auto	: 영역을 벗어난 부분이 있을 때 스크롤을 표시.
	    </p>
	</div>
	<div class="hidden">
		<p>
		내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정.
	    > visible : 영역을 벗어난 부분을 표시.(기본)
	      hidden  : 영역을 벗어난 부분을 잘라내서 보이지 않게 함.
	      scroll  : 영역을 벗어난 부분이 없어도 스크롤을 표시.
	      auto	: 영역을 벗어난 부분이 있을 때 스크롤을 표시.
		내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정.
	    > visible : 영역을 벗어난 부분을 표시.(기본)
	      hidden  : 영역을 벗어난 부분을 잘라내서 보이지 않게 함.
	      scroll  : 영역을 벗어난 부분이 없어도 스크롤을 표시.
	      auto	: 영역을 벗어난 부분이 있을 때 스크롤을 표시.
	    </p>
	</div>
	<div class="scroll">
		<p>
		내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정.
	    > visible : 영역을 벗어난 부분을 표시.(기본)
	      hidden  : 영역을 벗어난 부분을 잘라내서 보이지 않게 함.
	      scroll  : 영역을 벗어난 부분이 없어도 스크롤을 표시.
	      auto	: 영역을 벗어난 부분이 있을 때 스크롤을 표시.
		내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정.
	    > visible : 영역을 벗어난 부분을 표시.(기본)
	      hidden  : 영역을 벗어난 부분을 잘라내서 보이지 않게 함.
	      scroll  : 영역을 벗어난 부분이 없어도 스크롤을 표시.
	      auto	: 영역을 벗어난 부분이 있을 때 스크롤을 표시.
	    </p>
	</div>
	<div class="auto">
		<p>
		내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정.
	    > visible : 영역을 벗어난 부분을 표시.(기본)
	      hidden  : 영역을 벗어난 부분을 잘라내서 보이지 않게 함.
	      scroll  : 영역을 벗어난 부분이 없어도 스크롤을 표시.
	      auto	: 영역을 벗어난 부분이 있을 때 스크롤을 표시.
		내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 결정.
	    > visible : 영역을 벗어난 부분을 표시.(기본)
	      hidden  : 영역을 벗어난 부분을 잘라내서 보이지 않게 함.
	      scroll  : 영역을 벗어난 부분이 없어도 스크롤을 표시.
	      auto	: 영역을 벗어난 부분이 있을 때 스크롤을 표시.
	    </p>
	</div>
</body>
</html>