배경
overflow 속성은 요소의 박스에 내용이 더 길때, 어떻게 보일지 선택하는 속성이다. overflow 속성을 이용해서 가로 또는 세로 축만 스크롤바를 생성 시킬려면 어떻게 해야 할까? 바로 overflow-x 와 overflow-y 속성을 사용 하면 된다.
overflow-x, overflow-y
- overflow-x 속성은 x축, 즉 왼쪽과 오른쪽의 내용이 더 길 때(가로) 어떻게 보일지 선택하는 속성
- overflow-y 속성은 y축, 즉 위와 아래의 내용이 더 길때 (세로) 어떻게 보일지 선택하는 속성
overflow-x 기본 속성
- visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.
- hidden : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 한다. (가로 스크롤바가 나타나지 않을 뿐 브라우저에 따라 세로 스크롤바는 나타남)
- scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시 한다. (가로 스크롤바 항상 표시)
- auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시 한다. (내용이 넘칠때만 가로 스크롤바 표시)
overflow-x 예시
<!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-x: visible;
background: #EBDEF0;
}
div#b {
overflow-x: hidden;
background: #F2D7D5;
}
div#c {
overflow-x: scroll;
background: #E5E8E8;
}
div#d {
overflow-x: auto;
background: #D3EBDF;
}
</style>
</head>
<body>
<div id="a">
<h2>1. overflow-x : 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-x : 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-x : 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-x : 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>
overflow-y 기본 속성
- visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.
- hidden : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 한다. (세로 스크롤바가 나타나지 않을 뿐 브라우저에 따라 가로 스크롤바는 나타남)
- scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시 한다. (세로 스크롤바 항상 표시)
- auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시 한다. (내용이 넘칠때만 세로 스크롤바 표시)
overflow-y 예시
<!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-y: visible;
background: #EBDEF0;
}
div#b {
overflow-y: hidden;
background: #F2D7D5;
}
div#c {
overflow-y: scroll;
background: #E5E8E8;
}
div#d {
overflow-y: auto;
background: #D3EBDF;
}
</style>
</head>
<body>
<div id="a">
<h2>1. overflow-y : 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-y : 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-y : 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-y : 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>
Step by step goes a long way ✨