Overflow

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 41번째.

CSS에서 overflow 속성은 요소의 박스를 넘치는 콘텐츠에 어떤 일이 일어날지를 제어합니다. 요소의 콘텐츠가 지정된 너비와 높이에 비해 너무 커서 맞지 않을 때, overflow 속성은 콘텐츠를 자를지, 스크롤바를 추가할지, 아니면 요소의 경계 밖에 넘치는 콘텐츠를 표시할지를 결정합니다.

overflow 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    overflow: value;
}

value: 원하는 오버플로 동작이며, 다음 중 하나일 수 있습니다:

visible: 이것은 기본값입니다. 넘치는 콘텐츠는 요소의 박스 바깥에 렌더링되며 인접한 요소와 겹칠 수 있습니다.

hidden: 넘치는 콘텐츠는 잘리고 나머지 콘텐츠는 보이지 않습니다.

scroll: 요소에 스크롤바(가로 및 세로 모두)를 추가하여 사용자가 넘치는 콘텐츠를 스크롤할 수 있게 합니다.

auto: 브라우저가 콘텐츠와 사용 가능한 공간에 따라 스크롤바 추가 여부를 결정합니다. 일반적으로 스크롤바는 필요한 경우에만 추가됩니다.

예를 들어:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

이 예제에서, 너비가 200px이고 높이가 100px인 모든 <div> 요소는 넘치는 콘텐츠를 볼 수 있도록 스크롤바가 추가됩니다.

또한 overflow-x 및 overflow-y 속성을 사용하여 가로 및 세로 방향에 대한 오버플로 동작을 독립적으로 제어할 수 있습니다:

.example {
    overflow-x: hidden; /* 가로 넘침 숨기기 */
    overflow-y: scroll; /* 세로 스크롤바 추가 */
}

챌린지

쉬움

긴 텍스트가 포함된 단락(<p>)을 포함하는 디비전(<div>)이 있는 HTML 문서가 주어집니다. 여러분의 작업은 overflow 속성을 사용하여 넘치는 콘텐츠가 표시되는 방식을 제어하는 것입니다. 아래 단계를 따르세요:

<div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width를 300px로, height를 150px로, border를 1px solid black으로 설정하세요.
<div>의 overflow 속성을 scroll로 설정하여 요소에 스크롤바를 추가하세요.

치트 시트

overflow 속성은 요소의 박스를 넘치는 콘텐츠에 어떤 일이 일어날지를 제어합니다:

selector {
    overflow: value;
}

Overflow 값:

visible: 기본값. 콘텐츠가 요소의 박스 밖으로 넘칩니다.
hidden: 넘치는 콘텐츠가 잘리고 보이지 않습니다.
scroll: 스크롤바를 추가합니다 (가로 및 세로).
auto: 브라우저가 필요한 경우에만 스크롤바를 추가합니다.

예제:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

가로 및 세로 오버플로우를 독립적으로 제어하기:

.example {
    overflow-x: hidden; /* 가로 오버플로우 숨기기 */
    overflow-y: scroll; /* 세로 스크롤바 추가 */
}

직접 해보기

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>