css 이미지 슬라이드 오류가 나요 ㅠㅠ
본문
화면의 사진처럼 넘어갈때 이전 사진과 저렇게 겹쳐져서 나와요
<메인>
<section id="sec4">
<div class="sec4title4">
<h3>Silde <span style="color:rgb(216, 154, 165)">my portfolio:</span><span style="color:rgb(172, 126, 134)">Animation</span></h3>
<h5><span style="color:rgb(216, 154, 165)">파워포인트를</span>활용하여, 자세한 정보들을 나타내었고 <br>
좀더 자세한 계획을 포트폴리오 형식으로 나타내었다.
</h5>
<!-- photo 를 하나에 리스트로본다. -->
<div class="titpho">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="audiaudi">
<h3>Audio</h3>
<h5>Ed Sheeran - one life</h5>
<audio controls autoplay>
<source src="audio/one life.mp3" type="audio/mp3">
</audio>
</div>
<css>
#sec4{
background-color: rgb(202, 221, 250);
}
#sec4 > .sec4title4{
margin: auto;
margin-left: 320px;
padding-top: 20px;
margin-right: 450px;
text-align: center;
}
#sec4 > .sec4title4 > h3{
font-family: 'Noto Sans KR', sans-serif;
font-weight: bolder;
font-size: 50px;
color: #171750;
}
#sec4 > .sec4title4 > h5{
margin-left: 20px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
margin-bottom: 10px;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 2px dotted #171750;
}
/* 사진 슬라이드 애니메이션*/
.sec4title4 > .titpho > ul > li{
list-style:none;
}
.sec4title4 > .titpho > ul{
list-style:none;
}
.sec4title4 > .titpho{
margin-left: 200px;
width:750px;
overflow:hidden;
}
.sec4title4 > .titpho > ul{
width:calc(100% * 4);
display:flex;
animation:slide 8s infinite;
}
.sec4title4 > .titpho > ul > li{
width:calc(100% / 4);height:400px;
}
.sec4title4 > .titpho > ul > li:nth-child(1){
^#^BG_URL^#^images/phoslide1.png);
background-size: 100% 100%;
}
.sec4title4 > .titpho > ul > li:nth-child(2){
background:url(images/phoslide2.png);
background-size: 100% 100%;
}
.sec4title4 > .titpho > ul > li:nth-child(3){
background:url(images/phoslide3.png);
background-size: 100% 100%;
}
.sec4title4 > .titpho > ul > li:nth-child(4){
background:url(images/phoslide4.png^#^;
background-size: 100% 100%;
}
@keyframes slide {
0% {margin-left:0;}
10% {margin-left:0;}
25% {margin-left:-100%;}
35% {margin-left:-100%;}
50% {margin-left:-200%;}
60% {margin-left:-200%;}
75% {margin-left:-300%;}
85% {margin-left:-300%;}
}
aside{
width: 400px;
height: 500px;
background-color: #181753;
}
.audiaudi{
margin-left: 200px;
}
.audiaudi > h3{
margin-left: 5px;
margin-top: 100px;
font-family: 'Noto Sans KR', sans-serif;
font-weight: bold;
font-size: 24px;
color: #f2f9ff;
border: 1px solid #171750;
background-color: #171750;
border-radius: 10px;
width: 75px;
padding-left: 10px;
padding-top: 1px;
padding-bottom: 2px;
}
.audiaudi > h5{
margin-left: 10px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
margin-bottom: 10px;
}
답변 2
이렇게 해보는건 어떠실까요?
<div class="titpho">
<ul>
<li><img src="images/phoslide1.png" alt="Image 1"></li>
<li><img src="images/phoslide2.png" alt="Image 2"></li>
<li><img src="images/phoslide3.png" alt="Image 3"></li>
<li><img src="images/phoslide4.png" alt="Image 4"></li>
</ul>
</div>
CSS부분
.sec4title4 > .titpho > ul > li {
list-style: none;
width: calc(100% / 4);
height: 400px;
position: relative;
}
.sec4title4 > .titpho > ul > li > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
이런 오류관련 질의가 나올때 매번 드리는 말씀.
어디가 문제인지 모르면 해당 URL 과 테스트용 아이디 정보를 알려주세요.