CSS_overflow

overflow : 영역을 넘어가는 부분을 관리

• overflow-x, overflow-y가 합쳐진게 overflow

1. visible : 기본값
2. ★★hidden : 넘치는 부분 다 숨김 (overflow를 쓰는 이유)
3. scroll : 넘치던 말던 스크롤바 달아줌

• 넣으려는 축기준으로 해서 overflow-y: scroll 로 쓰면 된다. (혹은 overflow-x)
• scroll쓸 때 주의점!
  • height값을 주게 되면 그 height기준으로 스크롤한계가 나타날 수 있으므로 주의!!
    눈에 보이고 있는 height값이 아닌 100%로 주고 position으로 위치를 옮기게 되면 맨 밑에 있는 영역은 보이지 않는다.
    height : 100% - position으로 옮긴만큼의 값
    으로 줘야됨.
    position으로 옮긴만큼의 영역은 계속 모니터 밖에 있게 되기 때문.
• .클래스명::-webkit-scrollbar-track -> 스크롤 구역 배경색
  .클래스명::-webkit-scrollbar-thumb -> 스크롤바 색

  .nav::-webkit-scrollbar {
     width: 3px;
  }
  .nav::-webkit-scrollbar-track {
     background-color: transparent;
  }
  .nav:hover::-webkit-scrollbar-thumb {
     background-color: gray;
     border-radius: 10px;
  }

  • transparent -> 투명색
    너비 3px로 주고, 스크롤 배경색 투명으로 주고, hover를 하면 색을 gray로 바꾸면 보임!

4. auto : 넘치는 부분쪽만 스크롤바 달아줌
   -> 본문 중간에 스크롤바 달려있으면 안예뻐서 scroll, auto잘 안쓰임.

div{
    width: 300px;
    height: 100px;
    background-color: pink;

    margin-bottom: 50px;
}
.visible{overflow: visible;}
.hidden{overflow: hidden;}
.scroll{
    overflow-y: scroll;
}
.auto{overflow: auto;}