Chapter 5. 실무 응용

이번 장은 웹사이트를 구현할 때 사용되는 UI를 직접 구현해 보는 실습 내용을 담았습니다. 이 실습을 통해 실제 웹사이트를 만들 때 DOM API는 어떠한 상황에 사용되는지 직접 경험하실 수 있을 겁니다.

1. 캐러셀 만들기

1.1. 캐러셀이란?

캐러셀은 여러 개의 이미지를 슬라이더 형태로 만들어 표현해 주는 UI입니다. 용어가 낯설 수 있지만 아래의 예시를 보면 캐러셀이 어떻게 동작하는지 경험적인 직감으로 아실 겁니다. 예시로 가져온 웹페이지 양옆에는 ‘<’ 와 ‘>’버튼이 있습니다. 버튼을 클릭하면 어떻게 동작할지 상상해 보세요.

삼성

양옆의 버튼을 클릭하면 이미지가 각각 좌우로 슬라이드 되면서 또 다른 이미지를 보여줍니다. 이러한 방식으로 유저는 스크롤을 내리지 않고도 많은 정보를 볼 수 있습니다. 그럼 이제부터 캐러셀을 만들어보겠습니다. 캐러셀을 구현하는 방식은 간단합니다. 일정한 크기의 컨테이너를 만들고, 이미지를 가로로 배치합니다. 그 다음 버튼을 누르면 해당 이미지를 컨테이너 안으로 이동시켜 화면에 보이게 조작할 것입니다.

Untitled

1.2. 실습 준비하기

실습을 위해 작업하기 편한 IDE 환경에서 캐러셀을 구현할 HTML, JS, CSS 파일을 생성해 주세요.

Untitled

1.3. UI 구성하기

먼저 HTML파일에 캐러셀을 만든 후에, 이미지를 담을 컨테이너와 캐러셀을 동작할 버튼 두 개를 만들어 줍니다. 컨테이너에는 자식 요소로 이미지 세 개를 넣겠습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Carousel</title>
  </head>
  <body>
    <div class="carousel">
      <div class="container">
        <img
          src="<https://cdn.pixabay.com/photo/2019/09/17/02/20/jeju-4482313__340.jpg>"
          alt=""
        />
        <img
          src="<https://cdn.pixabay.com/photo/2015/09/10/14/11/jeju-934479__340.jpg>"
          alt=""
        />
        <img
          src="<https://cdn.pixabay.com/photo/2020/02/01/17/51/horse-4810956__340.jpg>"
          alt=""
        />
      </div>
      <button class="btn-prev" type="button"><</button>
      <button class="btn-next" type="button">></button>
    </div>

    <script src="./main.js"></script>
  </body>
</html>

이렇게 마크업을 작성하면 다음과 같은 화면이 나오게 됩니다.