[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 작성법)
'css' 카테고리의 다른 글
|
[html/css] a: link, a: visited, a: active, a: hover 사용법 자세히 알기 (1)
|
2014.04.08 |
|
[html/css] display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이) (6)
|
2014.04.05 |
|
[html/css] overflow 속성 (overflow: visible, hidden, scroll, auto 차이) (4)
|
2014.04.04 |
|
[html/css] z-index 속성으로 배치 순서 결정하기 (3)
|
2014.04.03 |
|
[html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이) (11)
|
2014.04.01 |
|
[html/css] padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom) (1)
|
2014.03.31 |
댓글을 달아 주세요
이 기능 알려주신 걸 이용해서 티스토리 스킨에 이미지사이즈를 조절하려고 하는데 질문하나 드려도 될까요??
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 을 추가해놔도 소용이 없네요. 방법이 없을까요? ㅠㅠ
아무리 이미지를 크게 하려고 해봐도 본문컨텐츠 영역인 970 사이즈로 작아져서 표시가 되네요 ㅠㅠㅠ
잘보고 갑니다^^
덕분에 이해합니다. 감사합니다. :)