HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<link href="style.css" rel="stylesheet">
<link href="overflow.css" rel="stylesheet">
</head>
<body>
<h1>overflow - 영역 밖의 내용 처리</h1>
<ul>
<li>overflow:visible; 기본. 보임</li>
<li>overflow:hidden; 숨김</li>
<li>overflow:scroll; 스크롤바 생성</li>
<li>overflow:auto; 필요하면 스크롤바 생성</li>
</ul>
<ol id="ov">
<li class="vs">overflow:visible; 기본. 보임 <br>
<br><br><img src="img/cat.jpg">
</li>
<li class="hd">overflow:hidden; 숨김 <br>
<br><br><img src="img/cat.jpg"></li>
<li class="sc">overflow:scroll; 스크롤바 생성 <br>
<br><br><img src="img/cat.jpg"></li>
<li class="at">overflow:auto; 필요하면 스크롤바 생성 <br>
<br><br><img src="img/cat.jpg"></li>
</ol>
<p class="el">
[말줄임표 삼총사]
white-space: nowrap; 줄바꿈 금지
overflow: hidden; 영역 밖의 내용 숨김
text-overflow:ellipsis;
영역 밖의 글자 말줄임표(...) 하기
</p>
</body>
</html>
CSS
@charset "UTF-8";
/* overflow */
#ov>li {border: 1px solid red;
width: 45%; height: 250px;
display: inline-block;
vertical-align: top;
margin: 5em 2%;}
.vs {overflow: visible;}
.hd {overflow: hidden;}
.sc {overflow: scroll;}
.at {overflow: auto;}
.hd>img {height: 300px;
opacity:0.6 /* 요소의 불투명도(0~1사이의 값) */; }
.hd:hover>img {height: 200px;
opacity:1;
transition:1s;}
#ov:hover>.sc, #ov:hover>.at {height: 500px; }
/* 말줄임표 삼총사 */
.el {border: 1px solid;
width: 400px; height:20px;
padding: 0.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
.el:hover {background-color:#000;
width: 1200px;
color:#fff;
transition:1.2s;}
