c CSS

[position] CSS - overflow 속성 ★★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = 오버플로속성, 상속X) +스크롤바 숨기기 + clearfix (클리어픽스)

43,872

overflow 예제

<style>

.box {

float:left;

width:200px;

height:100px;

color:#b8064d;

background-color:#f8e1eb;

margin:50px;

}

.auto {overflow: auto;}

.visible {overflow: visible;}

.hidden {overflow: hidden;}

.scroll-x {overflow-x: scroll;}

.scroll-y {overflow-y: scroll;}

.scroll {overflow: scroll;}

h3 {color:blue; text-align:center;}

</style>

<div class="box">

<h3>전혀 없는 경우</h3>

<h4>홈짱닷컴 (homzzang.com)</h4>

<p>홈페이지 무료 제작 강의 (빌더 HTML CSS 등 무료 강의)</p>

</div>

<div class="box auto">

<h3>overflow:auto</h3>

<h4>홈짱닷컴 (homzzang.com)</h4>

<p>홈페이지 무료 제작 강의 (빌더 HTML CSS 등 무료 강의)</p>

</div>

<div class="box visible">

<h3>overflow:visible</h3>

<h4>홈짱닷컴 (homzzang.com)</h4>

<p>홈페이지 무료 제작 강의 (빌더 HTML CSS 등 무료 강의)</p>

</div>

<div class="box hidden">

<h3>overflow:hidden</h3>

<h4>홈짱닷컴 (homzzang.com)</h4>

<p>홈페이지 무료 제작 강의 (빌더 HTML CSS 등 무료 강의)</p>

</div>

<div class="box scroll-x">

<h3>overflow-x:scroll</h3>

<h4>홈짱닷컴 (homzzang.com)</h4>

<p>홈페이지 무료 제작 강의 (빌더 HTML CSS 등 무료 강의)</p>

</div>

<div class="box scroll-y">

<h3>overflow-y:scroll</h3>

<h4>홈짱닷컴 (homzzang.com)</h4>

<p>홈페이지 무료 제작 강의 (빌더 HTML CSS 등 무료 강의)</p>

</div>

<div class="box scroll">

<h3>overflow:scroll</h3>

<h4>홈짱닷컴 (homzzang.com)</h4>

<p>홈페이지 무료 제작 강의 (빌더 HTML CSS 등 무료 강의)</p>

</div>

결과보기

[참고]

width 200px 넘긴 경우 p 태그 요소에서는 자동 줄 바꿈 기본값 속성에 의해 아래 줄로 내려감.

그러나,

height 100px 넘긴 경우엔 overflow 속성을 어떻게 정의하느냐에 따라 차이가 생기니 주의 !!

overflow 정의

요소 내용이 요소 크기보다 더 클 때, 요소 내용을 어떻게 처리할지 지정.

1.

높이 지정된 블럭요소 (= 한줄전체차지요소)에서만 작동.

2.
기본값: visible

상속여부 : X

애니효과 : X

CSS버전 : CSS2

JS 구문 : object.style.overflow="scroll"

3.
html,body 요소엔 넣어 사용하지 말 것. 자세히 보기
html,body { overflow-x:hidden; } 코드 사용 시, 모바일에서 렉 발생 가능.

4.

IE4 이상 모든 브라우저 지원.

5.

반응형 만들 때 유용.

overflow 구문

selector {overflow: 속성값;}

cf.

overflow-x:scroll : 가로축 스크롤 생성.

overflow-y:scroll : 세로축 스크롤 생성.

[속성값]

visible
영역 벗어난 부분을 짜르지 않고 눈에 보이게 함 (기본값)

hidden
영역 벗어난 부분을 숨겨서 눈에 안 보이게 함. 스크롤이 안 생김.

clearfix (클리어픽스) 역할 : div 상자 역할 못 하는 에러 해결. 자세히보기.

scroll
영역 밖에선 안 보이되, 스크롤 생성해 스크롤 내릴 경우 보이게 함.
(넘어가든 안 넘어가든 무조건 스크롤 생성)

auto
영역 벗어난 부분 존재 시, 자동으로 스크롤 생기게 만듦.
(넘어간 경우에만 스크롤 생성)

