overflow-y
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
overflow-y
는 세로 스크롤 설정만 합니다
예제 1
실습 - overflow-y 의 속성 조절해 보기
보기
이미지 추가
이미지 제거
스크롤바 표시방법
overflow-y :
hidden (표시 안함)
scroll (스크롤바 무조건 표시)
auto (영역 넘어갔을때 자동)
overflow-y : hidden
설명
- 이미지 추가, 제거 버튼을 눌러서 여러 상황을 만들어 보세요.
- scroll 속성은 이미지가 하나만 있을때 확인할 수 있습니다.
-
overflow
에서 세로 설정만 특화된 것입니다.
연구 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 (클릭시 보기) :
border
height
overflow-x
overflow-y
padding
text-align
연구 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 (클릭시 보기) :
background
height
overflow-x
overflow-y
설명
- 이런곳에 사용하면 적절할까요?
- 마지막에서 두번째 해왕성은 왠지 눈이 있는것 같아 무섭네요.
- 명왕성은 퇴출되었습니다.
+ 관련 CSS +
overflow
내용이 지정된 영역을 넘어갔을때 처리방법
overflow-x
overflow 에서 가로 스크롤 설정만 합니다
overflow-y
overflow 에서 세로 스크롤 설정만 합니다
☞ 목록으로 가기