<![CDATA[
<p>How To Create A Website With Auto Image SlideShow Using HTML CSS JavaScript</p><div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/0wvrlOyGlq0?si=PJg_B9CxxoEp0NkN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/_ABKth7CMh0?si=4GYf5JNb4VKfd2cw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/0wvrlOyGlq0?si=PJg_B9CxxoEp0NkN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/_ABKth7CMh0?si=4GYf5JNb4VKfd2cw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p>1번 영상    <a href="https://www.codingsnow.com/2021/01/image-slider-with-auto-play-manual.html" target="_blank" class="ke-link">https://www.codingsnow.com/2021/01/image-slider-with-auto-play-manual.html</a></p><p> </p><p><br><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size23">설명</span></b> <br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>여러분, 안녕하세요! 이 비디오에서는 CSS, HTML 및 Javascript를 사용하여 자동 재생 및 수동 탐색이 모두 가능한 이미지 슬라이더(슬라이드쇼/회전식 슬라이드쇼)를 디자인하는 방법을 배우게 됩니다. 수동 탐색에는 버튼이 있으며 이 버튼을 사용하여 모든 슬라이드로 이동할 수 있습니다. 자동재생 탐색은 자바스크립트를 사용하여 설정된 타이머로 인해 슬라이드가 자동으로 변경됩니다. 이 멋진 이미지 슬라이더를 디자인하는 방법을 살펴보겠습니다. </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>먼저 index.html 파일과 style.css 파일을 만듭니다. 이 두 파일을 생성한 후 비디오에서 볼 수 있듯이 index.html 파일에서 이미지 슬라이더의 HTML 부분을 시작합니다. 이미지 슬라이더의 HTML 부분이 완성되면 style.css 파일을 <head></head> 태그 사이의 index.html 파일에 연결합니다. 그런 다음 영상에서 보시는 것처럼 이미지 슬라이더의 스타일링 부분을 완성해 주세요. 이미지 슬라이더의 스타일 지정 부분을 완료한 후 index.htm 파일로 돌아가 이미지 슬라이더 슬라이드 전환의 자바스크립트 부분을 코딩합니다. body 태그가 닫히기 전 index.html 파일에서 <script></script> 태그를 열고 해당 태그 사이에서 이미지 슬라이더 슬라이드 전환 간격 기능의 자바스크립트 부분을 완성합니다. 따라서 이 영상이 CSS, HTML, Javascript를 사용하여 매력적인 이미지 슬라이더를 디자인하는 데 도움이 되기를 바랍니다. </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>당신을 위해 추천 된 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>다음 및 이전 버튼이 포함된 반응형 이미지 슬라이더 | 자동재생 - 일시중지/재생 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>반응형 이미지 슬라이더 | 수동 버튼 및 자동 재생 탐색 가시성 포함 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>당신도 좋아할 수도 있습니다 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>사이드바 메뉴 | 하위 메뉴 포함 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>반응형 이미지 슬라이더 | 수동 버튼 및 자동 재생 탐색 가시성 포함 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>반응형 제품 카드 | 빠른 팝업 보기 포함 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>커서 애니메이션 | Mousemove, Mouseout, 마우스 정지 시 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>스크롤 시 웹사이트 요소 표시 | 페이지 스크롤 아래로 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>모든 소스 코드와 소스 파일은 여기에서 다운로드할 수 있습니다. 다운로드 버튼을 사용하거나 텍스트 편집기에서 코드를 복사하여 붙여넣으세요. 내 의견은 먼저 비디오를 한 줄씩 따라하면서 시도해 보는 것입니다. 모든 것을 이해하는 데 도움이 될 것입니다. 그 후 코드가 잘못되었거나 작동하지 않으면 제공된 소스 코드를 사용하여 코드와 비교하십시오. 그것은 당신의 모든 실수를 이해하는 데 도움이 될 것입니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>소스 코드 index_html&css&javascript tag</b></span></p><p><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en" dir="ltr"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  <head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="utf-8"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Image Slider</title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    body{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 100vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #23E3C9; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.slider{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 800px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 500px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-radius: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  overflow: hidden; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.slides{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 500%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 500px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.slides input{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.slide{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 20%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transition: 2s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.slide img{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 800px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 500px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*css for manual slide navigation*/ </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.navigation-manual{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 800px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-top: -40px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.manual-btn{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border: 2px solid #40D3DC; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 5px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-radius: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transition: 1s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.manual-btn:not(:last-child){ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-right: 40px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.manual-btn:hover{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #40D3DC; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#radio1:checked ~ .first{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-left: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#radio2:checked ~ .first{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-left: -20%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#radio3:checked ~ .first{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-left: -40%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#radio4:checked ~ .first{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-left: -60%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*css for automatic navigation*/ </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.navigation-auto{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 800px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-top: 460px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.navigation-auto div{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border: 2px solid #40D3DC; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 5px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-radius: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transition: 1s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.navigation-auto div:not(:last-child){ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-right: 40px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#radio1:checked ~ .navigation-auto .auto-btn1{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #40D3DC; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#radio2:checked ~ .navigation-auto .auto-btn2{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #40D3DC; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#radio3:checked ~ .navigation-auto .auto-btn3{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #40D3DC; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>#radio4:checked ~ .navigation-auto .auto-btn4{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #40D3DC; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  <body> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!--image slider start--> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="slider"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <div class="slides"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <!--radio buttons start--> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <input type="radio" name="radio-btn" id="radio1"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <input type="radio" name="radio-btn" id="radio2"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <input type="radio" name="radio-btn" id="radio3"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <input type="radio" name="radio-btn" id="radio4"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <!--radio buttons end--> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <!--slide images start--> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="slide first"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <img src="1.jpg" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="slide"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <img src="2.jpg" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="slide"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <img src="3.jpg" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="slide"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <img src="4.jpg" alt=""> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <!--slide images end--> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <!--automatic navigation start--> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="navigation-auto"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <div class="auto-btn1"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <div class="auto-btn2"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <div class="auto-btn3"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <div class="auto-btn4"></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <!--automatic navigation end--> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <!--manual navigation start--> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <div class="navigation-manual"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <label for="radio1" class="manual-btn"></label> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <label for="radio2" class="manual-btn"></label> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <label for="radio3" class="manual-btn"></label> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <label for="radio4" class="manual-btn"></label> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <!--manual navigation end--> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!--image slider end--> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script type="text/javascript"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    var counter = 1; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    setInterval(function(){ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      document.getElementById('radio' + counter).checked = true; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      counter++; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      if(counter > 4){ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        counter = 1; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    }, 5000); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </script> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p>How To Create A Website With Auto Image SlideShow Using HTML CSS JavaScript</p>
<!-- -->
]]>
카페 게시글
♥☞JAVA 영상방◈▶
SlideShow Using HTML CSS JavaScript
gyun님
추천 0
조회 17
23.12.20 13:07
댓글 2
북마크 번역하기 공유하기 기능 더보기
다음검색
첫댓글 https://www.google.com/search?q=How+To+Create+A+Website+With+Auto+Image+SlideShow+Using+HTML+CSS+JavaScript&sca_esv=592403406&rlz=1C1NDCM_koKR825KR825&tbm=isch&sxsrf=AM9HkKnp-nC7c-Q1c4X-gLmYhkRqJj692Q:1703045387255&source=lnms&sa=X&ved=2ahUKEwjKw9-6kp2DAxWDl1YBHfRYAs4Q_AUoAnoECAIQBA&biw=1366&bih=641&dpr=1 이미지
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default