CSS/개념정리
[속성] overflow 속성
xowoony
2022. 9. 10. 20:22
학습일 : 2022. 09. 07
overflow 속성
해당 요소의 범위를 벗어나는 자식 및 자손에 대한 처리를 위해 사용한다.
용법
... {
overflow: *x;
}용법
... {
overflow: [가로축 : *x] [세로축 : *x];
}
*x
- visible : 본 요소를 벗어나는 자식, 자손을 그냥 그대로 보이게 한다. (기본값)
- hidden : 본 요소를 벗어나는 자식, 자손을 보이지 않게 한다.
- scroll : 넘침 여부와 관계 없이 스크롤 바를 표시한다.
- auto : 넘치지 않으면 아무 것도 하지 않고, 넘치면 스크롤 바를 표시한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>overflow 속성</title>
<style>
.parent {
width: 10rem;
height: 10rem;
background-color: rgb(200, 100, 100);
overflow: auto;❤
}
.parent > .child {
top: 2.5rem;
left: 2.5rem;
width: 5rem;
height: 30vh;
background-color: rgb(100, 200, 100);
position: relative;
}
</style>
</head>
<body>
<div class="parent">❤
<div class="child"></div>
</div>
</body>
</html>============실행결과===========