본문 바로가기
HTML/CSS문법

CSS overflow 속성

by flycoding 2023. 8. 22.
반응형

CSS overflow 속성은 너무 커서 영역에 맞지 않는 콘텐츠에 발생하는 작업을 제어한다.

 

CSS overflow 속성

overflow 속성은 요소의 내용이 너무 커서 지정된 영역에 맞지 않을 때 내용을 클리핑할지 스크롤 막대를 추가할지 여부를 지정한다.

overflow속성의 값은 다음과 같다:

속성값 설명
visible 기본값. 오버플로가 잘리지 않습니다. 내용이 요소의 상자 밖으로 렌더링됩니다
hidden 오버플로가 잘리고 나머지 내용은 보이지 않습니다
scroll 오버플로가 잘리고 스크롤 막대가 추가되어 내용의 나머지 부분이 표시됩니다
auto scroll 과 비슷하지만 필요한 경우에만 스크롤 막대를 추가합니다

 

CSS overflow: visible

기본적으로 overflow가 visible하게 표시된다. 즉, 오버플로는 잘리지 않고 요소의 상자 외부에 렌더링된다:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 200px;
  height: 65px;
  border: 1px solid;
  overflow: visible;
}
</style>
</head>
<body>

<h2>Overflow: visible</h2>

<p>기본적으로 오버플로가 표시됩니다. 즉, 오버플로는 잘리지 않고 요소의 상자 외부에 렌더링됩니다:</p>

<div>레이아웃을 더 잘 제어하려는 경우 오버플로 속성을 사용할 수 있습니다. 오버플로 속성은 내용이 요소의 상자를 오버플로할 경우 수행할 작업을 지정합니다.</div>

</body>
</html>

div 요소에 overflow속성에 visible값을 설정하면 아래 그림과 같이 표시된다.

CSS overflow : visible 설정 결과 화면

 

CSS overflow: hidden

hidden 값을 사용하면 오버플로가 잘리고 나머지 내용은 숨겨진다:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 200px;
  height: 65px;
  border: 1px solid;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Overflow: hidden</h2>

<p>기본적으로 오버플로가 표시됩니다. 즉, 오버플로는 잘리지 않고 요소의 상자 외부에 렌더링됩니다:</p>

<div>레이아웃을 더 잘 제어하려는 경우 오버플로 속성을 사용할 수 있습니다. 오버플로 속성은 내용이 요소의 상자를 오버플로할 경우 수행할 작업을 지정합니다.</div>

</body>
</html>

div 요소에 overflow속성에 hidden값을 설정하면 아래 그림과 같이 표시된다.

CSS overflow: hidden 설정 결과 화면

 

CSS overflow: scroll

값을 스크롤로 설정하면 오버플로가 잘리고 스크롤 막대가 추가되어 상자 안에서 스크롤된다. 이렇게 하면 스크롤 막대가 수평 및 수직으로 추가된다(필요하지 않은 경우에도):

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 200px;
  height: 65px;
  border: 1px solid;
  overflow: scroll;
}
</style>
</head>
<body>

<h2>Overflow: scroll</h2>

<p>기본적으로 오버플로가 표시됩니다. 즉, 오버플로는 잘리지 않고 요소의 상자 외부에 렌더링됩니다:</p>

<div>레이아웃을 더 잘 제어하려는 경우 오버플로 속성을 사용할 수 있습니다. 오버플로 속성은 내용이 요소의 상자를 오버플로할 경우 수행할 작업을 지정합니다.</div>

</body>
</html>

div 요소에 overflow속성에 scroll 값을 설정하면 아래 그림과 같이 표시된다.

CSS overflow: scroll 설정 결과 화면

 

CSS overflow: auto

auto 값은 scroll 과 비슷하지만 필요한 경우에만 스크롤 막대를 추가한다:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 200px;
  height: 65px;
  border: 1px solid;
  overflow: auto;
}
</style>
</head>
<body>

<h2>Overflow: auto</h2>

<p>기본적으로 오버플로가 표시됩니다. 즉, 오버플로는 잘리지 않고 요소의 상자 외부에 렌더링됩니다:</p>

<div>레이아웃을 더 잘 제어하려는 경우 오버플로 속성을 사용할 수 있습니다. 오버플로 속성은 내용이 요소의 상자를 오버플로할 경우 수행할 작업을 지정합니다.</div>

</body>
</html>

div 요소에 overflow속성에 auto 값을 설정하면 아래 그림과 같이 표시된다.

CSS overflow: auto 설정 결과 화면

 

CSS overflow-x, overflow-y

overflow-x 및 overflow-y 속성은 컨텐츠의 오버플로를 수평으로 변경할지 수직으로 변경할지(또는 둘 다)를 지정한다:

overflow-x는 내용의 왼쪽/오른쪽 가장자리에서 수행할 작업을 지정한다.
overflow-y는 내용의 위쪽/아래쪽 가장자리에서 수행할 작업을 지정한다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 200px;
  height: 65px;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
</head>
<body>

<h2>Overflow-x, overflow-y</h2>

<p>기본적으로 오버플로가 표시됩니다. 즉, 오버플로는 잘리지 않고 요소의 상자 외부에 렌더링됩니다:</p>

<div>레이아웃을 더 잘 제어하려는 경우 오버플로 속성을 사용할 수 있습니다. 오버플로 속성은 내용이 요소의 상자를 오버플로할 경우 수행할 작업을 지정합니다.</div>

</body>
</html>

div 요소에 overflow-x속성에 hidden 값을 , overflow-y속성에는 scroll값을 설정하면 아래 그림과 같이 표시된다.

CSS overflow-x, overflow-y 설정 결과 화면

 

CSS overflow 속성

속성 설명
overflow 내용이 요소의 상자를 초과할 경우 수행할 작업을 지정합니다
overflow-wrap 브라우저가 컨테이너를 오버플로할 경우 긴 단어로 줄을 끊을 수 있는지 여부를 지정합니다
overflow-x 내용이 요소의 내용 영역을 초과할 경우 내용의 왼쪽/오른쪽 가장자리에서 수행할 작업을 지정합니다
overflow-y 요소의 내용 영역을 초과하는 경우 내용의 위쪽/아래쪽 가장자리에서 수행할 작업을 지정합니다

 

지금까지 CSS에서 overflow속성에 관련하여 개념과 실습을 하였다.

반드시 손으로 눈으로 머리로 실습하며 익히기를 추천합니다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS clear, clearfix 속성  (0) 2023.08.24
CSS float와 clear  (0) 2023.08.23
CSS z-index 속성  (0) 2023.08.21
CSS position 속성  (0) 2023.08.20
CSS width, max-width 속성  (0) 2023.08.19

관련글

댓글

티스토리툴바