overflow 와 scroll
web page 를 작업하고 있는데 화면의 width 를 고정하고 scroll 을 보여주려고 하고 있다. 그런데 계속 div 에 대해 scroll 이 생겨서 화면의 가장 밑으로 scroll 을 하고 나서야 scroll 이 보였다.지금 이 상태가 가장 밖의 div 는 overflow:hidden 인 상태에서 안의 div 가 overflow : auto 인 상황이다.
div.overflow-hidden div.overflow-auto
그런데 나는 이 scroll 이 화면의 가장 밑으로 내려오지 않아도 언제나 보이도록 하고 싶었다. 아래 그림처럼, div 의 scroll 이 아니라 browser 의 scroll 이 되기를 원했다.
이렇게 하기 위해서 여러가지 시도를 해보다가 가장 밖에 있는 div 에 overflow : visible 를 주는 것으로 가능하다는 것을 알았다.
div.overflow-visible div.overflow-visible
그런데 이것이 왜 가능한지 몰라서 조금 조사를 했다.
css property overflow
먼저 overflow 의 값들을 조금 이해하고 가자.ref. 2 에서 css 2.1 에서 overflow 에 대한 specification 을 확인할 수 있다.
ref. 2 에서 보듯이 overflow 는 visible, hidden, scroll, auto, inherit 등의 값을 가질 수 있고, 기본값은 visible 이다.
'overflow'
Value: visible | hidden | scroll | auto | inherit
Initial: visible
example :
.css-test-box { overflow: visible }
web browser 에서 overflow 값들의 대략적인 동작은 아래와 같다.
- visible : 화면을 넘어가는 부분을 보이지는 않더라도 그리는 것이다.
- hidden : 화면을 넘어가는 부분은 안보이기 때문에 그리지 않는다. 쉽게 얘기하면 잘라내는 것이다. 그래서 보여줄 것이 더 없기 때문에 scroll 이 생기지 않는다.
- scroll : hidden 처럼 보여줄 필요가 없는 부분은 잘라내지만, scroll 을 생성해서 잘린 화면을 볼 수 있도록 해준다.
- auto : 이 녀석은 user-agent 마다 다르다고 하는데, 대략적으로 scroll 을 생성하는 것은 같은데, scroll 이 필요없을 때는 scroll 을 숨겨준다.
ref. 1 에서 각 값에 대한 모습들을 그림으로 확인할 수 있다.
overflow:visible 과 Browser scroll
이제 왜 browser scroll 을 사용하기 위해 visible 로 해야 하는지에 대해 알 수 있다. 단순히 overflow 를 auto 나 scroll 을 설정해 주면, browser 에서 div 를 그릴 때 div 의 한 부분으로 scroll 을 그리게 된다. 그래서 위에서 div 의 영역의 제일 하단에 scroll 이 생긴 것이다.그런데, visible 일 때는 div 의 영역을 넘어가는 부분도 다 그리기 때문에 그 부분이 browser 의 view port 를 넘어가게 돼서 browser 에서 scroll 을 만들게 되는 것이다.
댓글 없음:
댓글 쓰기