[html/css] Overflow와 Scrollbar 꾸미기

overflow 

 

박스 안의 컨텐츠가 많아 범위를 넘어갈 때 사용하는 속성이다.

hidden, scroll, visible, auto, initial, inherit 과 같은 속성값을 사용해 범위밖을 보여줄 방식을 정한다.

overflow: hidden; ★★★       
 height 속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨긴다. 
 만약 height 속성이 지정되어 있지 않을 경우 컨텐츠에 맞춰 늘어난다.

overflow: scroll; ★★★
영역을 벗어나는 부분은 스크롤 바가 나타나게한다.

overflow: visible;
기본값으로, 영역에서 벗어난 부분을 그대로 보여준다.

overflow: auto; ★
박스를 넘어가지 않으면 스크롤바가 보이지 않고 넘어가면 보여준다.

overflow: initial;
기본값으로 설정한다.

overflow: inherit;
부모 요소의 속성값을 상속받는다.

---

overflow: auto;

박스를 넘어간 컨텐츠에 맞춰 자동으로 스크롤을 생성해 보여준다.

---

overflow: hidden;

 

높이 값을 준 상태에서 overflow: hidden;을 사용했을 때,
지정된 높이 만큼만 컨텐츠가 보이고 나머지 부분은 숨겨진다.

높이 값이 없는 상태에서 overflow: hidden;을 사용할 때,
컨텐츠의 양에 맞춰 높이가 늘어난다.

---

overflow: scroll

 

scroll에는  기본적으로 x축과 y축이 존재하기 때문에 속성을 사용하면 x,y축이 함께 나온다.

속성을 적용시에는 x축과 y축을 각각 적용시킬 수 있다.

img 파일에 scroll 적용시켜보기.

scroll 적용 전 기본값

scroll 적용 후

---

Y축의 스크롤 숨기기

y축 숨겨라 라고 지정했는데도 가로 스크롤이 나왔다.

기본적으로 가로세로 스크롤이 나타나는 것이 기본값인데, 

하지만, 컴퓨터는 확실하게 지정해주지 않으면 오류가 날 수 있기 때문에 x 스크롤이 나와라 라고 제대로 지정해주는 것이 좋다.

 

 

결과 값은 동일

 

 

---

스크롤바 모양 바꾸기

스크롤바의 명칭은 아래(하단 사진 색깔)와 같습니다.
1. Scrollbar : 스크롤 전체
2. Scrollbar-thumb(노란색) : 드레그가 가능한 스크롤 핸드 막대
3. Scrollbar Track(파란색) : 스크롤을 움직이는 전체 영역(=진행 표시줄)
4. Scrollbar Button(빨간색) : 스크롤의 가장 끝부분에 위치한 화살표 버튼
5. Scrollbar-track-piece(보라색) : 스크롤 진행표시줄에서 스크롤 핸드 막대를 제외한 나머지 빈 공간
6. Scrollbar-corner(녹색) : 수평/수직 스크롤 막대가 만나는 스크롤 막대의 모서리 부분
7. resizer : 요소 하단 모서리에 나타나는 크기 조정 핸들

브라우저 접두사
1. -webkit- : 크롬 브라우저 지원
2. -moz- : firefox 브라우저 지원
3. -o- : opera 브라우저 지원
4. -IE- : 익스플로러 브라우저를 지원

<기본형>
태그명::-브라우저접두사-Scrollba{속성값;}