<!DOCTYPE html>
<html>
<head>
<style>
div{
background: #bb9c9c;
color: black;
padding: 15px;
width: 200px;
height: 100px;
margin: 10px;
border: 1px solid black;
}
.overflow1 {
overflow: scroll;
}
.overflow2 {
overflow: visible;
}
.overflow3 {
overflow: hidden;
}
.overflow4 {
overflow: auto;
}
</style>
</head>
<body>
<div class="overflow1">overflow:scrolloverflow:scrolloverflow:scrolloverflow:scrolloverflow:scroll</div>
<div class="overflow2">overflow:scrolloverflow:scrolloverflow:scrolloverflow:scrolloverflow:scrolloverflow:scroll</div>
<div class="overflow3">overflow:scrolloverflow:scrolloverflow:scrolloverflow:scrolloverflow:scroll</div>
<div class="overflow4">overflow:scrolloverflow:scrolloverflow:scrolloverflow:scrolloverflow:scroll</div>
</body>
</html>
overflow: scroll;
필요하지 않더라도 스크롤이 생긴다.
overflow: visible;
오버플로우시 잘리지않고 밖에까지 표시된다.
overflow: hidden;
오버플로우시 잘린다.
overflow: auto;
오버플로우시 스크롤이 생긴다.(필요한 경우에만)'Web > HTML | CSS|JAVASCRIPT' 카테고리의 다른 글
| 시계 만들기(HTML, CSS, JAVASCRIPT) (0) | 2020.09.06 |
|---|---|
| 폰트 어썸(Font Awesome) 사용법 (0) | 2020.07.28 |
| Linear Gradients 그라데이션 적용하기(CSS) (0) | 2020.07.27 |
| opacity 정리(CSS) (0) | 2020.07.27 |
| Shadow 정리(CSS) (0) | 2020.07.27 |
