실직한김에만들어보자 - 5일차

#실직한김에만들어보자 시리즈

 

 

- 기록 1

아무리 생각없이 개발하고 있다지만 간략하게 스토리보드는 필요할 것 같아서 태블릿으로 그려봤다.

 

히스토리는 내가 다 적을 수 없으니 '나무 위키' 처럼 제보를 받아 승인하는 방식으로 가면 어떨까 생각하고 있고,

포트폴리오는 페이지를 만든 뒤 영역만 나누고 후배들이 만들게 하면 어떨까? 라는 생각을 하고 있다(아닌가? 내걸 먼저 만들고 데모처럼 올려야되나?).

 

그럼 일단 히스토리 관련 파일 및 페이지를 만들고 화면을 구성해보자.

 

스크롤바가 생김

 

outline 영역을 display:flex; 에 direction: column; 으로 지정하여 상하로 영역이 나뉘도록 하였다.

근데 100%일 때 border를 넣으면 위 사진처럼 스크롤바가 생긴다.

box-sizing: border-box; 옵션을 추가해주자.

.outside-frame {
    display: flex;
    flex-direction: column;
}

.inside-frame {
    width: 100%;
    border: 1px solid;
    box-sizing: border-box;
}

 

overflow: hidden; 을 사용해도 좋을 것 같다.

스크롤바 제거

 

 

- 기록 2

 

틀이 잡혔고, 슬라이더를 만들어서 쓸까 했는데, 만들어 쓰는건 좋지만 간단하게 가져다가 쓸만한 슬라이더가 없을까 싶어서 찾아보았다.

Swiper - The Most Modern Mobile Touch Slider

 

무료 슬라이더중에 가장 유명한건 역시 이친구가 아닐까 싶다. 스위퍼!

한번 적용해보자.

우리는 react가 아니니 npm 설명서는 지나치고, CDN 설명을 확인하자.

Swiper - The Most Modern Mobile Touch Slider

(링크는 다른데 미리보기는 메인이랑 똑같네...)

설명에서 알려준 것처럼 css와 js를 넣어준 뒤

<!-- CDN 추가 -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>


<!-- 원하는 영역에 아래 추가 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>
<div class="swiper-pagination"></div>


<!-- swiper script -->
<script>
const swiper = new Swiper('.swiper-container', {
    loop: true,

    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
            const years = [2021, 2022, 2023];
            return `<span class="${className}">${years[index]}</span>`;
        },
    },

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    scrollbar: {
        el: '.swiper-scrollbar',
    },
});
</script>

 

위 코드를 알맞게 넣으면 아래와 같이 스크롤바가 생기는데, 중앙의 도트를 선택해주면 좌우로 움직인다.

스크롤바는 필요 없으니 overflow: hidden 추가, 기본은 가로 스크롤로 되어있지만, 세로 스크롤을 원할 경우 swiper 객체에방향 옵션을 추가하면 된다.

direction: 'vertical',

 

그리고 네비게이션 도트(여기서는 페이지네이션)를 상단 위치로 옮겨준 뒤 겹치는 부분을 제거하기 위해 페이지네이션에 css 추가, 그리고 너무 안이쁘니까 깔끔하게 변경!

.swiper-pagination {
    position: absolute;
    top: 10px !important;
    display: flex;
    justify-content: center;
    gap: 40px;
    z-index: 10; /* 슬라이더랑 겹치면 위로 오도록 함 */
}

 

top에 important를 넣은 이유는 기본값으로 top, bottom css가 들어가 있기 때문이다.

수정하면 아래와 같이 깔끔하게 출력되는데, 자동으로 넘기려면 아래 옵션을 추가, 3초마다 자동으로 넘어간다.

autoplay: {
    delay: 3000,
},

 

코드들이 모두 들어갔으면 아래와 같이 출력 완료! 

 

 

 

조금 더 꾸미는건 6일차에 진행해보자!