2019. 2. 12. 20:44ㆍFront End 강의내용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.carousel-container{
height: 60vh;
}
.carousel-container img{
width: 100%;
position: absolute;
height: 60vh;
opacity: 0;
/* opacity 핵심 */
transition: all 1s;
}
.controller{
width: 80%;
margin-top: 20px auto;
}
.controller a{
display: inline-block;
background-color: tan;
width: 30%;
height: 80px;
margin: 10px;
background-size: cover;
/* 안에 딱 맞게 */
}
.controller #c1{
background-image: url(img/1.jpg)
}
.controller #c2{
background-image: url(img/2.jpg)
}
.controller #c3{
background-image: url(img/3.jpg)
}
img:target{
opacity: 1;
/* opacity 핵심 */
}
</style>
</head>
<body>
<div class="carousel-container">
<img src="img/1.jpg" alt="" id="one">
<img src="img/2.jpg" alt="" id="two">
<img src="img/3.jpg" alt="" id="three">
</div>
<div class="controller">
<a href="#one" id="c1"></a>
<a href="#two" id="c2"></a>
<a href="#three" id="c3"></a>
</div>
</body>
</html>
'Front End 강의내용' 카테고리의 다른 글
| 125강. ::before, ::after 적용 (0) | 2019.02.13 |
|---|---|
| 124강. ::first-letter, ::first-line, ::selector 적용 (0) | 2019.02.13 |
| 122강. only-of-type 적용 (0) | 2019.02.12 |
| 121강. nth-child 적용 (0) | 2019.02.12 |
| 115강. Dropdown 기능 <The Front End Web Developer / Udemy 강의> (0) | 2019.02.11 |