연습장:Sakura/1: 두 판 사이의 차이

  • 최근 수정 시각: 2023년 2월 19일 (일) 18:03
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 문서 역사
< 연습장:Sakura
← 이전 편집다음 편집 →
시각위키텍스트
편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 되돌려진 기여
1번째 줄: 1번째 줄:
<html>
<html>
<div class="slideshow-container">
<div class="container">
   <div class="slideshow">
   <div class="content">
     <img src="/w/images/4/44/사토_에이사쿠.jpg">
     <p>숨겨진 내용입니다.</p>
    <img src="/w/images/3/3e/아베_신조.jpg">
    <img src="/w/images/c/c7/고이즈미_준이치로.jpg">
   </div>
   </div>
  <button class="toggle-btn">[펼치기 · 접기]</button>
</div>
</div>
<button class="prev" onclick="plusSlides(-1)">❮</button>
<button class="next" onclick="plusSlides(1)">❯</button>
<style>
<style>
.slideshow-container {
.container {
  width: 420px;
  overflow: hidden;
   position: relative;
   position: relative;
   overflow: hidden;
   transition: height 0.3s ease-in-out;
}
}


.slideshow {
.content {
   display: flex;
   position: absolute;
   transition: transform 0.5s ease-in-out;
   left: 0;
}
  top: 0;
 
.slideshow img {
   width: 100%;
   width: 100%;
   height: auto;
   height: auto;
  padding: 20px;
  box-sizing: border-box;
}
}


.prev, .next {
.toggle-btn {
   position: absolute;
   position: absolute;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
   bottom: 20px;
   padding: 16px;
   padding: 5px 10px;
   background-color: black;
  font-size: 14px;
   color: white;
   line-height: 1;
   font-size: 24px;
   background-color: #fff;
   border: none;
   color: #000;
   border: 1px solid #000;
   cursor: pointer;
   cursor: pointer;
  z-index: 1;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}
}
</style>
</style>
<script>
<script>
let slideIndex = 1;
const container = document.querySelector('.container');
showSlides(slideIndex);
const content = document.querySelector('.content');
const toggleBtn = document.querySelector('.toggle-btn');


function plusSlides(n) {
let isCollapsed = true;
  showSlides(slideIndex += n);
toggleBtn.addEventListener('click', function() {
}
   if (isCollapsed) {
 
    container.style.height = `${content.offsetHeight}px`;
function showSlides(n) {
    toggleBtn.textContent = '[접기]';
  const slides = document.querySelectorAll('.slideshow img');
   } else {
  const numSlides = slides.length;
    container.style.height = `${toggleBtn.offsetHeight}px`;
  if (n > numSlides) { slideIndex = 1; }
    toggleBtn.textContent = '[펼치기 · 접기]';
   if (n < 1) { slideIndex = numSlides; }
  }
  const offset = (slideIndex - 1) * -100;
  isCollapsed = !isCollapsed;
   document.querySelector('.slideshow').style.transform = `translateX(${offset}%)`;
});
}
</script>
</script>
</html>

2023년 2월 19일 (일) 18:03 판

<html>

숨겨진 내용입니다.

 <button class="toggle-btn">[펼치기 · 접기]</button>

<style> .container { 

 width: 420px;
 overflow: hidden;
 position: relative;
 transition: height 0.3s ease-in-out;

}

.content { 

 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: auto;
 padding: 20px;
 box-sizing: border-box;

}

.toggle-btn { 

 position: absolute;
 right: 20px;
 bottom: 20px;
 padding: 5px 10px;
 font-size: 14px;
 line-height: 1;
 background-color: #fff;
 color: #000;
 border: 1px solid #000;
 cursor: pointer;

} </style> <script> const container = document.querySelector('.container'); const content = document.querySelector('.content'); const toggleBtn = document.querySelector('.toggle-btn');

let isCollapsed = true; toggleBtn.addEventListener('click', function() { 

 if (isCollapsed) {
   container.style.height = `${content.offsetHeight}px`;
   toggleBtn.textContent = '[접기]';
 } else {
   container.style.height = `${toggleBtn.offsetHeight}px`;
   toggleBtn.textContent = '[펼치기 · 접기]';
 }
 isCollapsed = !isCollapsed;

}); </script>