3주차_210715

주간 학습/주간 학습

3주차_210715

HSY_mumu 2021. 7. 16. 09:17

728x90

forEach문은 Array에 대해서만 사용 가능

// 1. 화살표 함수
arr.forEach(item => {
    // item은 배열 각각의 요소들을 순환
    console.log(item);
});
 
// 2. forEach 함수의 원형 그대로 사용하기
arr.forEach(function(item, index, arr2) {
    // item  : 배열 각각의 요소
    // index : 배열 인덱스
    // arr2  : 배열 자체 ( arr 배열을 통째로 참조해야할 경우 사용 )
});

https://dydals5678.tistory.com/66

javascript - foreach 문 , for in 문 , for of문

◎ foreach 문 ▼ 내용 foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터는 Map,Set 지원) 배열의 요소들을 반복하여 작업을 수행할수 있습니다. foreach구문의 인자로 callback함

dydals5678.tistory.com

<슬라이드 구현- swiper>

MIT License로 무료로(상업적 사용O) 가능
option이 매우 다양
swiper-container > swiper-wrapper > swiper-slide 구조

1) demo에 있는 원하는 sourcecode 찾기

autoplay: 자동으로 넘어가는

2) html <head>에 삽입

style의 경우, <style>로 <head>내에 바로 넣어도 되지만 관리를 편하게 하기 위하여 css 폴더 내 swiper.css 파일을 생성하여 style 코드를 삽입함

    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />

2) html <body>에 script 삽입

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="js/swiper.js"></script>

3) swiper.css

swiper의 style 지정(기본 코드에서 원하는 style로 수정가능)

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  /*w,h 수정*/
  width: 100vw;
  height: 90%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

4) swiper.js

spaceBetween

var swiper = new Swiper(".mySwiper", {
  spaceBetween: 30,
  centeredSlides: true,
  // 3.5s마다 자동 넘김
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

[참고]