• Q&A
  • 회원가입
  • 로그인

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

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 (= 클리어픽스 핵 = 상자만들기 = 박스만들기)
 
1. 
바깥 테두리 틀 유지 O (∵ 내부에 float 속성이 없으므로)

 

<style>

#hz {border:1px solid red;}

</style>

<div id='hz'>

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

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

</div>

 

결과보기

 
2.
바깥 테두리 틀 유지 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>

 

결과보기

 
3.
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>

 

결과보기

관련글 (200916) https://sir.kr/qa/377161
오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012