| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- Spring Framework
- reactor
- Spring Batch
- reactive
- 공유기 서버
- 웹 스터디
- 웹앱
- ipTIME
- reactor core
- 웹 커리큘럼
- 서버운영
- spring reactive
- Today
- Total
Hello World
[CSS]OverFlow 본문
HTML 태그는 하나하나가 박스로 구성되어 있습니다. 별다른 설정을 하지 않았다면, 내용이 길어지면 그에 맞게 박스도 커집니다. 하지만, 박스의 크기를 설정했을 때 내용물이 박스를 넘어갈 수가 있는데, 그런 상황에 어떻게 대처할 것인가를 overflow로 정합니다.
overflow의 값은 visible, hidden, scroll, auto 네가지가 있습니다.
- visible
내용물이 박스를 넘어가도 보여줍니다. 기본값입니다. - hidden
내용물이 박스를 넘어간 부분은 보이지 않습니다. - scroll
내용물이 박스를 넘어가든 넘어가지 않든 스크롤바를 만듭니다. - auto
내용물이 박스를 넘어가지 않으면 스크롤바가 없고, 박스를 넘어갈 때에는 스크롤바를 만듭니다.
다음의 예제로 이를 확인할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>HTML/CSS</title>
<style>
p {width: 100px; height: 100px; background-color: #dadada; float: left; margin-right: 10px;}
</style>
</head>
<body>
<p style="overflow: visible;">This is paragraph. This is paragraph. This is paragraph. This is paragraph.</p>
<p style="overflow: hidden;">This is paragraph. This is paragraph. This is paragraph. This is paragraph.</p>
<p style="overflow: scroll;">This is paragraph. This is paragraph. This is paragraph. This is paragraph.</p>
<p style="overflow: auto;">This is paragraph. This is paragraph. This is paragraph. This is paragraph.</p>
<p style="overflow: auto;">This is paragraph.</p>
</body>
</html>
'HTML/CSS > Core' 카테고리의 다른 글
| 최고의 CSS 중앙정렬 기법 (0) | 2016.05.04 |
|---|---|
| 웹 폰트 파헤치기 (0) | 2016.04.18 |
| 웹디자인에서 자간, 행간에 대한 고찰 (0) | 2016.01.27 |
| [CSS]z-index 태그간의 화면 위치 경쟁 (0) | 2012.09.07 |