HTML&CSS - overflow 속성 알아보기

HTML&CSS - overflow 속성 알아보기

 

css의 중요한 개념중 하나인 overflow에 대해서 알아보자.

overflow는 단어 그대로  과다하다, 넘치다와 같이 기존 제한된 크기에 비하여 overflow가 발생하였을때 어떻게 대처할 것인지를 설정하는 속성값입니다.

 

예를 들어 다음과 같은 박스가 있다고 가정했을때

.box {
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
}

이 공간 안에 글을 쓴다고 가정해보자.  이때 box에 지정된 크기보다 내용이 많아지게 되면 다음과 같이 내용이 넘치게 됩니다.

overflow의 기본값으로는 visible이기 때문에 다음과 같이 내용이 넘치게 되더라도 보여지게 된다.

이를 방지하기 위해 overflow에 속성값을 hidden으로 바꾸게 되면 다음과 같이 공간에 맞춰 보여지게 된다.

그 외에 속성값으로는 scroll과 auto가 존재한다.

다음 예제로 보면 scroll은 말그대로 스크롤바가 생기게되는건지는 짐작이 가능하다.

하지만 아래에 auto도 스크롤바가 생긴것을 확인할 수 있다.

auto와 scroll의 차이점은 scroll로 설정시에는 안에 내용에 상관없이 무조건 scroll바가 생기게 되고 

auto에 경우는 내용이 overflow됐을 경우에만 scroll 바가 생긴다는 점이다.