[SCSS] 온보딩 3주 3일차 - Swiper와 SCSS 사용해 보기

🦄 온보딩 3주 2일차 - SCSS 설치 및 사용해 보기

✨03/22 : 목표 : SCSS 설치 및 기본 문법 익히기

Swiper를 이용해 슬라이드를 가져오고, SCSS로 커스터마이징 해보자.

01 Swiper 슬라이드 사용해 보기

1. Swiper홈페이지 => Demos => 목록 중에서 원하는 슬라이드 가져오기

2. Core(html,css,js), React, Vue 등 여러 종류로 코드를 볼 수 있다.

클릭하면 코드가 쭉 나오는데 이 코드를 개인 플젝에 첨부하면 된다.

주의할점은1. script를 올바르게 가져왔는지, 2.슬라이드는 position 설정이 중요한데, 코드에서는 보통 html이나 body에 relative가 걸려있기 때문에 원하는 요소에 옮겨서 잘 조정해 주어야 한다.

HTML

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

<div class="slider">
        <h3 class="slider-title">이 상품 어때요?</h3>
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <ul>
                        <li>
                            <div class="img-con">
                                <img src="https://product-image.kurly.com/product/image/469c0fc9-9f8d-46ae-becd-bda0098d965a.jpg" alt="product1">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[태우한우] 1+ 한우 등심 200g (냉장) 3종</p>
                                <span class="sale sale-percent">15%</span>
                                <span class="sale sale-price">25,415원~</span>
                                <span class="price">29,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1567506396267l0.jpg" alt="product2">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[나탈리스] 프리미엄 착즙 오렌지 파인애플 2종 (택1)</p>
                                <span class="sale sale-price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/cdn-cgi/image/quality=85,width=676/shop/data/goods/1653037164206l0.jpg" alt="product3">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[데체코] 엑스트라버진 올리브 오일</p>
                                <span class="sale sale-percent">10%</span>
                                <span class="sale sale-price">10,710원~</span>
                                <span class="price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1657232326605l0.jpg" alt="product4">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[베어벨스] 더블바이트 프로틴바 카라멜 크리스프 (2입)</p>
                                <span class="sale sale-percent">6%</span>
                                <span class="sale sale-price">9,900원</span>
                                <span class="price">10,600원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul>
                        <li>
                            <div class="img-con">
                                <img src="https://product-image.kurly.com/product/image/469c0fc9-9f8d-46ae-becd-bda0098d965a.jpg" alt="product1">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[태우한우] 1+ 한우 등심 200g (냉장) 3종</p>
                                <span class="sale sale-percent">15%</span>
                                <span class="sale sale-price">25,415원~</span>
                                <span class="price">29,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1567506396267l0.jpg" alt="product2">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[나탈리스] 프리미엄 착즙 오렌지 파인애플 2종 (택1)</p>
                                <span class="sale sale-price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/cdn-cgi/image/quality=85,width=676/shop/data/goods/1653037164206l0.jpg" alt="product3">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[데체코] 엑스트라버진 올리브 오일</p>
                                <span class="sale sale-percent">10%</span>
                                <span class="sale sale-price">10,710원~</span>
                                <span class="price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1657232326605l0.jpg" alt="product4">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[베어벨스] 더블바이트 프로틴바 카라멜 크리스프 (2입)</p>
                                <span class="sale sale-percent">6%</span>
                                <span class="sale sale-price">9,900원</span>
                                <span class="price">10,600원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul>
                        <li>
                            <div class="img-con">
                                <img src="https://product-image.kurly.com/product/image/469c0fc9-9f8d-46ae-becd-bda0098d965a.jpg" alt="product1">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[태우한우] 1+ 한우 등심 200g (냉장) 3종</p>
                                <span class="sale sale-percent">15%</span>
                                <span class="sale sale-price">25,415원~</span>
                                <span class="price">29,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1567506396267l0.jpg" alt="product2">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[나탈리스] 프리미엄 착즙 오렌지 파인애플 2종 (택1)</p>
                                <span class="sale sale-price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/cdn-cgi/image/quality=85,width=676/shop/data/goods/1653037164206l0.jpg" alt="product3">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[데체코] 엑스트라버진 올리브 오일</p>
                                <span class="sale sale-percent">10%</span>
                                <span class="sale sale-price">10,710원~</span>
                                <span class="price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1657232326605l0.jpg" alt="product4">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[베어벨스] 더블바이트 프로틴바 카라멜 크리스프 (2입)</p>
                                <span class="sale sale-percent">6%</span>
                                <span class="sale sale-price">9,900원</span>
                                <span class="price">10,600원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul>
                        <li>
                            <div class="img-con">
                                <img src="https://product-image.kurly.com/product/image/469c0fc9-9f8d-46ae-becd-bda0098d965a.jpg" alt="product1">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[태우한우] 1+ 한우 등심 200g (냉장) 3종</p>
                                <span class="sale sale-percent">15%</span>
                                <span class="sale sale-price">25,415원~</span>
                                <span class="price">29,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1567506396267l0.jpg" alt="product2">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[나탈리스] 프리미엄 착즙 오렌지 파인애플 2종 (택1)</p>
                                <span class="sale sale-price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/cdn-cgi/image/quality=85,width=676/shop/data/goods/1653037164206l0.jpg" alt="product3">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[데체코] 엑스트라버진 올리브 오일</p>
                                <span class="sale sale-percent">10%</span>
                                <span class="sale sale-price">10,710원~</span>
                                <span class="price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1657232326605l0.jpg" alt="product4">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[베어벨스] 더블바이트 프로틴바 카라멜 크리스프 (2입)</p>
                                <span class="sale sale-percent">6%</span>
                                <span class="sale sale-price">9,900원</span>
                                <span class="price">10,600원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul>
                        <li>
                            <div class="img-con">
                                <img src="https://product-image.kurly.com/product/image/469c0fc9-9f8d-46ae-becd-bda0098d965a.jpg" alt="product1">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[태우한우] 1+ 한우 등심 200g (냉장) 3종</p>
                                <span class="sale sale-percent">15%</span>
                                <span class="sale sale-price">25,415원~</span>
                                <span class="price">29,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1567506396267l0.jpg" alt="product2">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[나탈리스] 프리미엄 착즙 오렌지 파인애플 2종 (택1)</p>
                                <span class="sale sale-price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/cdn-cgi/image/quality=85,width=676/shop/data/goods/1653037164206l0.jpg" alt="product3">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[데체코] 엑스트라버진 올리브 오일</p>
                                <span class="sale sale-percent">10%</span>
                                <span class="sale sale-price">10,710원~</span>
                                <span class="price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1657232326605l0.jpg" alt="product4">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[베어벨스] 더블바이트 프로틴바 카라멜 크리스프 (2입)</p>
                                <span class="sale sale-percent">6%</span>
                                <span class="sale sale-price">9,900원</span>
                                <span class="price">10,600원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul>
                        <li>
                            <div class="img-con">
                                <img src="https://product-image.kurly.com/product/image/469c0fc9-9f8d-46ae-becd-bda0098d965a.jpg" alt="product1">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[태우한우] 1+ 한우 등심 200g (냉장) 3종</p>
                                <span class="sale sale-percent">15%</span>
                                <span class="sale sale-price">25,415원~</span>
                                <span class="price">29,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1567506396267l0.jpg" alt="product2">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[나탈리스] 프리미엄 착즙 오렌지 파인애플 2종 (택1)</p>
                                <span class="sale sale-price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>
                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/cdn-cgi/image/quality=85,width=676/shop/data/goods/1653037164206l0.jpg" alt="product3">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[데체코] 엑스트라버진 올리브 오일</p>
                                <span class="sale sale-percent">10%</span>
                                <span class="sale sale-price">10,710원~</span>
                                <span class="price">11,900원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                        <li>
                            <div class="img-con">
                                <img src="https://img-cf.kurly.com/shop/data/goods/1657232326605l0.jpg" alt="product4">
                                <i class="cart fa-solid fa-cart-plus"></i>
                            </div>
                            <div class="details">
                                <p class="title">[베어벨스] 더블바이트 프로틴바 카라멜 크리스프 (2입)</p>
                                <span class="sale sale-percent">6%</span>
                                <span class="sale sale-price">9,900원</span>
                                <span class="price">10,600원</span>
                                <span class="review"><i class="fa-regular fa-comment-dots"></i>후기 999+</span>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="swiper-button swiper-button-next"></div>
            <div class="swiper-button swiper-button-prev"></div>
        </div>    
    </div>
    <script>
        let swiper = new Swiper(".mySwiper", {
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
    </script>

- 슬라이드 양 옆에 화살표 버튼은 기본적으로 ::after태그에 스타일이 들어가 있다. 필요 시 CSS에서 해당 버튼에 스타일을 조정하거나 기본적으로 들어가있는 가상태그에 스타일을 조정해 주면 된다.

02 SCSS 사용해 보기

1. SCSS 폴더 구조

- CSS와 SCSS폴더 따로 생성 => 앞서 컴파일된 CSS파일은 CSS폴더에 저장되도록 해놨다.

SCSS파일은 서버에서 불필요하므로 빌드에서 제외되도록 설정 한다.

2. _reset.scss / _variable.scss

_가 들어간 파일은 scss에서 css로 변환하는 작업을 무시하게 해주는 역할을 한다. 따라서 scss파일 이름 앞에 _(언더바)를 넣어주면 css폴더에 해당 파일이 추가되지 않는다.

_reset.scss => 초기설정 파일

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans KR", sans-serif;
}

ul,
li {
  list-style: none;
}

button,
input {
  border: none;
  background-color: transparent;
  cursor: pointer;
}

- variable => color, 변수설정 파일 => 나중에 color나 font도 따로 파일로 구성해 두면 좋을 것 같다.

$color-purple: #5f0080;
$color-gray: #dddddd;
$color-light-gray: #f0f0f0;
$color-dark-gray: #424242;
$color-white: #fff;

@mixin flex-space-between {
  display: flex;
  justify-content: space-between;
}

@mixin flex-all-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. import해서 사용

@import "./reset";
@import "./variable";

- @include : @mixin변수 가져오기

.swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      @include flex-all-center;
      }

