overflow 속성은 내용물이 박스를 삐져나올때 행동강령 이에요.
- 1. visible 은 기본값인데 삐져나온채로 둬요
- 2. hidden 은 삐져나온걸 안보여줘요
- 3. scroll 은 무조건 스크롤바가 생겨서 삐져나온걸 볼 수 있어요
- 4. auto 는 삐져나오때만 스크롤바가 생겨요. 이 속성이 주로 사용되요.
[삐져나올때]
[안삐져나올때]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#TestBox {
width:300px;
height:150px;
background-color:royalblue;
}
</style>
</head>
<body>
<div id="TestBox" style="overflow:visible;">
<h1>1. overflow:visible</h1>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세
남산위에 저소나무 철갑을 두른듯 바람서리 불변함은 우리 기상 일세
가을하늘 공활한데 높고구름 없이 밝은달은 우리가슴 일편 단심 일세
이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑 하세
</div>
<br /><br />
<div id="TestBox" style="overflow:hidden;">
<h1>2. overflow:hidden</h1>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세
남산위에 저소나무 철갑을 두른듯 바람서리 불변함은 우리 기상 일세
가을하늘 공활한데 높고구름 없이 밝은달은 우리가슴 일편 단심 일세
이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑 하세
</div>
<br /><br />
<div id="TestBox" style="overflow:scroll;">
<h1>3. overflow:scroll</h1>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세
남산위에 저소나무 철갑을 두른듯 바람서리 불변함은 우리 기상 일세
가을하늘 공활한데 높고구름 없이 밝은달은 우리가슴 일편 단심 일세
이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑 하세
</div>
<br /><br />
<div id="TestBox" style="overflow:auto;">
<h1>4. overflow:auto</h1>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세
가을하늘 공활한데 높고구름 없이 밝은달은 우리가슴 일편 단심 일세
이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑 하세
</div>
</body>
</html>
'HTML' 카테고리의 다른 글
| 태그 데이터 가져오기 (0) | 2014.04.25 |
|---|---|
| 깜빡이는 텍스트 (Blink) (0) | 2014.03.12 |
