[패스트캠퍼스] 웹퍼블리싱 강의 2주차

[패스트캠퍼스] 웹퍼블리싱 강의 2주차

 

웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인  :  교육 훈련 2주차 

 

[ sass 를 공부하는 이유 ]

sass 는  css 전처리기로 css를 구조화, 그룹화하여 간결하고 편리하게  퍼블리싱할 수 있다. 

 

[sass 를 사용하려면? ]

 sass 문법 또는 scss 문법을 사용하기 위해서는  node.js 설치가 필요하다. 

sass 사용하려면 node  js  가 설치되어야 한다. 

1. node js 설치
구글, 네이버 에서 node.js사이트 방문하여  프로그램 파일을 설치한다.  

→ 안정적인 LTS 버전을 선택한다. 

 

 

node js 파일 설치한다.

2.컴 재부팅

3. 나의 컴에 node js 설치확인.. 
   cmd 로 명령프롬프트 창을 연다. 

 

node -v

 

node js 의  버전이 나온다.     node js 설치를 확인한다. 

 

4. sass 설치한다. 

명령프롬프트 창에서 해당 명령어를 입력한다. 

npm install sass -g 

 

 

 

5. sass 버전확인
sass --version

 

---

sass 와 scss 문법 차이

 

sass 와 scss 는 무슨 차이? 

 sass  :  css의 전처리기.  
sass 의 기능을 이용하여 css 파일을 만드는 것이다.
다만  sass  문법이 개선되어 나온것이  scss 문법이다. 

결론적으로  scss 문법을 사용하여 css파일을 제작한다. 

 

 

---

 

 

 

 

VS스튜디오 화면 :  터미널 화면에서  watching   하기

 

우선  scss/style.scss  파일을 작성후  해당명령어를 통하여 

css/style.css  파일을 자동으로 생성시킨다. 

 

wathcing 이란 ?   

scss 파일을 작성한 후  scss파일의 내용을 watching 하며  css파일의 내용을 자동으로 만드는 것.

 

 

vs 스튜디오에서 터미널을 열고 

$ sass --watch scss/style.scss css/style.css

 

css폴더에  style.css 파일이 생성된다. 

 

 

 

scss 폴더구조

 

 

 

이 때 css/style.css.map파일이 자동생성된다. 

 

style.css.map  파일은 scss파일과  css파일 간의 연결 지도 역할을 하는 파일로

scss의 줄번호와 css파일의 줄번호를 서로 연결해주는 역할을 한다. 

꼭 있어야 하는 파일이다. 

 

 

---

 

 

scss 의 Nesting 기능

 

가장 편리한 기능으로  css 구문을 구조화,  그룹화할 수 있다. 

 

 

scss 의  nesting 기능

 

 

css 구조가 그룹화, 구조화 되어 퍼블리싱 코드가 간결해진다.

 

 

 

 

---

 

 

 

 

 

 

 스와이퍼 이미지 갤러리 만들기. 

https://codepen.io/sevenpia/pen/dygxoNy

swiper gallery

 

 

---

CDN 연결

 

<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>

현재 9 버전까지 나왔다. 

 

 

---

 

스와이퍼 기본 구문

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

 

---

Swiper CSS Styles/Size

 

.swiper {
  width: 600px;
  height: 300px;
}

 

---

Initialize Swiper

 

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

 

---

슬라이더  swiper 라이브러리

 

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider