[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 예제 - 범위 이탈 요소 처리 

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 이슈 - 브라우저 축소 시 공백 제거

참고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 핵 (= 클리어픽스 핵 = 상자만들기 = 박스만들기)

 

<style>

#hz {border:1px solid red;}

</style>

 

<div id='hz'>

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

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

</div>

 

결과보기

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

 

결과보기

[방법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>

 

결과보기