CSS_4강_2_overflow 속성

열라뽕따히·2024년 3월 9일

CSS

목록 보기

17/20

overflow 속성

: 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때 내용이 보여짐을 제어하는 속성을 말함

visible : 넘친 부분을 자르지 않고 그대로 보여줌
hidden : 넘친 부분을 잘라내고 보이지 않게 함
scroll : 넘친 부분을 잘라내고, 스크롤바를 이용하여 보여지게 함
auto : 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 보여지게 함

=============================코드=============================

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
		.parent{
				width: 300px;
				height: 205px;
				border: 4px solid;
  				overflow: auto;   /* visible, hidden, scroll */
		}
		
		.parent .child {
				width: 100px;
				height: 100px;
				background-color: tomato;
				border: 4px solid red;
		}

</style>
</head>
<body>

		<div class="parent">
				<div class="child">1</div>
				<div class="child">2</div>
				<div class="child">3</div>
		</div>

</body>
</html>