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="http://cfile6.uf.tistory.com/image/27581A3854D74C4E0104E9" /></span>
    <span><img src="http://cfile8.uf.tistory.com/image/2644533854D74C4E26BCC0" /></span>
    <span><img src="http://cfile26.uf.tistory.com/image/2509693354D74FB5036873" /></span>
    <span><img src="http://cfile21.uf.tistory.com/image/213D684C550B9B3B0D409C" /></span>
    <span><img src="http://cfile8.uf.tistory.com/image/213D5338550B92391D284F" /></span>
    <span><img src="http://cfile6.uf.tistory.com/image/217ADA3954D74FB622031B" /></span>
    <span><img src="http://cfile5.uf.tistory.com/image/27042F3354D74FB30A489A" /></span>
    <span><img src="http://cfile2.uf.tistory.com/image/230D9C3454D7331920123C" /></span>
    <span><img src="http://cfile21.uf.tistory.com/image/2469B33354D74FB23BC466" /></span>
    <span><img src="http://cfile1.uf.tistory.com/image/2748B83D552F50A109BCF6" /></span>
</div>
설명
- 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 (클릭시 보기) : backgroundheightoverflow-xoverflow-y
설명
- 이런곳에 사용하면 적절할까요?
- 마지막에서 두번째 해왕성은 왠지 눈이 있는것 같아 무섭네요.
- 명왕성은 퇴출되었습니다.
+ 관련 CSS +