css의 overflow에 대해 알아보자

overflow

요소의 내용이 블럭의 크기보다 커서 서식을 맞출 수 없을 때 사용하는 속성이다
overflow는 다음과 같은 값을 가질 수 있다

• visible
• hidden
• clip
• scroll
• auto

visible

기본 값으로 블럭의 크기보다 안의 내용이 크더라도 상관하지 않고 모두 보여준다

hidden

블럭의 크기만큼만 보여주고 나머지 내용은 가린다
스크롤을 제공하지 않지만 코드로 스크롤링을 구현해 사용 할 수 있다

clip

hidden과 거의 같지만 스크롤링을 코드로서 구현하는 것도 못하도록 방지한다

scroll

이름과 같이 스크롤을 제공해주고 스크롤을 통해 숨겨진 내용을 확인할 수 있다
항상 스크롤을 표시한다

auto

내용이 더 클 때는 스크롤이 나타나고 아닐 때는 자동으로 스크롤이 나타나지 않는다

overflow-x, overflow-y

overflow는 overflow: visible hidden;와 같이 값을 두 개 줄 수 있는데
첫 번째 값이 overflow-x값, 두 번째 값이 overflow-y값이다
두 개를 다 사용하지 않고 한 축만 사용하고 싶다면 overflow-x: hidden; 처럼 사용하면 된다

사용

현재 만들고 있는 프로젝트의 기능 중 다음과 같은 경우 사용되었다

• 이미지슬라이드
  이미지 슬라이드 구현시 이미지 상위 컨테이너에 overflow:hidden; 속성을 부여하고 구현하였다
  hidden 값은 원하는 크기만큼만 보이고 나머지는 가려주기 때문에 여러 이미지가 일렬로 줄지어있는 형태인 이미지 슬라이드에 사용하기 적합했다

• 토글 메뉴
  on/off 상태를 체크해 해당 내용을 보여주는 토글 메뉴 기능을 구현하기 위해서 overflow 값을 hidden 상태로 두고 max-height 값을 변경하여 화면에 나타내도록 구현하였다

max-height를 사용한 이유
hidden된 내용이 보여지는 정도를 설정하는 것은 단순히 height 값으로도 가능하다
하지만 height를 사용하면 동적인 내용에 대해서 대응하기 어려웠다

내용이 고정되어 있는 것이 아닌, 때에 따라 변하는 값이라면 height를 정확히 내용에 맞게 주지 않는 이상 원하는 만큼 내용을 보여주기가 어려웠다

그래서 사용하게 된 것이 max-height였다
max-height값을 이용하면 자동으로 내용에 맞춰 hidden되는 크기(컨테이너의 높이)가 정해지기 때문에 원하는 기능을 구현할 수 있었다