diff --git a/week2/aissgn1/script.js b/week2/aissgn1/script.js index 033c6e4..377b9f3 100644 --- a/week2/aissgn1/script.js +++ b/week2/aissgn1/script.js @@ -71,6 +71,23 @@ const handleShowEllipsis = () => { moreBtns.forEach((btn) => btn.addEventListener("click", showMoreDescription)); }; +// ***** 스크롤 이동 기능 구현 *** +// 좌우 화살표 버튼 클릭시 가장 좌측/우측으로 이동되게 하는 핸들러 함수 +const handlePreviewArrow = () => { + const leftArrowBtn = $(".preview__left-btn"); + const rightArrowBtn = $(".preview__right-btn"); + + const previewSection = $(".preview-section"); + + leftArrowBtn.addEventListener("click", () => { + previewSection.scrollLeft = previewSection.offsetLeft; + }); + rightArrowBtn.addEventListener( + "click", + () => (previewSection.scrollLeft = previewSection.scrollWidth) + ); +}; + //***** 최종 실행 함수(핸들러 함수) ***** //이미지 hover시 설명 보이게 하는 기능 handleShowDescription(); @@ -81,3 +98,6 @@ handleTopBtnOpacity(); //더보기 버튼 클릭시 설명 전체 보이게 하는 기능 handleshowMoreBtn(); handleShowEllipsis(); + +// 미리보기 좌우 화살표 클릭시 스크롤 이동 기능 +handlePreviewArrow(); diff --git a/week2/aissgn1/style.css b/week2/aissgn1/style.css index d2f4a85..7ea6d93 100644 --- a/week2/aissgn1/style.css +++ b/week2/aissgn1/style.css @@ -57,12 +57,13 @@ a:active { display: flex; width: 100%; - padding: 0 0.5rem; + padding: 0 1rem; gap: 1.5rem; /* 가로 스크롤 */ overflow-x: scroll; white-space: nowrap; + scroll-behavior: smooth; } .preview-section > img { @@ -94,10 +95,25 @@ a:active { .preview__left-btn, .preview__right-btn { + position: sticky; + font-size: 2.5rem; + font-weight: 700; + border: none; background-color: transparent; + color: #2f3542; + + cursor: pointer; +} + +.preview__left-btn { + left: 0; +} + +.preview__right-btn { + right: 0; } /** 목차 navigation 부분**/