5월25일 8일차 - 슬라이드 top, 배경고정, JS로 toggle("on ") 학습

버튼을 클릭하면 슬라이드가 바뀌는 기능을 배웠습니다.

jquery로 class의 index를 변수로 지정하고 css 속성의 top에 index 값을 곱해주면

이미지가 위로 올라가는 듯한 슬라이드를 구현할 수 있습니다.

$(function () {
  $(".num li").on("click", function () {
    var idx = $(this).index();
    $('.shoes .case ul').css({ top:-450 *idx})
  })
});

[버튼을 누르면 top 위치가 변하는 슬라이드]

 

그리고 이미지를 배경에 두고 전면의 레이아웃만 움직이는 효과를 배웠습니다.

하지만 실수로 파일을 백업하지 않았습니다. 남아있는 코드로 복습한 뒤에 직접 구현해보도록 합니다.

 

 

css 속성 순서가 잘 기억나지 않을 때마다 복습해야겠습니다. 손에 익숙해질 때까지.

100% 정확하지는 않을 수도 있습니다. 크게는 가장 자주 이용하는 다음 6가지를 외우면 좋을 듯 합니다.

포지션 > 디스플레이 > width-height > 패딩마진 > 폰트 > 애니메이션

position  (z-index) >
display >
size >
padding margin  >
font (font-size color text-align) >
background >
border >
animation (transform transition)

---

인터넷 익스플로러에 지원하지 않는 기능은 기억해야합니다.
비록 안보고는 구현할 수 없다 하더라도 괜찮습니다.

대신에 현장에서 일을 할 때 문제가 무엇인를 떠올릴 수 있어야 합니다.

(Babel로 최신문법을 모든 구버전에서도 적용되는 문법으로 바꿀 수 있습니다.)

---

백그라운드 속성입니다.

bg안에서 이미지가 자신의 크기만큼 들어가고 default 값은 repeat입니다. 여백이 있다면 이미지가 반복됩니다.
.test_bg {
  background-color: #f00;
  background-image: url(../img/logo.png);
  height: 444px;
}
  background-repeat: no-repeat;

 no-repeat 속성을 부여하면 반복되지 않습니다.

  background-size: cover; 

이미지를 이미지의 크기대로 보여줍니다. 박스가 작으면 이미지가 잘립니다.
  background-size: contain; 

박스가 작으면 이미지를 축소해서라도 모든 모습을 보여줍니다.

---

이미지를 배경에 두고 전면의 레이아웃만 움직이는 효과를 구현합니다.
.test_bg {
  background-image: url(../img/main_banner01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 300px;
  margin-bottom: 1000px;
}
축약형은 다음과 같습니다. 아이폰, 사파리에서는 적용되지 않습니다.
(칼라, 이미지, 리피트, 픽스드, bgposition x, bgposition y/cover)
.test_bg {
  background: #f00 url(../img/main_banner01.jpg) no-repeat fixed center center/cover;
  height: 300px;
  margin-bottom: 1000px;
}

---

이를 슬라이드에 적용해봅니다. background를 설정한 뒤에 사이즈를 줍니다.
          <div class="main_slider">
            <figure class="item01"></figure>
            <figure class="item02"></figure>
            <figure class="item03"></figure>
          </div>
주의사항입니다. 슬릭은 .main_slider>figure 과 같이 자식을 선택하는 것이 안됩니다.

높이를 줍니다.
.main_visual figure {
  height: 30rem;
}
background를 지정합니다.
.main_visual .item01 {
  background: url(../img/main_banner01.jpg) no-repeat center center/cover;
}

---

현재 슬라이드가 선택되었을 때 크기가 변화하는 효과를 줍니다.
현재 슬라이드에는 on 클래스명을 주고, 형제객체에는 on 클래스명을 제거합니다.
$(function () {
  $(".main_slider").on("init reInit afterChange", function () {
    var here = $(".slick-current");
    here.addClass("on").siblings().removeClass("on");
  });
현재 슬라이드(.on 이 붙었다면)의 크기를 150%로 커지게 합니다. transition도 0.5s 줍니다.
.main_visual .item01 {
  background: url(../img/main_bg01.jpg) no-repeat center center/100%;
}
.main_visual .item01.on {
  background: url(../img/main_bg01.jpg) no-repeat center center/150%;
  transition: 0.5s;
}
fade: true; 를 주게 되면 옆에서 날아오지 않고 제자리에서 이미지가 페이드인 합니다.
  $(".main_slider").slick({
    fade: true,
  });
});

---

overflow: hidden;을 이용해 클릭에 반응하여 top 위치가 변하는 슬라이드를 구현합니다
css js 설정을 합니다.
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/position04.css">
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/position04.js"></script>

html section을 만듭니다.
    <section class="shoes">
        <div class="case">
            <ul>
                <li>
                    <img src="../img/01s.png" alt="">
                </li>
            </ul>
        </div>
        <ul class="num">
            <li>01</li>
        </ul>
    </section>

css를 설정합니다.
body{
    background: #333;
}

.shoes {
    padding: 100px 0;
}

position: relative; 로 기준을 잡고 overflow: hidden; 으로 넘치는 사이즈는 가립니다.
.shoes > .case {
    position: relative;
    width: 809px;
    height: 450px;
    margin: 0 auto; /* 가운데로 이동합니다. */
    overflow: hidden;
}
position: absolute; 설정합니다.
.shoes ul {
    position: absolute;
    top: 0;
    left:0;
}

js로 이벤트를 구현합니다.
this 는 'click'이벤트를 실행한 대상입니다. 
    var idx = $(this).index(); 는 index(); 
$(function () {
  $(".num li").on("click", function () {
    var idx = $(this).index();
    console.log(idx);
  });
});
    var idx = $(this).index(); li의 index 값을 표시합니다.
$(function () {
  $(".num li").on("click", function () {
    var idx = $(this).index();
    $('.shoes .case ul').css({ top:-450 *idx})
  })
});

---

jquery 효과 확인은 https://jqueryui.com/ 에서 합니다.
transition 에는 다음과 같은 속성들이 있습니다.
transition: 1s;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s;