overflow ★
overflow속성은 내부 요소가 부모박스의 범위를 벗어날때
어떻게 처리할 것인가를 정하는 속성.
overflow 하위 속성
- overflow: hidden; ★
: 영역을 벗어나는 부분은 숨긴다. 단, 부모박스에 높이가
지정되지 않은 경우 자식요소만큼 부모박스가 늘어난다.
- overflow: scroll;
: 영역을 벗어나는 부분은 스크롤바를 만들어 보여준다.
- overflow: visible;
: 기본값으로 부모영역을 벗어나더라도 보여준다.
- overflow: auto; ★
: 부모영역에서 자식요소가 넘치면 스크롤바를 만들고, 넘치지
않으면 스크롤바를 만들지 않는다.
- overflow: initial;
: 기본값으로 설정함. 즉, visible과 같다.
- overflow : inherit;
: 부모요소의 속성을 상속받는다.
웹 페이지를 비롯한 박스(block)의 내부 스크롤 바를
지정하고 싶을때 scroll속성을 사용한다.
scroll에는 가로 스크롤을 지정하는 overflow-x,
세로 스크롤을 지정하는 overflow-y가 있다.
scroll속성은 가로,세로 스크롤이 모두 나타나는 것이 기본값이다.
만약 특정 스크롤을 숨기고 싶다면 특정 스트롤의
값을 hidden으로 지정해야만 숨길 수 있다.
- overflow : scroll;
: 가로 세로 스크롤을 모두 나타낸다.
- overflow-x : scroll / hidden;
: 가로 스크롤을 나타내거나 숨긴다.
- overflow-y : scroll / hidden;
: 세로 스크롤을 나타내거나 숨긴다.