경일아카데미 홈페이지 메인에 움직이는 이미지는 구현하기 위해서,
우선 html을 작성한다.
5개의 이미지와 5개의 버튼을 만들고 css를 따로 작성한다.
대략적인 설정을 먼저 생각해보면,
1. 5개의 이미지를 한 구역에 겹쳐놓고, 사진을 모두 안보이게 처리한다.
2. 이미지에 각각 class값을 줘서 원하면 사진만 보이도록 한다.
3. 각각의 사진이 넘어갈 때 부드러운 화면으로 넘어가도록하기 위해서
애니메이션과 opacity(투명도)를 이용한다.
----------------------------------------------------------------------------------------------
<!--css 설정하기--> 1
*{ margin: 0;
padding: 0;}
ul,li {list-style: none;}
a{ text-decoration: none; }
img{ display: block; /* 이미지를 블록처리하고 line-height처리하면
line-height: 0 } 빈공간 없이 일렬로 사진을 쭉 나열할 수 있다.*/
#banner{
position:absolute; /* 사진을 모두 합치고 시작점을 적당한 위치로 통일하기 위해서
top: 300px; } 배너에도 엡솔루트를 준다.*/
#banner>ul>li { /* position-absolute를 두번 주게 되면 하위 엘리먼트가
position: absolute; 상위 엘리먼트를 따라가게 됨. 따라서 사진(li)의 상위
top: 0px; 엘리먼트인 배너에다가 엡솔루트300을 준 상태에서
display: none; } 자신한테 absolute top:0을 주면 사진 각각의 시작점이 배너에 고정됨.*/
/* display: none; 안보임 처리*/
------------------------------------------------------------------------------------------------------------------
<!--css 설정하기-->2, 3
ㄱ. html에 있는 <li>에 class값을 준다.
<div id="banner">
<ul class="banner1">
<li class="fadein"><img src="./image1.png"> </li>
<li class="fadein"><img src="./image2.png"> </li>
<li class="fadein"><img src="./image3.png"> </li>
<li class="fadein"><img src="./image4.png"> </li>
<li class="fadein"><img src="./image5.png"> </li>
</ul>
</div>
ㄴ. 그 class값을 가지고 애니메이션 효과를 준다.
#banner> ul> li.fadein{ /* 3초에 걸쳐서 애니메이션 효과를 주겠다*/
animation: fadein 3s; } /*animation=움직임*/
#banner>ul>li.on{ /* class 값이 on인 <li>만 display:block 처리를 하겠다.
display: block; } (보이게 하겠다)*/
@keyframes fadein { /* opacity가 0일때는 완전히 사라지고
from{opacity: 0; } opacity가 1일때는 완전히 보이도록 한다.
to{ opacity: 1; } } 이때 애니메이션이 3초이므로 3초에 걸쳐서 실행한다.*/