• footer 높이 따라오기
  • 사진 슬라이드

 

1) footer 높이 따라오기

 

 

<body>
  <section id="content">
    <div class="inner">
      <div class="sub-tab">
        <ul class="tab">
          <li class="on" data-id="0"><a href="#">제목1</a></li>
          <li data-id="1"><a href="#">제목2</a></li>
          <li data-id="2"><a href="#">제목3</a></li>
          <li data-id="3"><a href="#">제목4</a></li>
          <li data-id="4"> <a href="#">제목5</a></li>
        </ul>
        <div class="con-box">
          <article class="box box0">
            <h3>제목1</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis,
              ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus
              consequatur vero. Voluptatibus?
            </p>
          </article>
          <article class="box box1">
            <h3>제목1</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis,
              ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus
              consequatur vero. Voluptatibus?
            </p>
          </article>
          <article class="box box2">
            <h3>제목2</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis,
              ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus
              consequatur vero. Voluptatibus?
            </p>
          </article>
          <article class="box box3">
            <h3>제목3</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis,
              ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus
              consequatur vero. Voluptatibus?
            </p>
          </article>
          <article class="box box4">
            <h3>제목4</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis,
              ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus
              consequatur vero. Voluptatibus?
            </p>
          </article>
        </div>
      </div>
    </div>
  </section>
  <footer id="footer">
    하단내용
  </footer>
  <script>
    const get = (target) => {
      return document.querySelector(target);
    }
    const getAll = (target) => {
      return document.querySelectorAll(target);
    }

    let $li = getAll('li');
    let $box = getAll('.box');
    let $conBox = get('con-box');
    let content = get('#content');
    let id = 0;
    let old = 0;
    let h = 0;

    $box.forEach(boxList => {
      boxList.style.display = 'none'
    })

    $box[id].style.display = 'block';

    $li.forEach(element => {
      element.addEventListener('click', e => {
        id = e.currentTarget.dataset.id;

        $box.forEach(boxList => {
          boxList.style.display = 'none'
        })

        $box[id].style.display = 'block';

        $li[old].classList.remove('on');

        e.currentTarget.classList.add('on');

  
        // 높이 처리
        h = getComputedStyle($box[id]).height;
        h = parseInt(h) +200;
        content.style.height = h +'px';

        old = id;
      })
    })
  </script>
</body>

 

내용이 들어있는 박스를 선택할 때마다 footer의 위치를 맞춰주도록 구현해 보았다.

getComputedStyle($box[id]).height;를 변수 h에 넣어 박스의 높이를 할당하고, footer까지 200px의 여유가 있게 했다.

 

 

 

2) 사진 슬라이드

 

<body>
  <div class="con-box">
    <ul class="banner">
      <li>
        <img src="images/img0.jpg" alt="">
      </li>
      <li>
        <img src="images/img1.jpg" alt="">
      </li>
      <li>
        <img src="images/img2.jpg" alt="">
      </li>
      <li>
        <img src="images/img3.jpg" alt="">
      </li>
      <li>
        <img src="images/img4.jpg" alt="">
      </li>
    </ul>
    <p>
      <button class="btn prev">
        <i class="xi-angle-left-thin"></i>
      </button>
      <button class="btn next">
        <i class="xi-angle-right-thin"></i>
      </button>
    </p>
  </div>
  <script>
    ; (function () {
      const get = (target) => {
        return document.querySelector(target);
      }
      const getAll = (target) => {
        return document.querySelectorAll(target);
      }

      let $banner = get('.banner');
      let $bannerli = getAll('.banner li');
      let $next = get('.next');
      let $prev = get('.prev');
      let current = 0;
      let totalImage = $bannerli.length;
      let size = 750;


      // xxx.style.transform = translateX(750); banner 이동
      $next.addEventListener('click', e => {
        current--;
        banner();
      })
      $prev.addEventListener('click', e => {
        current++;
        banner();
      })

      function banner() {
        $banner.style.transform = `translateX(${size*current}px)`;
      }

    })();
  </script>
</body>

 

 버튼을 누를 때마다 currnet의 값이 1씩 증감하고 사진의 가로 크기인 750p만큼 곱해져 ul이 x축으로 이동하게 만들었다.

 

 

  <script>
    ; (function () {
      const get = (target) => {
        return document.querySelector(target);
      }
      const getAll = (target) => {
        return document.querySelectorAll(target);
      }

      let $banner = get('.banner');
      let $bannerli = getAll('.banner li');
      let $next = get('.next');
      let $prev = get('.prev');
      let current = 0;
      let totalImage = $bannerli.length;
      let size = 750;


      // xxx.style.transform = translateX(750); banner 이동
      $next.addEventListener('click', e => {
        if(current === -4){
          current = 1;
        }
        current--;
        banner();
      })
      $prev.addEventListener('click', e => {
        if(current === 0){
          current = -5;
        } 
        current++;
        banner();
      })

      function banner() {
        $banner.style.transform = `translateX(${size*current}px)`;
      }

    })();
  </script>

 

 

if문을 사용해 current 값을 순환하게 하면 그에 따라 사진도 순환하게 된다.

 

 

아래 코드처럼 overflow : hidden을 사용하면 나머지 이미지들은 보이지 않고 ul의 크기만큼만 li가 보이게 된다.

 

    .con-box {
      width: 750px;
      margin: 50px auto;
      position: relative;
      overflow: hidden;
    }

 

 

티스토리툴바