⛏️/HTML | CSS

[CSS] 8. 스크롤

defyuil 2024. 1. 10. 14:47

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;}