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

[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)

분류 제목
box CSS - padding 속성 ★ - 안쪽여백 (= padding속성 = 패딩속성)
box CSS - padding-top 속성 - 안쪽여백상단 (= padding-top속성 = 패딩탑속성 = 패딩톱…
box CSS - padding-right 속성 - 안쪽여백우측 (= padding-right속성 = 패딩라이트속…
box CSS - padding-bottom 속성 - 안쪽여백하단 (= padding-bottom속성 = 패딩바텀속…
box CSS - padding-left 속성 - 안쪽여백좌측 (= padding-left속성 = 패딩레프트속성)
position CSS - float 속성 ★★★ - 요소나란히 (= 요소한줄로 = 요소가로로 = 요소옆으로 = float속…
position CSS - clear 속성 ★ - float 해제후 줄바꿈 (= 클리어속성, clear속성, 상속 X)
position CSS - display 속성 ★★★★★ - 요소유형지정 (= 요소성격변 = 요소노출방식 = display속…
position CSS - position 속성 ★★★ - 위치기준대상지정 (= 위치속성 = 포지션속성 = 위치조정 = po…
position CSS - top 속성 ★ - 기준상단 (= 위기준 상단거리 = top속성 = 탑속성/톱속성)
position CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※…
position CSS - bottom 속성 ★ - 기준하단 (= bottom속성 = 하단기준 = 아래기준 = 바텀속성 = …
position CSS - left 속성 ★ - 왼쪽기준 (= left속성 = 좌측기준 = 레프트속성, 상속 X)
position CSS - z-index 속성 ★ - 요소층수지정 (= 요소상하지정 = 요소상하결정 = 위아래지정 = z-…
position CSS - visibility 속성 ★ - 보임설정 (= 노출설정 = visibility속성 = 비저빌러티속…
position CSS - overflow 속성 ★★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = over…
position CSS - clip 속성 (폐기예고) - 이미지 자르기 (= 일부만 노출 = clip속성 = 클립속성)
css CSS - cursor 속성 - 커서 모양 (= cursor속성 = 커서속성)
intro CSS - !important 키워드 - 당해 속성값 강제 우선적용 (= 우선순위표시 = 느낌표임포턴트)
css CSS - opacity 속성 - 불투명도 (= opacity속성 = 오패서티속성/오페서티속성) ※ 있는데 …
6/25
목록
찾아주셔서 감사합니다. Since 2012