Css #12 -overflow

overflow

박스안에 컨텐츠가 많아 범위를 넘어갈 때 넘치는 부분을 어떻게 보여줄지 정하는 속성.

• overflow : hidden; ★
  : height속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨김.
  height속성이 지정되어 있지 않을 경우 컨텐츠에 맞춰 늘어남.
• overflow : scroll; ★
  : 영역을 벗어나는 부분은 스크롤바를 나타나게 함.
• overflow : visible;
  : 기본값으로 영역에서 벗어난 부분을 그대로 보여줌.
• overflow : auto; ★
  : 박스를 넘어가지 않으면 스크롤바가 보이지 않고 넘어가면 보여줌.
• overflow : initial;
  : 기본값으로 설정함.
• overflow : inherit;
  : 부모요소의 속성값을 상속받음.

 <div class="content1">
        <h4>컨텐츠가 박스를 벗어나지 않을 때</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
     </div>

     <div class="content2">
        <h4>컨텐츠양이 박스보다 많거나 유동적일 때</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
     </div>

     <div class="content3">
        <h4>컨텐츠양에 따라서 높이가 늘어날 경우</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
     </div>
     <div class="content4">
        <h4>박스에 지정된 높이만큼만 컨텐츠가 보일 때</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
     </div>

/* css코드 */
.content1{
    width: 200px;
    height: 200px;
    border: 2px solid #000;
    box-sizing : border-box;
    margin: 10px;
    float:left;

}
.content2{
    width: 200px;
    height: 200px;
    border: 2px solid #000;
    box-sizing : border-box;
    margin: 10px;
    float:left;
    overflow: auto;

}
.content3{
    width: 200px;
    
    border: 2px solid #000;
    box-sizing : border-box;
    margin: 10px;
    float:left;
    overflow: hidden;
}
.content4{
    width: 200px;
    height: 200px;
    border: 2px solid #000;
    box-sizing : border-box;
    margin: 10px;
    float:left;
    overflow: hidden;
}

overflow: scroll;

영역에서 벗어나는 부분을 스크롤로 보여주는 속성. 기본값은 가로, 세로 스크롤이 모두 보이는 것이 기본값이다. 만약 특정 부분을 숨기고 싶다면 - -overflow-x : hidden이나 overflow-y : hidden을 사용한다. 그 외에 나타내야 하는 부분은 overflow-x/y:scroll로 나타냄.
속성값

• overflow-x : 가로 스크롤. hidden이나 scroll로 나타내고 숨길 수 있다.
• overflow-y : 세로 스크롤. hidden이나 scroll로 나타내고 숨길 수 있다.

스크롤 스타일링 하기

스크롤에는 각 부분마다 이름이 따로 있다. 하지만 브라우저를 만드는 회사마다
지원하는 속성이 있고, 아닌 속성이 있어 해당 브라우저에 맞춰 브라우저 접두사를 붙여줘야 한다.

스크롤 스타일링 속성

1. scrollbar : 스크롤 전체를 말한다.
2. scrollbar-thumb : 드래그가 가능한 스크롤 핸드 막대
3. scrollbar-track : 스크롤을 움직일 수 있는 전체 영역.(= 진행 표시줄)
4. scrollbar-button : 스크롤의 가장 상단 또는 하단 또는 좌우에 위치한 화살표 버튼
5. scrollbar-track-piece : 스크롤 진행 표시줄에서 스크롤 핸들 막대를 제외한 나머지 공간
6. scrollbar-corner : 수평/수직 스크롤 막대가 만나는 스크롤 막대의 하단 모서리
7. resizer : 요소 하단 모서리에 나타나는 크기 조정 핸들

ex) ::scrollbar 

브라우저 접두사

1. -webkit- : chrome 브라우저
ex) -webkit-scrollbar-track-piece 
2. -moz- : firefox 브라우저 지원
3. -o- : opera 브라우저 지원
4. -IE- : 익스플로러 브라우저를 지원

    <div class="imgbox1">
        <h4>scroll X,Y</h4>
        <img src="./img/dog3.jpg" alt="dog" />
    </div>
    <div class="imgbox2">
        <h4>scroll X</h4>
        <img src="./img/dog3.jpg" alt="dog" />
    </div>
    <div class="imgbox3">
        <h4>scroll Y</h4>
        <img src="./img/dog3.jpg" alt="dog" />
    </div>
    
    <br>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
        Odio, veritatis quis amet facere placeat illum porro atque quasi ea tempore magnam 
        corrupti esse debitis iure, voluptatem ipsum laborum recusandae autem!</p>

/* css 코드 */

/* 드래그하여 선택하는 모든 영역의 배경색과 글자색을 바꾸기 */
::selection{
    background-color: lightskyblue;
    color: blueviolet;
}
/* scroll */
.imgbox1{
    width: 300px;
    height: 300px;
    border: 2px solid darkblue;
    float: left;
    box-sizing: border-box;
    margin-left: 30px;
    overflow: scroll;
}
.imgbox2{
    width: 300px;
    height: 300px;
    border: 2px solid darkblue;
    float: left;
    box-sizing: border-box;
    margin-left: 30px;
    overflow-y: hidden;
    overflow-x: scroll;
}
.imgbox3{
    width: 300px;
    height: 300px;
    border: 2px solid darkblue;
    float: left;
    box-sizing: border-box;
    margin-left: 30px;
    overflow-x: hidden;
    overflow-y: scroll;
}
/* 움직일 수 있는 스크롤바 */
.imgbox3::-webkit-scrollbar{
    width: 20px;
    height: auto;
    background-color: lavender;
}
.imgbox3::-webkit-scrollbar-thumb{
    width: 10px;
    height: 20px;
    background-color: salmon;
}
/* 스크롤바의 뒷배경 */
.imgbox3::-webkit-scrollbar-track{
    background-color: lightpink;
}