`overflow` 및 `contain` 속성

Articles

CSS 소개

이 기사에서는 overflow 및 contain 속성에 대해 설명합니다.

overflow 속성을 사용하여 스크롤바 표시 및 클리핑과 같은 내용을 다루는 방법을 배울 수 있습니다.

YouTube Video

미리보기를 위한 HTML

css-overflow-contain.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

`overflow` 및 `contain` 속성

`overflow`

CSS의 overflow 속성은 요소의 내용이 박스 크기를 초과할 경우 해당 내용을 표시하는 방식을 제어하는 중요한 속성입니다. 스크롤바, 클리핑, 요소 오버플로우 관리에 도움을 주며, 웹 페이지의 레이아웃 및 사용자 인터페이스를 구성하는 데 일반적으로 사용됩니다.

`overflow` 속성의 기본

overflow 속성에는 주로 visible, hidden, scroll, auto의 네 가지 값이 있습니다.

`visible`

1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

visible은 기본값으로, 요소의 내용이 박스를 초과하더라도 여전히 보이는 상태로 유지됩니다. 초과된 부분은 다른 요소를 덮을 수 있으나 스크롤바는 표시되지 않습니다.

특징:

컨텐츠가 제한 없이 표시됩니다.
스크롤바는 표시되지 않습니다.

`hidden`

1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden은 요소의 내용이 박스를 초과할 경우 초과된 부분이 표시되지 않는 설정입니다. 스크롤바가 표시되지 않으며 초과된 내용은 볼 수 없습니다.

특징:

컨텐츠가 요소의 경계를 초과할 경우 초과된 부분은 숨겨집니다.
스크롤바는 표시되지 않습니다.

`scroll`

1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

scroll을 사용하면 요소의 내용이 박스를 초과할 경우 스크롤바가 강제로 표시됩니다. 내용이 초과하지 않더라도 스크롤바는 항상 표시됩니다.

특징:

내용이 요소의 경계 안에 있더라도 스크롤바가 표시됩니다.
가로 및 세로 방향으로 스크롤이 가능합니다.

`auto`

1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto는 내용이 초과할 때만 스크롤바를 표시하며, 내용이 요소의 박스 안에 들어갈 경우 스크롤바는 표시되지 않습니다.

특징:

내용이 초과할 때만 스크롤바가 표시됩니다.
자동으로 스크롤 가능한 영역을 생성합니다.

`overflow-x` 및 `overflow-y`

1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

overflow 속성은 가로(x 축) 및 세로(y 축) 방향에 대해 개별적으로 제어할 수 있습니다.

이렇게 하면 overflow-x 및 overflow-y를 사용하여 세로 및 가로 스크롤바의 표시를 개별적으로 설정할 수 있습니다.

오버플로우에 대한 고려사항

overflow 속성을 사용할 때 주의해야 할 몇 가지 사항이 있습니다.

스크롤바의 표시로 인한 디자인 영향

scroll 또는 auto를 사용하여 스크롤바를 표시하면 페이지의 전체적인 디자인이 흐트러질 수 있습니다. 특히 요소가 오른쪽 또는 아래쪽 가장자리에 배치된 경우 스크롤바로 인해 요소가 덜 보이게 될 수 있습니다.

브라우저의 기본 동작

스크롤바의 표시 및 동작 방식은 브라우저마다 다를 수 있습니다. 특히 Windows와 macOS 간에는 스크롤바 표시 스타일의 차이가 있으며, 이로 인해 디자인이 의도한 대로 보이지 않을 수 있습니다. 크로스 브라우저 테스트를 수행하는 것이 중요합니다.

자식 요소의 오버플로우

부모 요소에 overflow: hidden을 설정하면 부모 박스를 초과하는 자식 요소를 숨깁니다. 이로 인해 팝업 및 모달 창이 제대로 표시되지 않을 수 있습니다.

`overflow: clip` (CSS Level 3)

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

새로운 CSS 스펙에서는 overflow: clip이라는 값도 도입되었습니다. 이는 hidden과 유사하지만 스크롤을 허용하지 않고 콘텐츠만 자릅니다. 현재 일부 브라우저에서만 지원됩니다.

특징:

콘텐츠가 넘치면 해당 부분은 완전히 숨겨집니다.
스크롤바는 표시되지 않습니다.

결론

CSS overflow 속성은 웹 디자인에서 콘텐츠 표시를 제어하는 데 필수적인 도구입니다. 콘텐츠가 요소의 박스를 초과하는 상황을 관리하고 적절한 스크롤바나 클리핑을 적용함으로써 사용자에게 보다 사용자 친화적인 인터페이스를 제공합니다. 또한 overflow-x와 overflow-y를 사용하면 세부적인 제어가 가능합니다. 이 값을 사용하면 요소 콘텐츠가 박스를 초과할 때 스크롤바가 강제로 표시됩니다. 내용이 초과하지 않더라도 스크롤바는 항상 표시됩니다.

`contain`

`contain` 속성 개요

