[html/css] overflow 속성 (overflow: visible, hidden, scroll, auto 차이)
오늘 배워 볼 속성은 overflow입니다.
overflow 속성은 요소의 박스에 내용이 더 길 때 어떻게 보일지 선택하는 속성입니다.
상속여부: 상속되지 않음.
|
visible: 기본값으로 내용이 더 길어도 그대로 보입니다.
(내용이 흘러넘침)
hidden : 내용이 넘치면 자릅니다. 자른 부분은 보이지 않습니다.
scroll : 내용이 넘치지 않아도 항상 스크롤바가 보입니다.
auto : 내용이 잘릴 때만 스크롤바가 보입니다.
|
사용 예:
#container
{
overflow: hidden;
}
그럼 실제 400x 100 크기의 박스를 만들어서
똑같은 내용을 담아보겠습니다.
(scroll 만 짧은 내용)
overflow.htm
|
<html>
<head>
<style type="text/css">
#visible, #hidden, #scroll, #auto
{
width:400px;
height:100px;
background-color:#FFD9FA;
}
#visible
{
overflow: visible;
}
#hidden
{
overflow: hidden;
}
#scroll
{
overflow: scroll;
}
#auto
{
overflow: auto;
}
</style>
</head>
<body>
<div id="visible">
<h1>1. overflow: visible</h1>
Cascading Style Sheets (CSS) is a style sheet language
used for describing the look and formatting of a document written in a markup language.
While most often used to style web pages and interfaces written in HTML and XHTML,
</div>
<p> </p>
<p> </p>
<div id="hidden">
<h1>2. overflow: hidden</h1>
Cascading Style Sheets (CSS) is a style sheet language
used for describing the look and formatting of a document written in a markup language.
While most often used to style web pages and interfaces written in HTML and XHTML,
</div>
<p> </p>
<p> </p>
<div id="scroll">
<h1>3. overflow: scroll</h1>
Cascading Style Sheets (CSS)
</div>
<p> </p>
<p> </p>
<div id="auto">
<h1>4. overflow: auto</h1>
Cascading Style Sheets (CSS) is a style sheet language
used for describing the look and formatting of a document written in a markup language.
While most often used to style web pages and interfaces written in HTML and XHTML,
</div>
</body>
</html> |
overflow: visible /overflow: hidden/ overflow: scroll / overflow: auto 실행화면입니다.
이번에는 400x100 박스에 420x120 사진을(아래) 넣어 보겠습니다
overflow2.htm
|
<html>
<head>
<style type="text/css">
#visible, #hidden, #scroll, #auto
{
width:400px;
height:100px;
background-color:#FFD9FA;
}
#visible
{
overflow: visible;
}
#hidden
{
overflow: hidden;
}
#scroll
{
overflow: scroll;
}
#auto
{
overflow: auto;
}
</style>
</head>
<body>
<div id="visible">
1. overflow: visible<br>
<img src="leaf.png">
</div>
<p> </p>
<p> </p>
<div id="hidden">
2. overflow: hidden<br>
<img src="leaf.png">
</div>
<p> </p>
<p> </p>
<div id="scroll">
3. overflow: scroll<br>
<img src="leaf.png">
</div>
<p> </p>
<p> </p>
<div id="auto">
4. overflow: auto<br>
<img src="leaf.png">
</div>
</body>
</html> |
실행화면입니다.
<overflow: scroll auto 차이>
둘이 화면상 보이는 것은 같지만 scroll은 내용이 넘치지 않아도 항상 생기는 반면
auto는 화면이 넘칠 때만 scroll이 자동 생성됩니다.
position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)
[html/css] z-index 속성으로 배치 순서 결정하기
[css 기초] float 속성에 대하여
CSS란? (HTML과 CSS의 차이, CSS 작성법)
댓글