[TIL] 24.01.08

sssujijjl·2024년 1월 8일

TIL

[TIL]

목록 보기

13/51

[구현한 것]

버튼 클릭 시 display block 또는 none
div를 슬라이드처럼 만들어서, 버튼 클릭 시 특정페이지 또는 다음 페이지로 이동

[코드]

1. 버튼 클릭 시 display block 또는 none

: main 이라는 div와 more라는 div를 만들어,
버튼을 클릭하면 해당 div의 display 상태를 변경해 준다.

function toggleDisplay(mainElement, moreElement) {
    mainElement.style.display = (mainElement.style.display === 'none') ? 'block' : 'none';
    moreElement.style.display = (moreElement.style.display === 'block') ? 'none' : 'block';
}

// toggleDisplay라는 함수 사용하여,
// mainElement와 morreElement라는 두 개의 매개변수를 받아서 display 속성을 변경해준다.

// main -> 초기에 block 상태여서 'none'값이랑 false이니, none으로 변경
// more -> 초기에 none 상태여서 'block'값이랑 false이니, block으로 변경

// main과 more을 교차하여 보여주기 위해서 사용.

함수를 통해 만든 기능을 버튼 눌렀을 때 실행되도록 클릭 이벤트 추가

for (let i = 1; i <= 5; i++) {
    const exBtn = document.getElementById(`exBtn${i}`);
    const closeBtn = document.getElementById(`close${i}`);
    const main = document.getElementById(`main${i}`);
    const more = document.getElementById(`more${i}`);

    exBtn.addEventListener('click', function () {
        toggleDisplay(main, more);
    });

    closeBtn.addEventListener('click', function () {
        toggleDisplay(more, main);
    });
}

// 반복문을 사용하여 1 ~ 5번까지 간단하게 불러오기
// exBtn을 클릭 이벤트를 추가하여 아까 설정한 toggleDisplay 함수를 불러와 main - none, more - block
// closeBtn에도 동일하게 클릭 이벤트를 추가하여 more - none, main - block

.
.
.

2. div를 슬라이드처럼 만들어서, 버튼 클릭 시 특정페이지 또는 다음 페이지로 이동

<div class="final">
    <div id="center" class="center">
        <div class="slide">
            <div id="main1" class="main1"></div>

            <div id="more1" class="more1"></div>
        </div>
    </div>

    <div class="mainbutton"></div >

    <div class="slidebutton"></div>
</div>

전체를 감싸주는 final이라는 div를 만들고,
slide를 감싸주는 center, 안에 slide 5개를 넣어

아래에 있는 mainbutton을 누르면 해당 페이지로 이동하고,
slidebutton을 누르면 양 옆의 슬라이드로 이동하도록 만들었다.

.final {
    overflow: hidden;
}

// 컨테이너를 벗어나는 내용을 숨김, 넘치는 부분은 보이지 않도록 해준다.


.center {
    width: 500vw;
    transition: transform 0.5s ease-in-out;
}

// 넓이를 500vw로 주어 5개의 슬라이드가 들어가도록 해주었다.
// 자연스러운 애니메이션 효과를 주기 위해 trasition을 사용하였다.



.slide {
    width: 100vw;
    float: left;
}

// slide 하나 당 넓이를 100vw로 설정해주고,
// 왼쪽으로 배치를 해주었다.

슬라이드처럼 만들기 위해 css을 위 처럼 설정하였다.

for (let i = 1; i <= 5; i++) {
    const mbtn = document.getElementById(`mbtn${i}`);

    mbtn.addEventListener('click', function () {
        const translationValue = -100 * (i - 1);
        center.style.transform = `translate(${translationValue}vw)`;
    });
}

// 1 ~ 5까지의 mbtn의 id값을 가져와서, 클릭 이벤트 추가
// center의 style에 설정된 translate값을 0에서 -100씩 변경해주면
// 설정해둔 값에 따라 원하는 슬라이드로 이동 가능

반복문을 통해서 mbtn에 값을 넣어주었다.

let currentPosition = 0;

function updateSlide(direction) {
    if (direction === 'right') {
        currentPosition -= 100;
    } else if (direction === 'left') {
        currentPosition += 100;
    }

    document.querySelector('.center').style.transform = `translate(${currentPosition % 500}vw)`;
}

rightbtn.addEventListener('click', function () {
    updateSlide('right');
});

leftbtn.addEventListener('click', function () {
    updateSlide('left');
});

// currentPosition이라는 변수를 만들어 0으로 설정
// undateSlide라는 함수를 만들어서 right면 변수값에 -100을 더하고,
// left면 변수값에 +100을 더해줌

// center로 된 요소를 가지고 와서 가로로 이동하는데, % 500 - 이동 범위를 500으로 제한
// 무한으로 좌우로 슬라이드 가능

// rightbtn 과 leftbtn에 클릭 이벤트를 추가하여 updateSlide 기능 추가

slidebtn에 100씩만 움직이도록 클릭 이벤트를 추가하였다.