코딩일기

코딩일기

 

 

💜 

코드 보기 / 완성 화면

 

수업시간 내용을 정리중인 사이트

 

분위기를 알록달록하게 바꾸고 싶었지만

마음에 드는게 없어서 완전 심플한걸로 바꿨다

 

 

 

 

 

 

<div class="row">
    <div id="options" class="gridly">
      <ul class="filter option-set" data-filter-group="color">
        <li><a href="#filter-color-any" data-filter-value="" class="selected">ALL</a></li>
        <li class="webstandard"><a href="#filter-color-webstandard" data-filter-value=".class">CLASS</a></li>
        <li class="webstandard"><a href="#filter-color-webstandard" data-filter-value=".javascript">JAVASCRIPT</a>
        </li>
        <li class="webstandard"><a href="#filter-color-webstandard" data-filter-value=".site">SITE</a></li>
        <li class="webstandard"><a href="#filter-color-webstandard" data-filter-value=".html">HTML</a></li>
      </ul>
    </div>
</div>

버튼 클릭시 해당 필터링 그룹과 클래스를 이용해 페이지의 요소를 필터링 해서 보여주는 코드

 

 

  <!-- box -->
  <section class="color-shape class">
    <a href="class/index.html" target="_blank">
      <div class="image-wrap">
        <div class="hover-wrap">
          <span class="overlay-img-donut">CLASS</span>
          <span class="overlay-text-thumb-donut">클래스</span>
          <span class="overlay-text-thumb1-donut">클래스</span>
          <span class="overlay-text-thumb2-donut">CLASS</span>
        </div>
        <img src="assets/img/icon1.png" alt="portfolio">
        <div class="img-text donutImg">
          <h5>CLASS</h5>
          <p>클래스</p>
          <span>CLASS</span>
        </div>
      </div>
    </a>
  </section>
  <!-- //box -->

CLASS를 눌렀을때 필터링되서 나오게 되는 박스

 

  <!-- box -->
  <section class="color-shape javascript">
    <a href="javascript/index.html" target="_blank">
      <div class="image-wrap">
        <div class="hover-wrap">
          <span class="overlay-img-donut">JAVASCRIPT</span>
          <span class="overlay-text-thumb-donut">자바스크립트</span>
          <span class="overlay-text-thumb1-donut">자바스크립트</span>
          <span class="overlay-text-thumb2-donut">JAVASCRIPT</span>
        </div>
        <img src="assets/img/icon2.png" alt="portfolio">
        <div class="img-text donutImg">
          <h5>JAVASCRIPT</h5>
          <p>자바스크립트</p>
          <span>JAVASCRIPT</span>
        </div>
      </div>
    </a>
  </section>
  <!-- //box -->

JAVASCRIPT를 눌렀을때 필터링되서 나오게 되는 박스