CSS overflow 지정영역 외 처리

CSS overflow는 지정한 해당영역 외에 내용이 너무 길어져서 부분에 맞지 않아 그 해당영역외에 넘어간 요소들을 어떻게 처리할 것인가에 관한 CSS입니다. 프로그램상에서 지정영역에 글자제한 수를 주기도 하지만 디자인적으로 볼때 유동적인 디자인을 사용할 수 있어 사이트를 조금더 오래볼 수 있게끔 하게 해주는 요소이기도 합니다.

overflow 속성

visible - 기본값이며 오버된 영역이 잘리지 않습니다. 또한 지정역역 밖에 그대로 나오게됩니다.

width:200px; height:50px; overflow:visible; background:#ccc

위와같이 지정영역 width-200px, height-50px에 넘어서 밖으로 그대로 노출이 됩니다.

hidden - 오버된 영역이 잘리고 내용이 보여지지 않습니다.

width:200px; height:50px; overflow:visible; background:#ccc

노출하고 싶지 않은 내용이 있을때 히든처리를 많이 합니다.

scroll - 오버된 영역이 잘리지만 스크롤 바가 생겨 나머지를 스크롤로 볼 수 있습니다.

width:200px; height:50px; overflow:visible; background:#ccc

필요에 의해서 또는 표시할 영역은 작은데 내용은 너무 많으면 스크롤로 사용합니다.

auto - 오버된 영역이 잘리는 경우 스크롤바를 추가하여 나머지를 스크롤로 볼 수 있습니다.

width:200px; height:50px; overflow:visible; background:#ccc

overflow-x , overflow -y - 수평이나 수직으로 스크롤을 개별로 줄 수 있습니다.

width:200px; height:50px; overflow:visible; background:#ccc

width:200px; height:50px; overflow:visible; background:#ccc

overflow css로 영역안보다 큰 이미지를 넣어 히든처리하거나 마우스 오버시에 안에 이미지를 움직인다거나 여러가지 방법들을 이용하여 사이트의 흥미로운 요소들을 많이 만들곤 합니다.