PinkCoding

CLASS web

CSS

영역을 벗어날 때 처리

영역을 벗어 났을 때

텍스트나 이미지등이 영역을 벗어났을 때 처리하는 방법에 대해 알아볼게요. ^^
사용하는 CSS속성은 overflow 입니다.

overflow 속성 사용 방법

선택자{overflow:값}

값은 visible, hidden, scroll이 있습니다.
visible는 영역을 넘어서도 그대로 표시합니다.
hidden는 영역을 넘어선 부분을 숨깁니다.
scroll은 영역을 넘어선 부분이 있으면 스크롤바를 생성합니다.
그럼 예제를 통해 확인해 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>세로 길이 적용</title>
</head>
<body>
    <p style="background:skyblue;width:100px;height:100px;overflow:visible">
        Disney Disney Disney Disney DisneyDisney Disney Disney Disney Disney Disney
    </p>
    <br>
    <p style="background:skyblue;width:100px;height:100px;overflow:hidden">
        Disney Disney Disney Disney DisneyDisney Disney Disney Disney Disney Disney
    </p>
    <br>
    <p style="background:skyblue;width:100px;height:100px;overflow:scroll">
        Disney Disney Disney Disney DisneyDisney Disney Disney Disney Disney Disney
    </p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위 코드의 결과