문서의 이전 판입니다!

CSS Layout - Overflow

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

Source of the article

CSS Layout - Overflow

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에서, 스크롤 막대는 기본 : shlim@repia.com

lastupdate : 2021-03-15

</WRAP>

Source of the article

CSS Layout - Overflow

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>

CSS Overflow

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

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

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

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

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

오션,, CSS, overflow,, visible,, hidden,, scroll,, auto,, overflow-x,, overflow-y

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

목차

CSS Layout - Overflow

Source of the article

CSS Overflow

예제

Source of the article

CSS Overflow

예제

CSS Overflow

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

사용자 도구

사이트 도구

목차

CSS Layout - Overflow

Source of the article

CSS Overflow

예제

Source of the article

CSS Overflow

예제

CSS Overflow

문서 도구