[css] overflow-x 와 overflow-y 의 속성
[css] overflow-x 와 overflow-y 의 속성
이전에 overflow 속성에 대해서 배웠는데,
overflow 속성은 요소의 박스에 내용이 더 길때, 어떻게 보일지 선택하는 속성이다.
overflow (visible, hidden, scroll, auto) 속성 보기
그렇다면 overflow 속성을 이용해서 가로 또는 세로 축만 스크롤바를 생성 시킬려면 어떻게 해야 할까?
바로 overflow-x 와 overflow-y 속성을 사용 하면 된다.
overflow-x 속성은 x축, 즉 왼쪽과 오른쪽의 내용이 더 길 때(가로),
overflow-y 속성은 y축, 즉 위와 아래의 내용이 더 길때 (세로) 어떻게 보일지 선택하는 속성 이다.
overflow-x 속성 사용법
visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.
hidden : 부모요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리한다.
(가로 스크롤바가 나타나지 않을 뿐 브라우저에 따라 세로 스크롤바는 나타남)
scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시한다.
(가로 스크롤바 항상 표시)
auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시 한다.
(내용이 넘칠때만 가로 스크롤바 표시)
기본 html 소스
실행 결과는 다음과 같다.
overflow-y 속성 사용법
visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.
hidden : 부모요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리한다.
(세로 스크롤바가 나타나지 않을 뿐 브라우저에 따라 가로 스크롤바는 나타남)
scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시한다.
(세로 스크롤바 항상 표시)
auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시 한다.
(내용이 넘칠때만 세로 스크롤바 표시)
기본 html 소스
실행 결과는 다음과 같다.
'develop > css' 카테고리의 다른 글
| [css] a 태그(Tag) 속성 (link, visited, active, hover) 사용하는 방법 (0) | 2017.12.22 |
|---|---|
| [css] overflow (visible, hidden, scroll, auto) 속성 (0) | 2017.10.23 |
| [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 |