오버플로

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 41번째.

CSS에서 overflow 속성은 요소의 box를 넘치는 콘텐츠에 어떤 일이 발생하는지 제어합니다. 요소의 콘텐츠가 지정된 width와 height 안에 들어가기에는 너무 큰 경우, overflow 속성은 콘텐츠를 잘라낼지, scrollbar를 추가할지, 또는 요소의 경계 바깥에 넘치는 콘텐츠를 표시할지를 결정합니다.

overflow 속성을 사용하는 기본 구문은 다음과 같습니다.

selector {
    overflow: value;
}

value: 원하는 overflow 동작으로, 다음 중 하나일 수 있습니다:

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

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

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

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

예를 들어:

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

이 예제에서는 너비가 200px이고 높이가 100px인 모든 <div> 요소에 넘치는 콘텐츠를 보기 위한 스크롤바가 추가됩니다.

overflow-x 및 overflow-y 속성을 사용하여 가로 및 세로 방향의 overflow 동작을 독립적으로 제어할 수도 있습니다.

.example {
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: scroll; /* Add a vertical scrollbar */
}

챌린지

쉬움

긴 텍스트가 포함된 문단(<p>)을 포함하는 division(<div>)이 있는 HTML 문서가 주어집니다. 넘치는 콘텐츠가 표시되는 방식을 제어하려면 overflow 속성을 사용해야 합니다. 아래 단계를 따르세요:

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