CSS contain 속성은 요소가 다른 요소나 전체 페이지에 미치는 영향을 제한하여 브라우저의 렌더링 과정을 최적화합니다. 구체적으로, 요소 내의 스타일이나 레이아웃 변경이 해당 요소 외부의 콘텐츠에 영향을 주지 않도록 하여 리플로우와 리페인트를 제한합니다.

이는 웹 페이지 성능에 중요하며 특히 복잡한 레이아웃이나 대량의 콘텐츠를 가진 웹사이트에 효과적입니다.

`contain`의 값

contain 속성은 다음의 값을 가집니다:.

`layout`

1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

layout은 레이아웃과 관련된 제한을 적용합니다. 이 값을 사용하면 요소의 크기와 위치가 다른 요소에 영향을 미치지 않습니다. 예를 들어, 요소 내부 크기가 조정되더라도 그 변경이 외부 레이아웃에 영향을 주지 않습니다.

`paint`

1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint는 페인팅(그리기)의 영향을 제한합니다. 이 값을 지정하면 요소 내의 그리기가 외부 요소에 영향을 미치지 않아 리페인트 계산 범위를 제한합니다.

`size`

1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size는 요소의 크기가 외부 요소에 의존하지 않도록 보장합니다. 구체적으로, 자식 요소의 크기 조정이 부모 요소의 크기에 영향을 미치지 않도록 방지하여 레이아웃 안정성을 향상시킵니다.

`style`

1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style은 요소의 스타일이 외부 요소에 영향을 미치지 않도록 보장합니다. 예를 들어, contain: style;을 지정하면 해당 요소 내의 스타일 변경이 다른 요소에 영향을 주지 않아 재계산 범위를 줄입니다.

`content`

1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content는 layout, paint, size, style을 적용하는 복합 값입니다. 이를 사용하면 요소의 레이아웃, 그리기, 크기, 스타일이 외부 요소에 전혀 영향을 미치지 않도록 보장할 수 있습니다.

성능상의 이점

contain 속성을 사용하는 주요 이유는 웹 페이지 성능을 개선하기 위함입니다. 특히, 다음과 같은 상황에서 효과적입니다.

리플로우 최적화: 요소의 크기나 레이아웃이 변경될 때, 그 영향이 가능한 작은 범위로 제한됩니다. 이로 인해 불필요한 리플로우(레이아웃 재계산)의 범위가 줄어들고 브라우저의 부하가 감소합니다.
리페인트 감소: 그리기 영역을 제한함으로써, 요소의 스타일이나 콘텐츠가 변경될 때 다시 그려야 하는 영역을 최소화할 수 있습니다.
컴포넌트 기반 개발: 각 컴포넌트나 모듈이 다른 요소로부터 독립적으로 작동하기 때문에, 대규모 웹 애플리케이션에서도 각각의 컴포넌트 성능이 향상됩니다.

노트

contain 속성을 사용할 때는 다음 사항을 염두에 두어야 합니다.

적용 범위 이해하기: contain 속성은 성능 최적화에 유용하지만, 모든 요소에 적용해서는 안 됩니다. 적절한 위치에 적합하게 사용하는 것이 중요합니다. 예를 들어, 자주 변경되는 요소나 큰 DOM 구조의 일부에 사용하는 경우, 오히려 성능이 저하될 수 있습니다.
브라우저 호환성: contain 속성은 비교적 새로운 CSS 기능으로, 모든 브라우저에서 완전히 지원되지 않습니다. Chrome, Firefox, Edge, Safari와 같은 주요 브라우저에서 지원되지만, 이전 버전에서는 적용되지 않을 수 있습니다.

결론

CSS contain 속성은 웹 페이지와 애플리케이션의 성능을 최적화하는 강력한 도구입니다. 특정 요소가 다른 요소에 미치는 영향을 제한함으로써 리플로우와 리페인트 비용을 줄이고 전체 렌더링 프로세스를 간소화합니다. 그러나 적용 위치를 신중히 고려하고 적절히 사용하는 것이 중요합니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

Flexbox, Grid 및 Column 레이아웃 비교

`overflow` 및 `contain` 속성

YouTube Video

미리보기를 위한 HTML

overflow 및 contain 속성

overflow

overflow 속성의 기본

visible

hidden

scroll

auto

overflow-x 및 overflow-y

오버플로우에 대한 고려사항

스크롤바의 표시로 인한 디자인 영향

브라우저의 기본 동작

자식 요소의 오버플로우

overflow: clip (CSS Level 3)

결론

contain

contain 속성 개요

contain의 값

layout

paint

size

style

content

성능상의 이점

노트

결론

YouTube Video

`overflow` 및 `contain` 속성

`overflow`

`overflow` 속성의 기본

`visible`

`hidden`

`scroll`

`auto`

`overflow-x` 및 `overflow-y`

`overflow: clip` (CSS Level 3)

`contain`

`contain` 속성 개요

`contain`의 값

`layout`

`paint`

`size`

`style`

`content`