CSS 레이아웃 - 상한

CSS overflow 속성은 내용이 지정된 영역에 들어가지 않을 때 내용을 처리하는 방식을 제어합니다.

이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다. 이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다. 이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다. 이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다. 이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다. 이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다. 이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다. 이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다. 이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다. 이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다. 이 텍스트는 매우 길며, 그 컨테이너의 높이는 100픽셀입니다. 따라서, 독자가 내용을 스크롤할 수 있도록 스크롤바가 추가되었습니다.

}

CSS Overflow

설명 속성은 내용이 지정된 영역에 들어가지 않을 때 내용을 잘라내는지, 스크롤바를 추가하는지를 지정합니다.

설명 속성은 다음과 같은 값을 설정할 수 있습니다:

  • 보이기 - 기본적으로. 부족한 내용은 잘라지지 않습니다. 내용은 요소 상자 밖에서 렌더링됩니다
  • 숨기기 - 부족한 내용이 잘려지고, 나머지 내용은 보이지 않습니다
  • 스크롤 - 부족한 내용이 잘려지고, 나머지 내용을 보기 위해 스크롤바가 추가됩니다
  • 자동 - 스크롤 비슷하지만, 필요할 때에만 스크롤바를 추가

주의사항:설명 속성은 높이를 지정한 블록 요소에만 적용됩니다.

주의사항:OS X Lion(맥에서)에서 스크롤바는 기본적으로 숨겨져 있으며, 사용할 때에만 표시됩니다(overflow:scroll을 설정한 경우에도):

overflow: visible

기본적으로, 부족한 내용은 보이게 설정됩니다 (보이기) 이므로, 잘라지지 않고 요소 상자 밖에서 렌더링됩니다:

때문에 레이아웃을 더 잘 제어하고 싶을 때 overflow 속성을 사용할 수 있습니다. overflow 속성은 내용이 요소 상자를 벗어나면 어떻게 처리될지를 지정합니다.

예제
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
overflow-y: scroll; /* 수직 스크롤 바 추가 */

}

overflow: hidden

overflow: hidden을 사용하면 숨기기 값이면, 부족한 내용은 잘려지고 나머지 내용은 숨깁니다:

때문에 레이아웃을 더 잘 제어하고 싶을 때 overflow 속성을 사용할 수 있습니다. overflow 속성은 내용이 요소 상자를 벗어나면 어떻게 처리될지를 지정합니다.

예제
  overflow: hidden;
overflow-y: scroll; /* 수직 스크롤 바 추가 */

}

overflow: scroll

값이 설정되면 스크롤그럼에도 불구하고, 스크롤바가 추가됩니다(스크롤바가 필요하지 않더라도):

때문에 레이아웃을 더 잘 제어하고 싶을 때 overflow 속성을 사용할 수 있습니다. overflow 속성은 내용이 요소 상자를 벗어나면 어떻게 처리될지를 지정합니다.

예제
  overflow: scroll;
overflow-y: scroll; /* 수직 스크롤 바 추가 */

}

overflow: auto

자동 자료 값은 스크롤하지만, 필요할 때에만 스크롤바를 추가합니다:

때문에 레이아웃을 더 잘 제어하고 싶을 때 overflow 속성을 사용할 수 있습니다. overflow 속성은 내용이 요소 상자를 벗어나면 어떻게 처리될지를 지정합니다.

예제
  overflow: auto;
overflow-y: scroll; /* 수직 스크롤 바 추가 */

}

overflow-x 및 overflow-y

overflow-x 또는 overflow-y 속성은 내용의 부족으로 인해 요소 상자를 벗어나는 내용이 수직으로만, 수평으로만(또는 둘 다) 변경될지를 지정합니다:

  • overflow-x 내용의 좌측/우측 모서리를 처리하는 방법을 지정합니다.
  • overflow-y 내용의 상단/하단 모서리를 처리하는 방법을 지정합니다.
때문에 레이아웃을 더 잘 제어하고 싶을 때 overflow 속성을 사용할 수 있습니다. overflow 속성은 내용이 요소 상자를 벗어나면 어떻게 처리될지를 지정합니다.

예제
  div {
  overflow-x: hidden; /* 수평 스크롤 바 숨기기 */
overflow-y: scroll; /* 수직 스크롤 바 추가 */

}

직접 테스트해 보세요

모든 CSS Overflow 속성 속성
설명 내용이 요소 프레임에서 넘치면 발생하는 일을 지정합니다.
overflow-x 요소의 내용 영역에서 내용의 좌/우边缘가 넘치면 어떻게 처리할지 지정합니다.
overflow-y 요소의 내용 영역에서 내용의 상/하边缘가 넘치면 어떻게 처리할지 지정합니다.