- & :hover, active, checked, focus, 등등 => 부모에 특정 효과 시 사용

.checkbox {
        display: none;

        &:checked + .custom-check {
          width: 20px;
          line-height: 20px;
          font-size: 13px;
          text-align: center;
          color: $color-white;
          background-color: rgb(255, 187, 0);
        }
      }

❗추가적으로, SCSS에서 스타일이 잘 먹히지 않을 경우, 1. Watching이 잘 되고 있는지, 2. output 터미널 창에 에러가 난 곳이 있는지를 잘 확인해 보자...(왜 스타일이 안먹는지 몰라서 계속 애 먹었다.)

아직 잘 사용하고 있는지는 잘 모르겠지만 계속 사용하면서 연습하다 보면 더 배울 점이 많을 것 같다!🤭

728x90

저작자표시 비영리

'JavaScript > React' 카테고리의 다른 글

리덕스(Redux)의 이해 및 활용해 보기 (1)	2023.04.19
[React] CRA에서 eject없이 SCSS사용하기 (0)	2023.04.15
[SCSS] 온보딩 3주 2일차 - SCSS 설치 및 사용해 보기 (0)	2023.03.21
[React] 리액트 라우터(react-router-dom) 중첩 라우팅으로 하위페이지 연결하기 - nested routing, outlet (0)	2022.11.24
[React] 웹팩(Webpack)에 대한 이해 (0)	2022.11.18

Junvely 개발일기

[SCSS] 온보딩 3주 3일차 - Swiper와 SCSS 사용해 보기

🦄 온보딩 3주 2일차 - SCSS 설치 및 사용해 보기

✨03/22 : 목표 : SCSS 설치 및 기본 문법 익히기

01 Swiper 슬라이드 사용해 보기

HTML

02 SCSS 사용해 보기

1. SCSS 폴더 구조

2. _reset.scss / _variable.scss

3. import해서 사용

'JavaScript > React' 카테고리의 다른 글

티스토리툴바

[SCSS] 온보딩 3주 3일차 - Swiper와 SCSS 사용해 보기

🦄 온보딩 3주 2일차 - SCSS 설치 및 사용해 보기

✨03/22 : 목표 : SCSS 설치 및 기본 문법 익히기

01 Swiper 슬라이드 사용해 보기

HTML

02 SCSS 사용해 보기

1. SCSS 폴더 구조

2. _reset.scss / _variable.scss

3. import해서 사용

'JavaScript > React' 카테고리의 다른 글

관련글

티스토리툴바