overflow
박스 안의 내용이 박스보다 클 경우 넘치는 부분을 제어
visible(기본값) : 전체를 다 보여줌
hidden : 넘치는 컨텐츠를 숨김
auto : 넘치는 컨텐츠가 존재할 경우에만 스크롤바를 생성
scroll : 넘치는 컨텐츠가 없어도 스크롤바를 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 300px;
height: 250px;
border: 4px solid gray;
overflow: auto;
/* overflow: scroll 은 자식태그가 부모태그를 넘지 않아도 보기 싫게 스크롤의 흔적이 남아있음. */
/* auto는 넘칠때만 스크롤이 나오게 됨. */
/* overflow: hidden 사용예시 - 카카오톡 프로필 */
}
.child {
width: 100px;
height: 100px;
background: red;
border: 4px solid orange;
font-size: 40px;
}
.child:hover{
opacity:0.6;
}
/* 가독성을 높이는 opacity의 예시 */
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</body>
</html>
'CSS입문' 카테고리의 다른 글
| CSS_font(color)_22.04.11(mon) (0) | 2022.04.11 |
|---|---|
| CSS_font_22.04.11(mon) (0) | 2022.04.11 |
| CSS_BOX속성(box-sizing,display,opacity)_22.04.11(mon) (0) | 2022.04.11 |
| CSS_연습문제2_22.04.11(mon) (0) | 2022.04.11 |
| CSS_연습문제 (0) | 2022.04.08 |