clearfix (클리어픽스) 역할 : float 정렬 에러 해결 역할.
IE6 클리어픽스 할 경우, zoom: 1; 속성도 추가해야 함.

inherit
부모 요소 속성을 상속

[참고]

1.
스크롤은 영역 내에서 생김.

즉, width height 값을 준 범위 내에서 생김.

2.
스크롤바는 약 15px 정도 차지.
즉, 가로 길이가 100px 경우, 내용은 85px, 15px는 스크롤바가 차지.

overflow 예제 - 가로 스크롤바

#box {

width:300px;

padding-bottom:2px;

overflow-y:hidden;

overflow-x:auto;

white-space:nowrap;

}

#box .tab_btn_box {

width:100px;

height:30px;

display:inline-block;

overflow:auto;

}

예제보기

[주의] overflow:hidden 안 넣으면 브라우저창 작게 했을 때, 우측에 흰 공백 생김.

<style>

#footer {width:100%; height:80px; background-color:red;position:relative;overflow:hidden;}

.footer {width:750px ; margin:0 auto;position:relative;}

.footer:after {content:"";display:block;clear:both;}

.foot_left {width:480px;float:left;}

.foot_right {width:750px ;float:left;}

* {margin:0; padding:0;}

</style>



<div id="footer">

<div class="footer">

         <div class="foot_left">푸터 레프트</div>

         <div class="foot_right">푸터 라이트</div>

     </div>

</div>

결과보기

(출처: 히어 님, 커네드커네드 님)

참고

1.

여러 클래스 동시 적용하려면, 한 칸 띄고 나열.

(예) <div class="box auto"> box 선택자와 auto 선택자를 동시 적용

2.

요소안에 아무 것도 안 적은 경우와 &nbsp (공백태그) 넣은 경우 차이

① 전혀 안 적은 경우 : 요소 있던 자리를 다음 요소가 차지 (ex) <h3></h3>

② &nbsp 적은 경우 : 요소 있던 자리가 공백으로 공간 차지 (ex) <h3>&nbsp</h3>

overflow 예제 - 마우스허버 때만 스크롤바 보이게 하기

div {

height: 100px;

width: 50%;

margin: 0 auto;

overflow: hidden;

}

div:hover {

overflow-y: scroll;

}

결과보기

overflow 예제 - Clearfix Tip (= 클리어픽스 핵 = 상자만들기 = 박스만들기)

바깥 테두리 틀 유지 O (∵ 내부에 float 속성이 없으므로)

<style>

#hz {border:1px solid red;}

</style>

<div id='hz'>

<div class='left'>왼쪽</div>

<div class='right'>오른쪽</div>

</div>

결과보기

바깥 테두리 틀 유지 X (∵ 내부에 float 속성이 추가되서)

<style>

#hz {border:1px solid red;}

#hz .left {float:left;}

#hz .right {float:right;}
</style>

<div id='hz'>

<div class='left'>왼쪽</div>

<div class='right'>오른쪽</div>

</div>

결과보기

2번의 문제 해결 (= clearfix팁)

[방법1] 부모요소에 overflow:auto 적용.

<style>
#hz {border:1px solid red; overflow:auto; zoom:1;}
#hz .left {float:left;}

#hz .right {float:right;}
</style>

<div id='hz'>

<div class='left'>왼쪽</div>

<div class='right'>오른쪽</div>

</div>

결과보기

[방법2] 부묘오소에 overflow:hidden 적용.

<style>

#hz {border:1px solid red; overflow:hidden;}

#hz .left {float:left;}

#hz .right {float:right;}

</div>

<div id='hz'>

<div class='left'>왼쪽</div>

<div class='right'>오른쪽</div>

</div>

결과보기

[방법3] clear:both 속성 적용된 마지막 자식요소 추가 생성.

<style>

#hz {border:1px solid red;}

#hz .left {float:left;}

#hz .right {float:right;}

#hz .c {clear:both;}

</style>

<div id='hz'>

<div class='left'>왼쪽</div>

<div class='right'>오른쪽</div>

<div class='c'></div>

</div>

결과보기