HTML 슬라이드 페이지 만들기

개요 목적

이번 시간에 만들 프론트 웹페이지는 슬라이더이다.

옆으로 넓게 펼쳐진 페이지를 특정 영역만 보이게 하고, 버튼을 통해 옆으로 움직여서 마치 카드를 넘기는 것 같은 효과를 낼 수 있다.

아래 그림 예시는 영어 통문장을 암기할 수 있게 도와주는 테스트 페이지 이다.

아래 테스트 페이지 같은 슬라이더를 만드는 구체적인 방법에 대해서 알아보자.

테스트 페이지 틀 잡기

먼저 테스트 페이지 틀이 되는 element 요소들을 작성하고, 데이터 수에 맞게 만들어 놓은 틀을 복사하여 옆으로 나열한다.

틀이 되는 테스트 페이지 코드가 어떻게 되는 지 알아보자.

자세한 테스트 페이지 틀 html, css 소스 코드는

https://github.com/dae0hwang/IgnorantEnglish

IgnorantEnglish\UI\src\main\resources\templates\test\admin\page.html

IdeaProjects\IgnorantEnglish\UI\src\main\resources\static\css\test.admin\page.css

에서 확인할 수 있다.

해당 페이지를 만든 CSS에 대한 기초 사용 법은 아래 블로그 글에서 확인할 수 있다.

백엔드 개발을 위한 CSS, Bootstrap 기본 사용법

테스트 페이지 틀 데이터 만큼 복사하기

이제 기초적인 요소는 작성했으니, 동적으로 테스트할 데이터 수만큼, 위에서 만든 테스트 페이지 틀을 복사해야 한다.

아래 javascript makeTable() 메소드를 통해서, 테스트 페이지 틀을 클론하여 옆으로 나열한다.

<Javascript makeTable() 코드> (클론하는 코드만 추출)

//클론 노드를 만들 때 사용될 데이터 예시
let testData= [ 
    {"id":1,"korean":"식은 죽 먹기지","english":"A piece of cake","hint":"x"},
    {"id":2,"korean":"당근 빠따!","english":"Absolutely.","hint":"x"},
    {"id":3,"korean":"먼저 가세요.","english":"After you.","hint":"x"}
}

function makeTest(dataList) {
    //페이지 틀 요소 가져오기
    let testNode = document.getElementById("width-container");
    let length = dataList.length;
    //데이터 리스트 크기 만큼 총 테스트 섹션 width 확장하기
    document.getElementById("all-container").style.width = 800 * (length + 1) + 'px';

    let previousNode = testNode;
    for (let i = 0; i < dataList.length; i++) {
      //데이터 크기만큼 클론 노드 만들고 id 부여하기
      let cloneNode = previousNode.cloneNode(true);
      cloneNode.setAttribute("data", dataList[i]);
      cloneNode.id = i;
      previousNode.after(cloneNode);
      previousNode = cloneNode;
    }
		
    //데이터 마다 테스트 페이지 정보 입력하기
    for (let i = 0; i < dataList.length; i++) {
      let currentNode = document.getElementById(i.toString());
			
      //데이터 마다 테스트 페이지 번호 넣기 ex)1/15
      let elementsByClassName = document.getElementById(i.toString()).getElementsByClassName("count")[0];
      elementsByClassName.innerText = i+1 + "/" + length;
      //데이터 마다 번역 정보 넣기
      currentNode.getElementsByClassName("korean-data")[0].innerText = dataList[i].korean;

      let answerButton = currentNode.getElementsByClassName("answer-btn")[0];
      answerButton.onclick = function () {
        //클릭하면 데이터가 가지고 있는 answer 출력하기
        currentNode.getElementsByClassName("english-data")[0].innerText = dataList[i].english;
      }

      let hintButton = currentNode.getElementsByClassName("hint-btn")[0];
      hintButton.onclick = function () {
        //클릭하면 데이터가 가지고 있는 hint 출력하기
        currentNode.getElementsByClassName("english-data")[0].innerText = dataList[i].hint;
      }

      let rightButton = currentNode.getElementsByClassName("right-btn")[0];
   

      let wrongButton = currentNode.getElementsByClassName("wrong-btn")[0];
		}
    //처음 클론 노드용 엘레멘트 삭제.
    testNode.remove();
  }

현재 페이지 외에는 보이지 않게 설정하기

현재 페이지 외에는 다른 슬라이드 보이지 않게 설정하려면,

테스트 페이지 가장 외곽 요소에 style="overflow: hidden” 속성을 주면 된다.

class =”test-inner” element는 넓이가 800px을 가지고 있고 hidden 속성을 주면, 800px만 보이게 설정된다.

<section>
    <div class="test-inner" style="overflow: hidden">
        <div >
            <div class="all-container", id="all-container">
                <div class="width-container" id="width-container">

히든 속성을 주지 않으면 아래 그림처럼 연속된 클론 노드들이 같이 보이게 된다.

버튼 클릭하면 옆으로 테스트 넘어가기 설정

맞음과 틀림을 클릭하게 되면 옆에 테스트 페이지로 넘어가게 된다.

이 동작은 맞음과 틀림 버튼을 클릭하면 테스트 페이지 틀 크기(800px) 만큼 translate 하는 방법으로 만들 수 있다.

<Javascript makeTable() 코드> (페이지 이동 코드만 추출)

function makeTest(dataList) {
    for (let i = 0; i < dataList.length; i++) {

      let rightButton = currentNode.getElementsByClassName("right-btn")[0];
      //맞음 버튼을 클릭하게 되면 옆으로 넘어가는 동작 구현 코드
      rightButton.onclick = function () {
             //테스트 페이지 틀을 전부 가지고 있는 엘레멘트의 스타일을
             //translate -800px 씩 주어서 마치 페이지가 넘어가는 효과를 낼 수 있다.
             allContainer.style.transform = 'translate('+(-800*(i+1)).toString()+'px)';
        }
    }
}