![[2021/12/20]국비지원 CSS3 2-(3) overflow](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FYfggw%2Fbtrr2sJNJ0Q%2FAAAAAAAAAAAAAAAAAAAAAP9tdVV57qvws3owdbSa5fxoPWTqXoZiFiSPIWF2qTPj%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DSmAnwYcVRXmtJM%252BxXKdL1lRqjSk%253D)
overflow : 일정한 박스, 영역 안의 내용이 그 바깥까지 과하게(over) 넘치는(flow) 것에 대한 속성.
x축, y축 통합 설정
- overflow-x : x축으로 넘침
- overflow-y : y축으로 넘침
- hidden : 무조건 숨김
- scroll : x축 y축 둘 다 스크롤바가 생김
- auto : 자동으로 조정 (x축으로 넘칠 것 같으면 x축 스크롤바, y축으로 넘칠 것 같으면 y축 스크롤바)
- visible : default. 영역 무시하고 전체 표시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document<title>
<style type="text/css">
p{width: 150px;height: 70px;border: 1px solid black;padding: 5px}
.hidden{overflow: hidden;}
.scroll{overflow: scroll;}
.auto{overflow: auto;}
.visible{overflow:visible}/* 기본값 */
</style>
</head>
<body>
<h1>overflow 속성의 적용 결과</h1>
<p class="hidden">콘텐츠의 내용이 박스의 크기를 넘어가는 경우 박스 크기만큼만 보이고
나머지 콘텐츠는 보이지 않도록 숨길 수 있다.</p>
<p class="scroll">박스의 크기와 콘텐츠의 내용과 상관없이 박스에 스크롤바를 생성할 때는
overflow:scroll;을 선언하면 된다. 이 때 만약 박스의 크기가 콘텐츠보다 클 경우 스크롤바는
비 활성화되어 나타난다.</p>
<p class="auto">콘텐츠의 내용이 박스의 크기보다 많아서 박스에 자동으로 스크롤바가 생성되도록 할 경우에 선언</p>
<p class="visible">콘텐츠의 내용이 박스의 크기를 넘어가는 경우 박스의 크기를 무시하고 콘텐츠의 내용을 모두 보여지도록 할 때 선언.
블록 요소의 기본값이기도 하다.</p>
</body>
</html>
결과물
