[CSS] overflow-x /overflow-y

Front-End/HTML5 + CSS

[CSS] overflow-x /overflow-y

리딩리드 2016. 12. 18. 16:28

overflow-x /overflow-y

1. 정의

- overflow는 요소의 내용이 넘칠 때 스크롤 생성, 혹은 보여줄지 말지를 결정

- overflow-x : x축, 왼쪽 오른쪽의 내용을 어떻게 보여줄지 결정

- overflow-y : y축, 위 아래 내용을 어떻게 보여 줄지 결정

2. 속성 및 구현

1) 종류

- visible, hidden, scroll, auto, initial, inherit

2) visible

- 기본값, 내용이 잘리지 않고 밖으로 넘침

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .container{ height:1000px; display: flex; justify-content: center; align-items: center; } .img{ width:400px; height:400px; border: 4px solid aqua; overflow-x: visible; } </style> </head> <div class="container"> <div class="img"> <img src="NicoleRoss-Sugar__spice__and_cupcakes_are_nice-IMG_0801.jpg"> </div> </div>

3) hidden

- 내용이 잘리고 scroll이 생기지 않는다

.img{ width:400px; height:400px; border: 4px solid aqua; overflow-x: hidden; overflow-y: hidden; }

4) scroll

- 잘리지만 scroll이 나타난다

.img{ width:400px; height:400px; border: 4px solid aqua; overflow-x: scroll; overflow-y: scroll; }

5) auto

- 내용이 잘리고 필요할 때만 스크롤이 생김