[CSS] overflow

날짜:

overflow : 요소나 개체의 콘텐츠가 범위를 벗어날 경우, 처리 방법에 대한 속성 


※실습 스크립트

-visible(default)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <style>
        #box{
            width: 150px;
            height: 150px;
            background-color: lightblue;
            overflow: visible ;
        }
        
    </style>
</head>
<body>
    <div id="box">
        <p>
            모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요
            모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요
            모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요모래성을 열심히 쌓았는데 파도에 휩쓸려간 기분이에요
 
        </p>
    </div>
</body>
</html>
cs

※실행 결과

-컨텐츠가 상자 표시된 부분을 넘어감




-hidden
※실습 스크립트
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <style>
        #box{
            width: 150px;
            height: 150px;
            background-color: lightblue;
            /* overflow 속성 
            visible : 영역이 벗어나도 그대로 보임(기본값)
            hidden : 영역이 벗어나면 전부 숨김처리
            scroll : 스크롤 처리 (무조건 스크롤바 생성됨)
            auto : 영역을 벗어나지 않으면 스크롤 X
                    벗어나면 스크롤로 처리
            */
            overflow: hidden;
        }
        
    </style>
cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  <style>
        #box{
            width: 150px;
            height: 150px;
            background-color: lightblue;
            /* overflow 속성 
            visible : 영역이 벗어나도 그대로 보임(기본값)
            hidden : 영역이 벗어나면 전부 숨김처리
            scroll : 스크롤 처리 (무조건 스크롤바 생성됨)
            auto : 영역을 벗어나지 않으면 스크롤 X
                    벗어나면 스크롤로 처리
            */
            overflow: hidden;
        }
        
    </style>
cs


※수행결과

- 컨텐츠가 넘치는 부분은 잘려서 출력됨


-scroll
※실습 스크립트
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  <style>
        #box{
            width: 150px;
            height: 150px;
            background-color: lightblue;
            /* overflow 속성 
            visible : 영역이 벗어나도 그대로 보임(기본값)
            hidden : 영역이 벗어나면 전부 숨김처리
            scroll : 스크롤 처리 (무조건 스크롤바 생성됨)
            auto : 영역을 벗어나지 않으면 스크롤 X
                    벗어나면 스크롤로 처리
            */
            overflow: scroll;
        }
        
    </style>
cs

※수행 결과









-컨텐츠가 넘치치 않더라도, 하단, 우측의 스크롤 바는 유지된다.


-auto
※실습 스크립트
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
        #box{
            width: 150px;
            height: 150px;
            background-color: lightblue;
            /* overflow 속성 
            visible : 영역이 벗어나도 그대로 보임(기본값)
            hidden : 영역이 벗어나면 전부 숨김처리
            scroll : 스크롤 처리 (무조건 스크롤바 생성됨)
            auto : 영역을 벗어나지 않으면 스크롤 X
                    벗어나면 스크롤로 처리
            */
            overflow: auto;
        }
        
    </style>
cs


※실습 결과
- 콘텐츠의 크기가 클 경우 스크롤을 생성, 작을 경우 자동으로 제거됨
- 실습은 우측 스크롤 바만 생성됨

댓글

댓글 쓰기