CSS 오버플로

태그의 텍스트가 요소에 맞지 않으면 텍스트가 요소 상자 외부에서 렌더링되어야 한다고 코드에 지시합니다. 보시다시피 일부 텍스트 overflowing이 발생했습니다. 상자 밖에.

오버플로 표시 값은 유용하지만 오버플로 속성에 대한 다른 값만큼 적절하지 않을 수 있습니다. 이는 대부분의 경우 요소의 내용이 넘치는 것을 원하지 않기 때문입니다. 넘치는 내용은 웹 페이지에 대해 만든 다른 스타일을 방해할 수 있기 때문입니다.

스크롤 오버플로

스크롤 값을 사용하면 웹 요소의 오버플로 콘텐츠를 자를 수 있습니다. 그러면 스크롤바가 요소에 추가되어 사용자가 넘쳐나는 내용을 볼 수 있습니다.

스크롤 오버플로 값은 이러한 스크롤 막대 중 하나가 필요하지 않더라도 웹 요소에 수직 및 수평 스크롤 막대를 모두 추가합니다.

상자를 디자인하고 넘쳐나는 텍스트가 상자 안에 남아 있기를 원한다고 가정합니다. 넘치는 텍스트가 있는 경우 사용자가 상자를 탐색할 수 있도록 스크롤 막대가 나타나야 합니다.

상자를 디자인하는 데 사용할 수 있는 코드는 다음과 같습니다.

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "scroll".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: scroll;
}

코드는 다음을 반환합니다.

[Code result here]


우리 코드에서 너비 200픽셀, 높이 100픽셀의 상자를 만들었습니다. 우리 상자는 밝은 회색 배경색을 가지고 있습니다.

또한 overflow 속성을 "scroll"과 동일하게 설정합니다. 보시다시피, 텍스트가 너무 많아서 상자에 맞지 않기 때문에 스크롤 막대가 나타나고 넘치는 텍스트는 상자 테두리 안에 남아 있습니다.

자동 오버플로

스크롤 속성이 가로 및 세로 스크롤 막대 중 하나가 필요하지 않은 경우에도 웹 요소에 가로 및 세로 스크롤 막대를 모두 추가한다고 지난 섹션에서 언급했습니다.

이것은 많은 경우에 유용할 수 있지만 웹 요소를 디자인할 때 관련 스크롤 막대만 표시되기를 원할 수 있습니다. 이를 위해 auto 값을 사용할 수 있습니다.

auto 값은 스크롤 값과 유사한 방식으로 작동하지만 필요할 때만 웹 요소에 스크롤 막대를 추가합니다. 텍스트 상자가 있고 필요할 때만 상자에 스크롤 막대를 추가하고 싶다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "auto".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: auto;
}

코드는 다음을 반환합니다.

[Code result here]


위의 예에서 우리는 밝은 회색 배경을 가진 200px x 100px 높이의 상자를 만들었습니다. 그런 다음 overflow 속성 값을 auto로 설정합니다. 보시다시피 최종 결과에는 하나의 스크롤 막대만 표시됩니다. 이는 텍스트 상자에 넘치는 내용을 표시하는 데 하나의 스크롤 막대만 필요하기 때문입니다.

숨겨진 오버플로

요소에서 넘쳐나는 내용을 잘라낸 다음 사용자에게 숨기도록 결정할 수 있습니다. 이것은 숨겨진 오버플로 값을 사용하여 수행됩니다.

요소 외부에 오버플로되는 경우 내용을 숨기고 싶은 텍스트 상자가 있다고 가정합니다. 다음 코드를 사용하여 이 상자를 만들 수 있습니다.

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "hidden".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: hidden;
}

코드는 다음을 반환합니다.

[Code result here]


이전 예와 달리 상자의 넘치는 텍스트는 사용자에게 숨겨져 있습니다. 오버플로 속성의 값을 hidden으로 설정했기 때문입니다. 우리 코드에서.

오버플로 x 및 오버플로 y

overflow-x 및 overflow-y 속성을 사용하면 콘텐츠의 오버플로가 각 축에서 개별적으로 처리되는 방식을 변경할 수 있습니다.

overflow-x 속성은 상자의 왼쪽과 오른쪽 가장자리의 오버플로를 처리하는 방법을 지정하고 overflow-y 속성은 상자의 위쪽 및 아래쪽 가장자리의 오버플로를 처리하는 방법을 지정합니다.

상자를 디자인하고 x축과 y축에 대해 두 개의 다른 오버플로 값을 설정하려고 한다고 가정합니다. x축은 hidden을 사용해야 합니다. 오버플로 값, y축은 scroll을 사용해야 합니다. 오버플로 값. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS x-overflow and y-overflow properties to set overflow values for the individual axes in a web element.</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow-x: hidden;
	overflow-y: vertical;
}

코드는 다음을 반환합니다.

[Code result here]


보시다시피 상자에는 가로 스크롤 막대가 없습니다. overflow-x의 값을 "hidden"으로 설정했기 때문입니다. 그러나 우리 상자에는 overflowy 값을 "scroll"로 설정했기 때문에 나타나는 수직 스크롤 막대가 있습니다.

결론

CSS 오버플로 속성은 요소의 내용이 웹 페이지의 할당된 영역에 맞지 않을 때 요소의 내용이 표시되는 방식을 지정합니다.

이 자습서에서는 몇 가지 예를 참조하여 CSS overflow 속성과 네 가지 값을 사용하여 웹 요소의 오버플로를 제어하는 ​​방법을 살펴보았습니다. 이제 전문 개발자처럼 CSS 오버플로 속성을 사용할 준비가 되었습니다.