overflow 의 3가지 속성
- hidden 내용이 많아서 영역을 넘어간 부분은 숨깁니다.
- scroll 내용과 상관없이 무조건 스크롤바를 만듭니다.
- auto 내용이 넘어갈때 만 자동으로 스크롤바를 만듭니다.
참고 : overflow-x overflow-y
overflow
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
overflow 는 "내용" 이 지정된 영역을 벗어났을때 처리방법을 설정합니다.
- 벗어난 부분을 그냥 보이지 않게 하거나
- 스크롤바를 달아서 볼수 있게 하거나
- 스크롤바를 상황에 맞게 자동으로 보이도록
설정할 수 있습니다.
예제 1
개요 - overflow 가 적용된 div 요소의 내용 (스크롤바가 달려있음)
보기
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*
소스
<style type="text/css">
.css_test {
border : 1px solid gray;
height : 200px;
overflow : auto;
}
</style>
<div class="css_test">
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
</div>
.css_test {
border : 1px solid gray;
height : 200px;
overflow : auto;
}
</style>
<div class="css_test">
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
현재 시각은 2015년 2월 19일 목요일 오후 8시 32분 입니다. ^^*<br>
</div>
설명
예제 2
실습 - overflow 속성 보기
보기
해 저문 어느 오후 집으로 향한 걸음 뒤엔
서툴게 살아왔던 후회로 가득한 지난 날
그리 좋지는 않지만 그리 나쁜 것만도 아니었어
석양도 없는 저녁 내일 하루도 흐리겠지
힘든 일도 있지 드넓은 세상 살다보면
하지만 앞으로 나가 내가 가는 곳이 길이다
Bravo Bravo my life 나의 인생아
지금껏 달려온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
서툴게 살아왔던 후회로 가득한 지난 날
그리 좋지는 않지만 그리 나쁜 것만도 아니었어
석양도 없는 저녁 내일 하루도 흐리겠지
힘든 일도 있지 드넓은 세상 살다보면
하지만 앞으로 나가 내가 가는 곳이 길이다
Bravo Bravo my life 나의 인생아
지금껏 달려온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
해 저문 어느 오후 집으로 향한 걸음 뒤엔
서툴게 살아왔던 후회로 가득한 지난 날
그리 좋지는 않지만 그리 나쁜 것만도 아니었어
서툴게 살아왔던 후회로 가득한 지난 날
그리 좋지는 않지만 그리 나쁜 것만도 아니었어
| 스크롤바 표시방법 | |
|---|---|
| overflow : | |
|
overflow : hidden
|
|
설명
- scroll 속성의 경우 스크롤바가 생길 분량의 내용이 아니라도 무조건 표시해 줍니다.
- 내용이 많을때와 적을때를 비교해 보면서 보시면 좋습니다.
- 내용이 많을때와 적을때를 비교해 보면서 보시면 좋습니다.
연구 1
제이쿼리를 이용한 스크롤 애니메이션
보기
해 저문 어느 오후 집으로 향한 걸음 뒤엔
서툴게 살아왔던 후회로 가득한 지난 날
그리 좋지는 않지만 그리 나쁜 것만도 아니었어
석양도 없는 저녁 내일 하루도 흐리겠지
힘든 일도 있지 드넓은 세상 살다보면
하지만 앞으로 나가 내가 가는 곳이 길이다
Bravo Bravo my life 나의 인생아
지금껏 달려온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
내일은 더 낫겠지 그런 작은 희망 하나로
사랑할 수 있다면 힘든 1년도 버틸 거야
일어나 앞으로 나가 네가 가는 곳이 길이다
Bravo Bravo my life 나의 인생아
지금껏 살아온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
고개들어 하늘을 봐 창공을 가르는 새들
너의 어깨에 잠자고 있는 아름다운 날개를 펼쳐라
Bravo Bravo my life 나의 인생아
지금껏 달려온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
Bravo Bravo my life 나의 인생아
지금껏 달려온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
(Bravo Bravo) 나의 인생아
지금껏 달려온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
서툴게 살아왔던 후회로 가득한 지난 날
그리 좋지는 않지만 그리 나쁜 것만도 아니었어
석양도 없는 저녁 내일 하루도 흐리겠지
힘든 일도 있지 드넓은 세상 살다보면
하지만 앞으로 나가 내가 가는 곳이 길이다
Bravo Bravo my life 나의 인생아
지금껏 달려온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
내일은 더 낫겠지 그런 작은 희망 하나로
사랑할 수 있다면 힘든 1년도 버틸 거야
일어나 앞으로 나가 네가 가는 곳이 길이다
Bravo Bravo my life 나의 인생아
지금껏 살아온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
고개들어 하늘을 봐 창공을 가르는 새들
너의 어깨에 잠자고 있는 아름다운 날개를 펼쳐라
Bravo Bravo my life 나의 인생아
지금껏 달려온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
Bravo Bravo my life 나의 인생아
지금껏 달려온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
(Bravo Bravo) 나의 인생아
지금껏 달려온 너의 용기를 위해
Bravo Bravo my life 나의 인생아
찬란한 우리의 미래를 위해
소스
<style type="text/css">
.css_test {
border : 1px solid black;
height : 150px;
margin-bottom : 50px;
margin : 0 auto;
overflow : hidden;
padding : 5px;
width : 400px;
}
</style>
<div id="css_test" class="css_test">
해 저문 어느 오후 집으로 향한 걸음 뒤엔<br>
서툴게 살아왔던 후회로 가득한 지난 날<br>
그리 좋지는 않지만 그리 나쁜 것만도 아니었어<br>
<br>
석양도 없는 저녁 내일 하루도 흐리겠지<br>
힘든 일도 있지 드넓은 세상 살다보면<br>
하지만 앞으로 나가 내가 가는 곳이 길이다<br>
<br>
Bravo Bravo my life 나의 인생아<br>
지금껏 달려온 너의 용기를 위해<br>
Bravo Bravo my life 나의 인생아<br>
찬란한 우리의 미래를 위해<br>
<br>
내일은 더 낫겠지 그런 작은 희망 하나로<br>
사랑할 수 있다면 힘든 1년도 버틸 거야<br>
일어나 앞으로 나가 네가 가는 곳이 길이다<br>
<br>
Bravo Bravo my life 나의 인생아<br>
지금껏 살아온 너의 용기를 위해<br>
Bravo Bravo my life 나의 인생아<br>
찬란한 우리의 미래를 위해<br>
<br>
고개들어 하늘을 봐 창공을 가르는 새들<br>
너의 어깨에 잠자고 있는 아름다운 날개를 펼쳐라<br>
<br>
Bravo Bravo my life 나의 인생아<br>
지금껏 달려온 너의 용기를 위해<br>
Bravo Bravo my life 나의 인생아<br>
찬란한 우리의 미래를 위해<br>
<br>
Bravo Bravo my life 나의 인생아<br>
지금껏 달려온 너의 용기를 위해<br>
Bravo Bravo my life 나의 인생아<br>
찬란한 우리의 미래를 위해<br>
<br>
(Bravo Bravo) 나의 인생아<br>
지금껏 달려온 너의 용기를 위해<br>
Bravo Bravo my life 나의 인생아<br>
찬란한 우리의 미래를 위해<br>
</div>
<div style="text-align:center; margin-top:10px;">
<button type="button" onclick="$('#css_test').stop().animate({scrollTop:'+=100'})">아래로</button>
<button type="button" onclick="$('#css_test').stop().animate({scrollTop:'-=100'})">위로</button>
</div>
.css_test {
border : 1px solid black;
height : 150px;
margin-bottom : 50px;
margin : 0 auto;
overflow : hidden;
padding : 5px;
width : 400px;
}
</style>
<div id="css_test" class="css_test">
해 저문 어느 오후 집으로 향한 걸음 뒤엔<br>
서툴게 살아왔던 후회로 가득한 지난 날<br>
그리 좋지는 않지만 그리 나쁜 것만도 아니었어<br>
<br>
석양도 없는 저녁 내일 하루도 흐리겠지<br>
힘든 일도 있지 드넓은 세상 살다보면<br>
하지만 앞으로 나가 내가 가는 곳이 길이다<br>
<br>
Bravo Bravo my life 나의 인생아<br>
지금껏 달려온 너의 용기를 위해<br>
Bravo Bravo my life 나의 인생아<br>
찬란한 우리의 미래를 위해<br>
<br>
내일은 더 낫겠지 그런 작은 희망 하나로<br>
사랑할 수 있다면 힘든 1년도 버틸 거야<br>
일어나 앞으로 나가 네가 가는 곳이 길이다<br>
<br>
Bravo Bravo my life 나의 인생아<br>
지금껏 살아온 너의 용기를 위해<br>
Bravo Bravo my life 나의 인생아<br>
찬란한 우리의 미래를 위해<br>
<br>
고개들어 하늘을 봐 창공을 가르는 새들<br>
너의 어깨에 잠자고 있는 아름다운 날개를 펼쳐라<br>
<br>
Bravo Bravo my life 나의 인생아<br>
지금껏 달려온 너의 용기를 위해<br>
Bravo Bravo my life 나의 인생아<br>
찬란한 우리의 미래를 위해<br>
<br>
Bravo Bravo my life 나의 인생아<br>
지금껏 달려온 너의 용기를 위해<br>
Bravo Bravo my life 나의 인생아<br>
찬란한 우리의 미래를 위해<br>
<br>
(Bravo Bravo) 나의 인생아<br>
지금껏 달려온 너의 용기를 위해<br>
Bravo Bravo my life 나의 인생아<br>
찬란한 우리의 미래를 위해<br>
</div>
<div style="text-align:center; margin-top:10px;">
<button type="button" onclick="$('#css_test').stop().animate({scrollTop:'+=100'})">아래로</button>
<button type="button" onclick="$('#css_test').stop().animate({scrollTop:'-=100'})">위로</button>
</div>
설명
- "제이쿼리 공작소" 를 기대해 주세요 ^^;
연구 2
간단한 이미지 갤러리 입니다 (새로고침 하시면 사진이 바뀝니다 ^^;)
보기
소스
<style type="text/css">
.css_test {
border : 1px solid silver;
height : 450px;
overflow : auto;
padding : 10px;
text-align : center;
}
.css_test span {
background : #fff;
border : 1px solid black;
box-shadow : 0 0 5px #555;
display : inline-block;
margin : 15px;
padding : 7px;
}
</style>
<div class="css_test">
<span><img src="https://t1.daumcdn.net/cfile/tistory/267B673354D74FB31C" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/276870375501AED00D" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/237EED50550B9B3E0C" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2730B94D55AC84A92F" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/246FDB38550B923705" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/275A3644552F50A828" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/264E5438555ABF490A" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/251F204B550B9B3839" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/21714438550B923B42" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2748B83D552F50A109" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/251EF04B550B9B3A39" /></span>
</div>
.css_test {
border : 1px solid silver;
height : 450px;
overflow : auto;
padding : 10px;
text-align : center;
}
.css_test span {
background : #fff;
border : 1px solid black;
box-shadow : 0 0 5px #555;
display : inline-block;
margin : 15px;
padding : 7px;
}
</style>
<div class="css_test">
<span><img src="https://t1.daumcdn.net/cfile/tistory/267B673354D74FB31C" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/276870375501AED00D" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/237EED50550B9B3E0C" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2730B94D55AC84A92F" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/246FDB38550B923705" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/275A3644552F50A828" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/264E5438555ABF490A" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/251F204B550B9B3839" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/21714438550B923B42" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2748B83D552F50A109" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/251EF04B550B9B3A39" /></span>
</div>
설명
- 스크롤바를 달아서 갤러리처럼 만들어 보았습니다. (작은 공간에 사용하기 위한용도)
- 첫번째 사진을 제외하고 수원 광교호수공원 입니다.
- 새로고침하면 사진이 바뀝니다.(랜덤) ^^;
- 첫번째 사진을 제외하고 수원 광교호수공원 입니다.
- 새로고침하면 사진이 바뀝니다.(랜덤) ^^;
+ 관련 CSS +