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

 

 

[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 작성법)

지구별에
css 2014. 4. 4. 09:00

댓글을 달아 주세요

  1. 타리 2016.01.17 22:03 신고  수정/삭제  댓글쓰기

    이 기능 알려주신 걸 이용해서 티스토리 스킨에 이미지사이즈를 조절하려고 하는데 질문하나 드려도 될까요??
    css에서

    /* 본문 */
    .entry .desc {overflow:visible;width:/*@post-width*/970px/*@*/;padding-left:30px;margin-bottom:5px;font-family:Malgun Gothic,맑은 고딕;font-size:12pt;color:#282828;line-height:1.8;word-wrap:break-word;letter-spacing:-1px;}
    .entry .desc * {font-family: 'Nanum Gothic' !important;line-height:2.0 !important;font-size:13pt !important;}
    .entry .desc a {color:#DC143C;}

    .entry .admin .f_r {width:200px;;padding:2px 10px 0 0;}
    .entry img {max-width:1030px;height:auto;position:relative;left:-30px;}
    .entry span.imageblock {max-width:1030px;height:auto;}

    이렇게 해놓았는데요,
    제가 하고 싶은 것은 배경을 1030짜리를 만든 뒤 그 위에 .desc (본문) 부분은 가로폭 970 으로 해서 중앙정렬 (양쪽에 30씩 여백주고 텍스트 가독성 있도록)
    그리고 이미지는 1030으로 좌우에 꽉차도록 표시하고자 합니다.

    desc 부분에 overflow:visible 을 추가해놔도 소용이 없네요. 방법이 없을까요? ㅠㅠ

    • 타리 2016.01.17 22:07 신고  수정/삭제

      아무리 이미지를 크게 하려고 해봐도 본문컨텐츠 영역인 970 사이즈로 작아져서 표시가 되네요 ㅠㅠㅠ

  2. 인간대표 2016.10.11 14:53 신고  수정/삭제  댓글쓰기

    잘보고 갑니다^^

  3. 햄과함께 2018.01.07 12:04  수정/삭제  댓글쓰기

    덕분에 이해합니다. 감사합니다. :)

Powerd by Tistory, designed by criuce