테스트 사이트 - 개발 중인 베타 버전입니다

CSS Overflow Visible

CSS Overflow

 

CSS overflow속성은 요소의 내용이 너무 커서 지정한 영역에 맞지 않을 때 내용을 클립할지 또는 스크롤 막대를 추가 할지를 지정합니다.

 

 

overflow속성의 값은 다음과 같습니다.

 

visible - 기본값. 오버플로가 잘리지 않습니다. 그것은 요소의 상자 밖에서 렌더링됩니다.

hidden - 오버플로가 잘리고 나머지 내용은 보이지 않습니다.

scroll - 오버플로가 잘리지 만 스크롤 바가 추가되어 나머지 내용을 볼 수 있습니다.

auto - 오버플로가 잘리는 경우 스크롤바를 추가하여 나머지 콘텐츠를 확인해야합니다.

 

 

참고 : 이 overflow속성은 지정된 높이의 블록 요소에만 적용됩니다.

 

참고 : Mac에서는 OS X Lion에서 스크롤바는 기본적으로 숨겨져 있으며 ( "오버플로 : 스크롤"이 설정되어 있어도) 사용시에만 표시됩니다.

 

 

 

Visible

 

기본적으로 오버플로는 visible클리핑되지 않고 요소 상자 외부로 렌더링된다는 것을 의미합니다.

 

레이아웃을보다 잘 제어하고 싶을 때 overflow 속성을 사용할 수 있습니다. overflow 속성은 내용이 요소의 상자를 오버플로하면 어떻게되는지 지정합니다.

 

 

div {

    width: 200px;

    height: 50px;

    background-color: #eee;

    overflow: visible;

}

 

 

 

 

<!DOCTYPE html>

<html>

<head>

<style>

div {

    background-color: #eee;

    width: 200px;

    height: 50px;

    border: 1px dotted 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>

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
2982
2981
2980
2979
2978
2977
2976
2975
2974
2973
2972
2971
2970
2969
2968
2967
2966
2965
2964
2963
2962
2961
2960
2959
2958
2957
2956
2955
2954
2953