[프로젝트 1차] Cha.Dam.Hwa (3/5 - 6일차)

프로젝트 1차 표지

---

✔  수동 슬라이드 구현하기

수동 슬라이드 효과는 INPUT 태그를 사용해서 만들었다. type은 radio 속성값을 사용했다. radio속성은 한 번 클릭하면 다시 해제가 안 되고, 동일한 name 속성으로 그룹을 맺은 것처럼 많은 input중에 하나만 체크되는 효과가 있다. 그리고 INPUT은 LABEL과 연결해서 사용할 수 있다. input에 id값을 주고 label에 for 속성값으로 input에 준 아이디값을 넣게 되면 서로 연결되어서 라벨안에 들어있는 텍스트를 클릭하거나 이미지를 클릭해도 input이 체크가 된다.

수동 슬라이드 원리 1

그래서 슬라이드 영역 상단에 input을 만들고 슬라이드 영역 안쪽에 label을 배치해 좌우 슬라이드 버튼으로 만들어준다.

수동 슬라이드 원리2

그래서 라벨을 클릭하면 연결된 인풋이 체크가 되면서 슬라이드 영역이 바뀌는 원리이다.

white-space : nowrap ;

inline 요소의 자동 줄바꿈을 없애는 속성

수동 슬라이드 원리 3

수동 슬라이드 원리 4

---

function Figure() {
  return (
    <figure className="figure">
        <input className="btn" type="radio" name="slide" id="slide01" checked />
        <input className="btn" type="radio" name="slide" id="slide02" checked />
        <input className="btn" type="radio" name="slide" id="slide03" checked />
        <input className="btn" type="radio" name="slide" id="slide04" checked />
    <ul className="slide-list">
        <li className="slide-item">
            <a href="/">
            <label htmlFor="slide04" className="prev" />
            <img src="/images/banner4.png" alt="event banner" />
            <label htmlFor="slide02" className="next" />
            </a>
        </li>
        <li className="slide-item">
            <a href="/">
            <label htmlFor="slide01" className="prev" />
            <img src="/images/banner3.png" alt="event banner" />
            <label htmlFor="slide03" className="next" />
            </a>
        </li>
        <li className="slide-item">
            <a href="/">
            <label htmlFor="slide02" className="prev" />
            <img src="/images/banner2.png" alt="event banner" />
            <label htmlFor="slide04" className="next" />
            </a>
        </li>
        <li className="slide-item">
            <a href="/">
            <label htmlFor="slide03" className="prev" />
            <img src="/images/banner1.png" alt="event banner" />
            <label htmlFor="slide01" className="next" />
            </a>
        </li>
    </ul>
    </figure>
    );
}

input[name='slide'] {
    display: none;
  }
  [id='slide01']:checked ~ .slide-list .slide-item {
    transform: translateX(0);
    animation: slide01 20s infinite;
  }

  [id='slide02']:checked ~ .slide-list .slide-item {
    transform: translateX(-100%);
    animation: slide02 20s infinite;
  }

  [id='slide03']:checked ~ .slide-list .slide-item {
    transform: translateX(-200%);
    animation: slide03 20s infinite;
  }

  [id='slide04']:checked ~ .slide-list .slide-item {
    transform: translateX(-300%);
    animation: slide04 20s infinite;
  }

  [id='slide05']:checked ~ .slide-list .slide-item {
    transform: translateX(-400%);
    animation: slide05 20s infinite;
  }
}

@keyframes slide01 {
  0% {
    left: 0%;
  }
  33% {
    left: 0%;
  }
  34% {
    left: -100%;
  }
  66% {
    left: -100%;
  }
  67% {
    left: -200%;
  }
  99% {
    left: -200%;
  }
  100% {
    left: 0%;
  }
}

@keyframes slide02 {
  0% {
    left: 0%;
  }
  33% {
    left: 0%;
  }
  34% {
    left: -100%;
  }
  66% {
    left: -100%;
  }
  67% {
    left: 100%;
  }
  99% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}

@keyframes slide03 {
  0% {
    left: 0%;
  }
  33% {
    left: 0%;
  }
  34% {
    left: 200%;
  }
  66% {
    left: 200%;
  }
  67% {
    left: 100%;
  }
  99% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}

@keyframes slide04 {
  0% {
    left: 0%;
  }
  23% {
    left: 0%;
  }
  25% {
    left: 300%;
  }
  48% {
    left: 300%;
  }
  50% {
    left: 200%;
  }
  73% {
    left: 200%;
  }
  75% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}

---

수동 슬라이드로 구현해본 figure태그