CSS_overflow

song·2023년 7월 20일

CSS_web1

목록 보기
10/18

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로 바꾸면 보임!
  1. 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;}
profile
계속 나아가기

1개의 댓글

comment-user-thumbnail
2023년 7월 20일

가치 있는 정보 공유해주셔서 감사합니다.

답글 달기