• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차
  1. overflow 예제 - 범위 이탈 요소 처리
  2. overflow 정의
  3. overflow 구문
  4. overflow 예제 - 가로 스크롤바
  5. overflow 예제 - 세로 스크롤바 숨기기 (※ 좌우 영역 각각 스크롤)
  6. overflow:hidden 이슈 - 브라우저 축소 시 공백 제거
  7. 참고1 - 여러 클래스 적용법
  8. 참고2 - 요소 안 공백 처리 차이
  9. overflow 예제 - 마우스허버 때만 스크롤바 보이게
  10. 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: visible|hidden|clip|scroll|auto|initial|inherit;}
 
cf. 
  • overflow-x:scroll  속성 - 가로축 스크롤 생성.
  • overflow-y:scroll  속성 - 세로축 스크롤 생성.

 


[속성값]

visible
영역 벗어난 부분을 짜르지 않고 눈에 보이게 함. (기본값)
 
hidden
영역 벗어난 부분을 숨겨서 눈에 안 보이게 함. 스크롤이 안 생김.
  • clearfix (클리어픽스) 역할 : div 상자 역할 못 하는 에러 해결. 자세히보기.
 
clip
오버플로가 잘리고 나머지 콘텐츠는 표시 X. 
  • 프로그래밍 방식 스크롤을 포함한 스크롤을 금지.
 
scroll
영역 밖에선 안 보이되, 스크롤 생성해 스크롤 내릴 경우 보이게 함. 
  • 넘어가든 안 넘어가든 무조건 스크롤 생성.
         
auto
영역 벗어난 부분 존재 시, 자동으로 스크롤 생기게 만듦.
  • clearfix (클리어픽스) 역할 : float 정렬 에러 해결 역할.
  • IE6 클리어픽스 할 경우, zoom: 1; 속성도 추가해야 함.
 
initial
이 속성의 기본값 사용.
 
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 예제 - 세로 스크롤바 숨기기 (※ 좌우 영역 각각 스크롤)

 

<style>

#hz {width: 100%;  overflow: hidden;}

#hz * {margin:0; padding:0;}

#hz .box {float:left; border:1px solid gray; width:50%; box-sizing:border-box; height:300px; overflow-x:hidden; overflow-y:auto;}


/* 스크롤바 숨기기 (Hide Scrollbar) */

.box {

    -ms-overflow-style: none; /* IE and Edge */

    scrollbar-width: none; /* Firefox */

}

.box::-webkit-scrollbar {

    display: none; /* Chrome, Safari, Opera*/

}

#hz img {width:100%; height:auto; display:block;}

</style>

 

<div id="hz">

    <div class="box">

        <div>

            <img src="https://source.unsplash.com/random" alt="">

            <img src="https://source.unsplash.com/random" alt="">

            <img src="https://source.unsplash.com/random" alt="">

            <img src="https://source.unsplash.com/random" alt="">

            <img src="https://source.unsplash.com/random" alt="">

        </div>

    </div>

    <div class="box">

        <div>

            <img src="https://source.unsplash.com/random" alt="">

            <img src="https://source.unsplash.com/random" alt="">

            <img src="https://source.unsplash.com/random" alt="">

            <img src="https://source.unsplash.com/random" alt="">

            <img src="https://source.unsplash.com/random" alt="">

        </div>

    </div>

</div>

 

결과보기

 

overflow:hidden 이슈 - 브라우저 축소 시 공백 제거

[주의] 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 - 여러 클래스 적용법

 

box 선택자와 auto 선택자 동시 적용하려면, 한 칸 띄고 기재.

(예) <div class="boxauto">

 

 

참고2 - 요소 안 공백 처리 차이

[전혀 안 적은 경우] 

 

요소 있던 자리를 다음 요소가 차지.

(ex) <h3></h3>

 


[&nbsp  적은 경우]

 

요소 있던 자리가 공백으로 공간 차지.

(ex) <h3>&nbsp</h3>

 

 

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

 

div {

  height: 100px;

  width: 50%;

  margin: 0 auto;

  overflow: hidden;

}


div:hover {

  overflow-y: scroll;

}

 

결과보기


Clearfix 핵 (= 클리어픽스 핵 = 상자만들기 = 박스만들기)

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
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012