문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_overflow
wiki:css:css_note:css_overflow

목차

CSS Layout - Overflow

  • description : CSS width, max-width,
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-15



Source of the article



CSS Overflow

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

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Overflow</title>
    <style>
        #overflowTest {
            background-color: #4caf50;
            color: white;
            padding: 15px;
            width: 50%;
            height: 100px;
            border: 3px solid crimson;
            overflow: scroll;   /* 스크롤 막대를 생성한다.*/
        }
 
        #overflowTest strong {
            color: black;
        }
    </style>
</head>
 
<body>
 
    <h2>CSS Overflow</h2>
    <p>
        The overflow property controls what happens to content that is too big to fit into an area.
    </p>
 
    <div id="overflowTest">
        <strong>This text is really long and the height of its contatiner is only 100 pixels. Therefore, a scrollbar is
        added to help th reader to scroll the content.</strong>Lorem ipsum dolor sit amet, consectetuer adipiscing
        elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
        minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
        delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
        nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus
        legentis in iis qui facit eorum claritatem.
    </div>
 
</body>
 
</html>



ovrflow속성은 요소의 콘텐츠가 너무 커서 지정 영역에 맞지 않을 때 콘텐츠를 자르거나 스크롤 막대를 추가할 지를 지정합니다.

ovrflow속성에는 하기의 값들이 있습니다.

  • ''visible'' - 기본 값, 오버플로우 (넘지는 부분)는 잘리지 않습니다. 콘텐츠는 요소의 박스 외부에서 만들어집니다.
  • ''hidden'' = 오버플로우는 잘려지고, 콘텐츠의 나머지는 보이지 않습니다.
  • ''scroll'' - 오버플로우는 잘려지고, 스크롤 막대가 추가되어 콘텐츠의 나머지를 볼 수 있습니다.
  • ''auto'' - scroll과 비슷하지만 필요한 경우에만 스크롤 막대를 추가합니다.


Note:overflow속성은 지정 높이를 가진 블록 요소에만 적용됩니다.

Note:Mac의 X Lion OS에서, 스크롤 막대는 기본적으로 숨겨져 있고, 사용 중일 때만 표시됩니다.(“overflow:scroll”이 설정되었어도)

overflow: visible

overflow의 기본 값은 visible이며, 이는 넘치는 부분이 잘리지 않고, 요소의 박스 외부에서 만들어진다는 것을 의미합니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow</title>
    <style>
        div {
            background-color: lightgray;
            width: 200px;
            height: 50px;
            border: 1px solid black;
            overflow: visible;
        }
    </style>
</head>
 
<body>
 
    <h2>CSS Overflow</h2>
    <p>
        By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:
    </p>
    <div>
        You can use the overflow property when you want to have better control of the layout. The overflow property
        specifies what happens if content overflows an element's box.
    </div>
 
</body>
 
</html>



Overflow: hidden

hidden값을 가지면, 넘치는 부분은 잘려지고, 콘텐츠의 나머지 부분은 숨겨집니다.:

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow: hidden</title>
    <style>
        div {
            background-color: lightgrey;
            width: 200px;
            height: 50px;
            border: 2px dotted black;
            overflow: hidden;
        }
    </style>
</head>
 
<body>
 
    <h2>CSS Overflow: hidden</h2>
    <p>
        With th hidden value, the overflow is clipped, and the rest of the content is hidden:
    </p>
    <p>Try to remove the overflow property to understand how it works.</p>
 
    <div>
        You can use the overflow property when you want to have better control of the layout. The overflow property
        specifies what happens if content overflows an element's box.
    </div>
 
</body>
 
</html>



overflow: scroll

scroll값을 설정하면, 넘치는 부분은 잘려지고, 박스 내부에 스크롤하기 위한 스크롤 막대가 추가됩니다. 필요하지 않더라도 가로 그리고 세로 방향 에 스크롤 막대가 추가될 것 입니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow: scroll</title>
    <style>
        div {
            background-color: lightgrey;
            width: 200px;
            height: 100px;
            border: 2px dotted redd;
            overflow: scroll;
        }
    </style>
</head>
 
<body>
 
    <h2>CSS Overflow</h2>
    <p>
        Setting the overflow value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box.
        Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):
    </p>
 
    <div>
        You can use the overflow property when your want to haver better control of the layout. The overflow property
        specifies what happens if content overflows an element's box.
    </div>
 
</body>
 
</html>



overflow: auto

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

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow: auto</title>
    <style>
        div {
            background-color: lightgray;
            width: 200px;
            height: 50px;
            border: 3px solid crimson;
            overflow: auto;
        }
    </style>
</head>
 
<body>
 
    <h2>CSS Overflow: auto</h2>
    <p>
        The auto value is similar to scroll, only it adds scrollbars when necessary:
    </p>
 
    <div>
        You can use the overflow property when you want to have better control of the layout. The overflow property
        specifies what happens if content overflows an element's box.
    </div>
 
</body>
 
</html>



Overflow-x and overflow-y

overflow-x와 overflow-y 속성은 콘텐츠의 넘치는 부분을 가로 또는 세로 (또는 양쪽 모든 방향으로) 방향으로만 변경할 지를 지정합니다.

overflow-x는 콘텐츠의 좌측/우측 가장자리 방향으로 무엇을 할 지를 지정합니다.
overflow-y는 콘텐츠의 상단/하단 가장자리 방향으로 무엇을 할 지를 지정합니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow-x and overflow-y</title>
    <style>
        div#overflow-x {
            background-color: lightgray;
            width: 200px;
            height: 50px;
            border: 2px dotted crimson;
            overflow-x: scroll;  /* Add horizontal scrollbar */
            overflow-y: hidden;  /* Hide vertical scrollbar */
        }
 
        div#overflow-y {
            background-color: lightgray;
            width: 200px;
            height: 50px;
            border: 2px dotted blue;
            overflow-x: hidden;      /* Hide horizontal scrollbar */
            overflow-y: scroll;      /* Add vertical scrollbar */
        }
    </style>
</head>
 
<body>
 
    <h2>CSS overflow-x and overflow-y</h2>
    <p>You can also change the overflow of content horizontally or vertically.</p>
    <p>overflow-x specifies what to do whith the left/right edges of the content.</p>
    <p>overflow-y specifies what to do with the top/bottom edges of the content.</p>
    <br>
    <strong>overflow-x</strong>
    <div id="overflow-x">
        You cna use the overflow property when you want to have better control of the layout. The overflow property
        specifies what happens if content overflows an element's box.
    </div>
    <br>
    <strong>overflow-y</strong>
    <div id="overflow-y">
        You cna use the overflow property when you want to have better control of the layout. The overflow property
        specifies what happens if content overflows an element's box.
    </div>
 
</body>
 
</html>



All CSS Overflow Properties

Property Description
overflow 콘텐츠가 요소의 박스에서 넘치는 경우 발생하는 작업을 지정합니다.
overflow-x 콘텐츠가 요소의 콘텐츠 영역에서 넘지는 경우 콘텐츠의 좌측/우측 가장자리 방향으로 수행할 작업을 지정합니다.
overflow-y 콘텐츠가 요소의 콘첸츠 영역에서 넘지는 경우 콘텐츠의 상단/하단 가장자리 방향으로 수행할 작업을 지정합니다.
/volume1/web/dokuwiki/data/pages/wiki/css/css_note/css_overflow.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki