본문 바로가기
css

[html/css] overflow 속성 (overflow: visible, hidden, scroll, auto 차이)

by 지구별에 2014. 4. 4.

 

 

[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>&nbsp;</p>
<p>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>

<div id="scroll">
<h1>3. overflow: scroll</h1>
Cascading Style Sheets (CSS)

</div>
<p>&nbsp;</p>
<p>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>

<div id="hidden">
2. overflow: hidden<br>
<img src="leaf.png">
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div id="scroll">
3. overflow: scroll<br>
<img src="leaf.png">
</div>
<p>&nbsp;</p>
<p>&nbsp;</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 작성법)

반응형

댓글