css 이미지 슬라이드 오류가 나요 ㅠㅠ

css 이미지 슬라이드 오류가 나요 ㅠㅠ

QA

css 이미지 슬라이드 오류가 나요 ㅠㅠ

본문

2108833039_1685168236.0116.png

 

화면의 사진처럼 넘어갈때 이전 사진과 저렇게 겹쳐져서 나와요

<메인>

 

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

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT