클론코딩 - 남양아이

Yura·2021년 12월 28일

Portfolio_review

목록 보기

1/1

남양아이 웹사이트 클론코딩 기록 :)

포트폴리오를 만들면서 남양아이 의 웹사이트를 클론코딩 해보았다. 하면서 가장 어려웠던 점은 기존 방식의 슬라이드가 아닌 좌,우 슬라이드가 함께 보이도록 js 로직을 구성하는 것이었는데, 3일을 고민해도 해결하지 못했었다. 결국 선생님의 도움을 받았지만 이 코드를 내 것으로 만들기 위해 이해하고 작업하는 과정을 다시 거쳤다. 그리고 이렇게 오랜시간 코드를 붙들고 고민해본 적은 처음이었는데 이런 시간을 가진 것 자체가 한걸음 성장할 수 있는 계기가 된 것 같다.

💡슬라이드 양쪽으로 좌,우 이미지 함께 보이는 로직 구현

CSS 스타일링 (SASS)

슬라이드 컨테이너 너비 설정
이전 슬라이드 작업에서는 한번에 하나의 이미지만 보이기 때문에 이미지의 너비만 곱해서 컨테이너(ul) 너비 설정을 하였다. 하지만 이번에는 각 슬라이드 간의 간격까지 고려해야 하므로 margin값을 계산하여 너비를 설정해준다. 하나의 슬라이드 이미지의 너비가 1120px 이고 총 5개의 이미지가 있다. 이미지 5개(1120 x 5)와 margin값(15 x 4)을 합친 총 너비(5660px)를 ul에 입력해준다.
양쪽 정렬 (간격 주기)
margin값을 더해주긴 했지만 아직 각 이미지 사이의 간격으로 설정해주진 못했다. 이럴 때 justify-content: space-between 속성값을 설정해주어 양쪽 끝을 기준으로 정렬해주도록 한다.
컨테이너 가운데 정렬
마지막으로 가운데 정렬을 하기 위해 position:absolute left:50% 을 준 뒤 총 너비의 1/2 값인 -2830px 만큼 margin-left 로 이동해준다. 그럼 최종적으로 5개의 이미지 중 3번째 이미지가 보이는 영역 중앙에 위치하게 된다.
(고정관념이란. 무조건 첫번째 이미지가 가운데 와야 한다고 생각해서 이 로직을 풀지 못했다...🥲)

<style>
    .slides-images{
                    display: flex;
                    justify-content: space-between;
                    position: absolute;
                    left: 50%;
                    top: 0;
                    width: 5660px; /* 1120*5 = 5600 + margin15*5 = 5660 */
                    margin-left: -2830px; /* 5660의 1/2 */

                    >li{
                        // margin: 15px;
                        width: 1120px;
                        height: 360px;
                    }
</style>

jQuery

기본적인 슬라이드 로직 원리는 비슷하지만, animate 메서드의 marginLeft를 얼만큼 이동해야 하는가가 또한 걸림돌이었다. 오른쪽 화살표 버튼을 눌렀을 때 슬라이드 컨테이너는 얼마만큼 왼쪽으로 이동해야 할까?

내가 이해한 바로는 이렇다.
슬라이드 이동과 동시에 첫번째 이미지는 컨테이너의 마지막에 추가해줄 것이다. 전체 너비 5660px의 절반은 2830px 인데, 추가될 마지막 이미지와 마진의 합계는 1120+15 = 1135px 이다. 추가될 이미지의 너비와 마진값을 제외한 2830-1120-15 = 1695px 값이 왼쪽으로 이동할 값이 된다.
(아직 확실히 이해되지 않은 부분도 있지만 좀 더 깊이있는 기초실력을 쌓아야 겠다..!)

<script>
    //다음버튼
    $btnNext.on('click',function(evt){
            evt.preventDefault();
            clearInterval(intervalID);
            nextIdx();

            $container.stop().animate({marginLeft:-2830-1120-15},400,"easeInOutCubic",function(){
                const $slides = $('.slides-wrap > .slides-images > li');
                $slides.first().appendTo($container);
                $container.css({marginLeft:-2830});
            });
    });
    
    //이전버튼
    $btnPrev.on('click',function(evt){
        evt.preventDefault();
        clearInterval(intervalID);

        if(nowIdx>0){
            nowIdx--;
        }else{
            nowIdx=4;
        }

        $container.stop().animate({marginLeft:-2830+1120+15},400,"easeInOutCubic",function(){
            const $slides = $('.slides-wrap > .slides-images > li');
            $slides.last().prependTo($container);
            $container.css({marginLeft:-2830});
        });     

    });
</script>

Yura