[HTML] overflow-x와 overflow-y 속성

 

overflow 속성은 내용이 길어서 화면에 넘칠 경우 처리 방법으로, overflow-x, overflow-y 값을 설정.
적용 가능한 방법은 넘친 내용을 그대로 나두거나, 잘라내거나, 스크롤바 노출.

 

 

√ X,Y축 공통으로 사용 할 경우!
overflow : visible;
 - 전체 노출
overflow : hidden;
 - 화면 크기까지만 노출 후 나머진 잘라내기
overflow : scroll;
 - 크기 상관 없이 넓이와 높이 Scrollbar 생성
overflow : auto;
 - 크기에 따라 넓이와 높이 Scrollbar 생성

 

√ X,Y축 따로 사용 할 경우!
overflow-x : visible; overflow-y : visible;
 - 전체 노출
overflow : hidden; overflow-y : hidden;
 - 화면 크기까지만 노출 후 나머진 잘라내기