overflow-x
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
overflow-x 는 overflow 에서 가로 설정만 특화된 것입니다.
예제 1
overflow-x 개요
보기
소스
<style type="text/css">
.css_test {
border : 1px solid silver;
height : 390px;
overflow-x : auto;
padding : 5px;
text-align : center;
white-space : nowrap;
}
.css_test span {
background : #fff;
border : 1px solid black;
box-shadow : 0 0 5px #555;
display : inline-block;
margin : 7px;
padding : 7px;
}
</style>
<div class="css_test">
<span><img src="https://t1.daumcdn.net/cfile/tistory/236C4F3354D74FB232" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/22528D4C550B9B3A03" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2748B83D552F50A109" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2408473354D74FB606" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/213D5338550B92391D" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2523EC4F54D7351637" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/237CBF4C550B9B3C2B" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2509693354D74FB503" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/223D2D4C550B9B3B0D" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/211F9841555AC4FE24" /></span>
</div>
.css_test {
border : 1px solid silver;
height : 390px;
overflow-x : auto;
padding : 5px;
text-align : center;
white-space : nowrap;
}
.css_test span {
background : #fff;
border : 1px solid black;
box-shadow : 0 0 5px #555;
display : inline-block;
margin : 7px;
padding : 7px;
}
</style>
<div class="css_test">
<span><img src="https://t1.daumcdn.net/cfile/tistory/236C4F3354D74FB232" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/22528D4C550B9B3A03" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2748B83D552F50A109" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2408473354D74FB606" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/213D5338550B92391D" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2523EC4F54D7351637" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/237CBF4C550B9B3C2B" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/2509693354D74FB503" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/223D2D4C550B9B3B0D" /></span>
<span><img src="https://t1.daumcdn.net/cfile/tistory/211F9841555AC4FE24" /></span>
</div>
사용된 CSS (클릭시 보기) :
backgroundborderbox-shadowdisplayheightmarginoverflow-xpaddingtext-alignwhite-space
설명
- overflow 에서 가로 설정만 특화되 것입니다.
예제 2
실습 - 속성 조절해보기
보기
| 스크롤바 표시방법 | |
|---|---|
| overflow-x : | |
|
overflow-x : hidden
|
|
설명
- 이 예제는 auto 와 scroll 의 적용된 모습이 같습니다.
- 새로고침하면 사진이 바뀝니다. ^^;
- 새로고침하면 사진이 바뀝니다. ^^;
연구 1
태양계 행성 - 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 +