/* CSS에 관해서 이렇게 쓰게 될 줄은 몰랐다.
드롭다운 메뉴를 만들어 보기 전까지. */
overflow란, CSS 특정요소의 자식요소가 부모요소의 범위를 초과 할 때 이러한 상황을 어떠한 방식으로 처리 할지를 결정하는 속성이다. 속성 값으로는 visible, hidden, scroll, auto 등이 있다.
자식요소가 부모요소의 범위를 초과할 때 어떻게 처리 할 지를 결정해야하기 때문에 부모요소에 overflow 속성을 지정해야한다.
1. overflow : visible
- overflow의 값을 visible로 사용 할 경우 특정요소가 부모의 범위를 넘어가더라도, 그대로 보여준다.
2. overflow : hideen
- overflow의 값을 hidden으로 설정하면, 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리한다.
3. overflow : scroll
- overflow의 값을 scroll로 설정하면, 부모요소의 범위를 넘어가는 자식요소를 사용자가 확인 할 수 있도록 스크롤 바로 표시한다. (상하 scroll과 좌우 scroll이 고정으로 설정)
4. overflow : auto
- overflow의 값을 auto로 설정하면, 부모요소의 범위를 넘어가는 자식 요소를 사용자가 확인 할 수 있도록 스크롤 바로 표시한다. (scroll이 상하 또는 좌우로 자동으로 설정)
❗참고: overflow 속성은 아래의 키워드 값을 하나 또는 두 개 사용해 지정합니다. 두 개를 사용한 경우 첫 번째 값은 overflow-x, 두 번째 값은 overflow-y를 지정합니다. 하나만 사용하면 지정한 값을 양 축 모두에 적용합니다. ex) #parent { overflow-x : hidden; overflow-y : visible }
❗참고: 하나의 축을 visible(기본값)로 하고, 다른 축에는 다른 값을 지정할 경우 visible이 auto처럼 동작합니다.
❗참고: JavaScript Element.scrollTop (en-US) 속성을 사용하면 요소의 overflow가 hidden일 때도 스크롤할 수 있습니다.
댓글