HTML
HTML overflow
기련이
2020. 5. 18. 17:58
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오버 플로우 속성</title>
<style type="text/css">
div {
background-color: gray;
width: 200px;
height: 50px;
border: 1px botted black;
overflow: scroll;
}
.clearfix {
width: 200px;
height: 50px;
overflow: auto;
}
</style>
</head>
<body>
<h3>Overflow 기본 </h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum purus ut tellus volutpat, sed interdum nulla ultrices. In pretium turpis a turpis pellentesque, et pretium ligula accumsan. Maecenas placerat laoreet nulla, nec sagittis justo mattis molestie. Phasellus eu scelerisque mauris. Quisque sodales purus eu cursus lacinia. </div>
<hr>
<h3>overflow를 사용하여 이미지 다 보이게 하기</h3>
<div class="clearfix">
<img class="img1" src="Penguins.jpg" width="170" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum purus ut tellus volutpat, sed interdum nulla ultrices. In pretium turpis a turpis pellentesque, et pretium ligula accumsan. Maecenas placerat laoreet nulla, nec sagittis justo mattis molestie. Phasellus eu scelerisque mauris. Quisque sodales purus eu cursus lacinia.
</div>
</body>
</html>
overflow 속성 : 특정 요소가 너무 커서 영역과 맞지 않을때
내용을 제어하는 속성
속성 값
1. visible : 기본값. 내용이 모두 출력됨.
영역을 벗어나게 됨.
2. hidden : 벗어난 요소의 일부를 화면에서 제거
3. scroll : 벗어난 요소의 일부를 화면에서 제거하고
영역에 스크롤바를 추가
4. auto : scroll과 동일한데 필요한 스크롤만 출력.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>넘치는 요소 다 출력</title>
<style type="text/css">
div {
border: 3px solid green;
padding: 5px;
height: 50px;
}
.over {
overflow: auto;
}
.img1 {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="over">
<img class="img1" src="Penguins.jpg"
width="150px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum purus ut tellus volutpat, sed interdum nulla ultrices. In pretium turpis a turpis pellentesque, et pretium ligula accumsan. Maecenas placerat laoreet nulla, nec sagittis justo mattis molestie. Phasellus eu scelerisque mauris. Quisque sodales purus eu cursus lacinia.
</div>
</body>
</html>overflow: auto;
영역의 세로길이가 지정되어 있지 않을 경우
가장 큰 요소의 크기로 영역의 크기가 결정