overflow
박스안에 컨텐츠가 많아 범위를 넘어갈때 넘치는 부분을 어떻게 보여줄지 정하는 속성.
overflow : hidden★
height속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨김.
height속성이 지정되어 있지 않을 경우 컨텐츠에 맞춰 늘어남.
overflow : scroll★
영역을 벗어나는 부분은 스크롤 바를 나타나게 함.
overflow : visible
기본 값으로 영역에서 벗어난 부분을 그대로 보여줌.
overflow : auto
박스를 넘어가지 않으면 스크롤바가 보이지 않고 넘어가면 보여줌.
overflow : initial
기본값으로 설정함.
overflow : inherit
부모 요소의 속성값을 상속받음.
<예시>
기본값
overflow : auto;
위의 이미지와 같이 박스보다 컨텐츠가 많이 범위를 넘어가는 만큼 스크롤이 생긴다.
기본값
overflow : hidden;이때 높이값을 지정할 경우 컨텐츠에 넘치는 부분을 숨기며 없을 경우 박스사이즈가 늘어난다.
기본값
overflow : scroll;
기본값
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 : 요소 하단 모서리에 나타나는 크기 조정 핸들
브라우저 접두사
1.-webkit- :chrome 브라우저 호환개념
2.-moz- : firefox 브라우저 지원
3.-o- :opera 브라우저 지원
4.-IE- : 익스플로러 브라우저를 지원
