overflow 이란?
요소의 박스에 내용이 더 길 때, 어떻게 보일지 선택하는 속성이다. 위 속성은 상속되지 않는다.
overflow 기본 속성
- visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.
- hidden : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 한다.
- scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시 한다. (스크롤바 항상 표시)
- auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시 한다. (내용이 넘칠때만 스크롤바 표시)
예시
<!DOCTYPE html>
<html lang="en">
<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>
div {
width: 400px;
height: 110px;
margin: 0 0 50px 0;
}
div#a {
overflow: visible;
background: #EBDEF0;
}
div#b {
overflow: hidden;
background: #F2D7D5;
}
div#c {
overflow: scroll;
background: #E5E8E8;
}
div#d {
overflow: auto;
background: #D3EBDF;
}
</style>
</head>
<body>
<div id="a">
<h2>1. overflow : visible</h2>
All my troubles seemed so far away
Now it looks as though they're here to stay
Oh, I believe in yesterday
Suddenly
I'm not half the man I used to be
There's a shadow hanging over me
Oh, yesterday came suddenly
</div>
<div id="b">
<h2>2. overflow : hidden</h2>
All my troubles seemed so far away
Now it looks as though they're here to stay
Oh, I believe in yesterday
Suddenly
I'm not half the man I used to be
There's a shadow hanging over me
Oh, yesterday came suddenly
</div>
<div id="c">
<h2>3. overflow : scroll</h2>
All my troubles seemed so far away
Now it looks as though they're here to stay
Oh, I believe in yesterday
Suddenly
I'm not half the man I used to be
There's a shadow hanging over me
Oh, yesterday came suddenly
</div>
<div id="d">
<h2>4. overflow : auto</h2>
All my troubles seemed so far away
Now it looks as though they're here to stay
Oh, I believe in yesterday
Suddenly
I'm not half the man I used to be
There's a shadow hanging over me
Oh, yesterday came suddenly
</div>
</body>
</html>
html 을 실행한 결과 다음과 같은 결과를 볼 수 있다.
눈여겨 볼 점 🙄
overflow 의 scroll 과 auto 속성의 차이를 잘 확인해 보자. scroll 과 auto 속성은 부모요수의 범위를 넘어가는 자식요소의 부분은 보이지 않지만 사용자가 확인 할 수 있도록 스크롤바를 표시하는 것은 동일하다. 하지만 스크롤바가 항상 표시되냐 아니냐의 차이가 있다.
<!DOCTYPE html>
<html lang="en">
<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>
div {
width: 400px;
height: 110px;
margin: 0 0 50px 0;
}
div#a {
overflow: visible;
background: #EBDEF0;
}
div#b {
overflow: hidden;
background: #F2D7D5;
}
div#c {
overflow: scroll;
background: #E5E8E8;
}
div#d {
overflow: auto;
background: #D3EBDF;
}
</style>
</head>
<body>
<div id="a">
<h2>1. overflow : visible</h2>
</div>
<div id="b">
<h2>2. overflow : hidden</h2>
</div>
<div id="c">
<h2>3. overflow : scroll</h2>
</div>
<div id="d">
<h2>4. overflow : auto</h2>
</div>
</body>
</html>
overflow의 scroll 속성에만 스크롤바가 생긴 것을 확인할 수 있다.
Step by step goes a long way ✨