[css] overflow (visible, hidden, scroll, auto) 속성
반응형
[css] overflow (visible, hidden, scroll, auto) 속성
css 에서 overflow 속성은 요소의 박스에 내용이 더 길 때, 어떻게 보일지 선택하는 속성이다.
overflow 속성은 상속되지 않는다.
overflow 속성 사용법
visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.
hidden : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 한다.
scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시 한다.
(스크롤바 항상 표시)
auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시 한다.
(내용이 넘칠때만 스크롤바 표시)
기본 html 소스
실행 결과는 다음과 같다.
overflow 의 scroll 과 auto 속성의 차이를 잘 확인해 보자.
overflow: scroll 과 auto 속성은 부모요수의 범위를 넘어가는 자식요소의 부분은 보이지 않지만 사용자가 확인 할 수 있도록 스크롤바를 표시하는 것은 동일하다.
하지만 스크롤바가 항상 표시되냐 아니냐의 차이가 있다.
아래의 예제를 통해 확인 해 보자.
기본 html 소스
실행 결과는 다음과 같다.
반응형
'develop > css' 카테고리의 다른 글
| [css] a 태그(Tag) 속성 (link, visited, active, hover) 사용하는 방법 (0) | 2017.12.22 |
|---|---|
| [css] overflow-x 와 overflow-y 의 속성 (0) | 2017.10.24 |
| [css] 여백 (margin, padding) 속성 (0) | 2017.09.26 |
| [css] position (static, relative, absolute, fixed) 의 속성 (1) | 2017.09.25 |
| [css] clear(none, both, left, right) 의 속성 (0) | 2017.09.24 |
TAGS.