- 이미지 추가, 제거 버튼을 눌러서 여러 상황을 만들어 보세요.
- scroll 속성은 이미지가 하나만 있을때 확인할 수 있습니다.
- overflow 에서 세로 설정만 특화된 것입니다.
overflow-y
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
overflow-y 는 세로 스크롤 설정만 합니다
예제 1
실습 - overflow-y 의 속성 조절해 보기
보기
| 스크롤바 표시방법 | |
|---|---|
| overflow-y : | |
|
overflow-y : hidden
|
|
설명
연구 1
긴 이미지 보기로 사용해 보기
보기
소스
<style type="text/css">
.css_test {
border : 1px solid silver;
height : 450px;
overflow-x : hidden;
overflow-y : auto;
padding : 5px;
text-align : center;
}
</style>
<div class="css_test">
<img src="http://superkts.com/img/css/tree.jpg" />
</div>
.css_test {
border : 1px solid silver;
height : 450px;
overflow-x : hidden;
overflow-y : auto;
padding : 5px;
text-align : center;
}
</style>
<div class="css_test">
<img src="http://superkts.com/img/css/tree.jpg" />
</div>
연구 2
태양계 행성 - overflow-x, overflow-y 사용
보기
소스
<style type="text/css">
.css_test {
background : #000;
height : 650px;
overflow-x : auto;
overflow-y : hidden;
}
</style>
<div class="css_test">
<img src="http://superkts.com/img/css/solar_system.jpg" />
</div>
.css_test {
background : #000;
height : 650px;
overflow-x : auto;
overflow-y : hidden;
}
</style>
<div class="css_test">
<img src="http://superkts.com/img/css/solar_system.jpg" />
</div>
설명
- 이런곳에 사용하면 적절할까요?
- 마지막에서 두번째 해왕성은 왠지 눈이 있는것 같아 무섭네요.
- 명왕성은 퇴출되었습니다.
- 마지막에서 두번째 해왕성은 왠지 눈이 있는것 같아 무섭네요.
- 명왕성은 퇴출되었습니다.
+ 관련 CSS +