고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
overflow 속성은 설정된 DIV 의 영역을, 내용물이 많아서 빠져나오는 경우 옵션값이다.
- 1. visible 은 기본값이며, 빠져나온채로 그냥 보여준다
- 2. hidden 은 빠져나온 걸 감춘다
- 3. scroll 은 빠져나올 경우 무조건 스크롤바가 생기게 한다.
- 4. auto 는 빠져나오는 경우에만 스크롤바가 생기게 한다.
1. overflow:visible
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 남산위에 저소나무 철갑을 두른듯 바람서리 불변함은 우리 기상 일세 가을하늘 공활한데 높고구름 없이 밝은달은 우리가슴 일편 단심 일세 이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑 하세2. overflow:hidden
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 남산위에 저소나무 철갑을 두른듯 바람서리 불변함은 우리 기상 일세 가을하늘 공활한데 높고구름 없이 밝은달은 우리가슴 일편 단심 일세 이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑 하세3. overflow:scroll
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 남산위에 저소나무 철갑을 두른듯 바람서리 불변함은 우리 기상 일세 가을하늘 공활한데 높고구름 없이 밝은달은 우리가슴 일편 단심 일세 이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑 하세4. overflow:auto
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 남산위에 저소나무 철갑을 두른듯 바람서리 불변함은 우리 기상 일세 가을하늘 공활한데 높고구름 없이 밝은달은 우리가슴 일편 단심 일세 이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑 하세<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#TestBox {
width:300px;
height:130px;
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>
아래 포스팅 참고했음
반응형
'IT공부방 > HTML5, CSS' 카테고리의 다른 글
| CSS 의 display 속성, inline / block / none / inline-block / table (0) | 2016.07.21 |
|---|---|
| position , z-index 사용법 정리 (0) | 2016.07.21 |
| CSS Selector (선택자) 작성규칙 정리 (0) | 2016.07.20 |
| w3schools.com 에서 코드테스트 및 브라우저 객체/함수/속성등 표준확인 (0) | 2016.07.19 |
| 웹에서 나눔고딕 폰트 사용하기.... 나눔고딕 웹폰트 (0) | 2016.07.13 |
댓글 영역