page. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

after 로 이모티콘 넣는 방법

div>span::after{
   font-family:"font Awesome 6 Free";
   content:"\\f586";                      //이모티콘 폰트어썸 상단에 코드 복사
   font-weight:900;
   
}
div:hover>span::after{
    content:"\\f5b3";
}

after로 이모티콘 넣기 통해 아코디언 만들기

$("ul.acd>li").click(function () {
   var $this = $(this);

   $this.toggleClass("active").children("ul").slideToggle();
   
   updateBtnLabel();
});

$(".btn_1").click(function () {
   var $lis = $("ul.acd >li");

   //$lis 안에 active 클래스가 없는 요소가 0개인지 확인
   //$lis에 있는 모든 요소가 .active를 가지고 있는지 체크
   if ($lis.not(".active").length == 0) {
      //모든 $lis 요소가 .acive 상태일 때 remove
      $lis.removeClass("active").children("ul").slideUp();
      
   } else {
      //하나라도 .acive가 아닌게 있을 때 add
      $lis.addClass("active").children("ul").slideDown();
   }
   updateBtnLabel();
});

function updateBtnLabel(){
   if($('ul.acd > li:not(.active)').length == 0){
      //ul.acd >li 중에서 .active 가 아닌 게 하나라도 없으면 (모두 acitve 상태면)
      $('.btn_1').text('전체닫기');
   }
   else{
      //하나라도 .active가 아닌 li가 있으면(아직 열리지 않은 항목이 있으면)
      $('.btn_1').text('전체열기');
   }
}

결과물

https://codepen.io/qhhsgvnt-the-looper/pen/xbbJdyV?editors=0010

체크박스 만들기

<script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js>"></script>

<div><input type="checkbox" class="form-1__checkbox-all"></div>

<hr>
<section>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
</section>

console.clear();

$('.form-1__checkbox-all').change(function(){
   if(this.checked){
      $('.form-1__checkbox-item:not(:checked)').prop('checked',true)
   }
   else{
       $('.form-1__checkbox-item').prop('checked',false)}
   
});

$('.form-1__checkbox-item').change(function(){
  let allChecked = $('.form-1__checkbox-item:not(:checked)').length==0;
  // 값이 true, false 만 나오게 됨
   $('.form-1__checkbox-all').prop('checked', allChecked);
});

https://codepen.io/qhhsgvnt-the-looper/pen/OPPovXE?editors=1011

Masonry 사용법

<script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js>"></script>

<div><input type="checkbox" class="form-1__checkbox-all"></div>

<hr>
<section>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
   <div><input type="checkbox" class="form-1__checkbox-item"></div>
</section>

/* 커스텀 */
.section-1-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-1-loading::after {
  content: "로딩중...";
}

.section-1 .grid-item {
  padding:10px;
}

.section-1 .grid-item > a {
  display:block;
}

.section-1 .grid-item > a > img {
  display:block;
  width:100%;
}

@media ( min-width:1600px ) {
  .section-1 .grid-item {
    width: calc(100% / 5);
  }
}

@media ( max-width:1599px ) and ( min-width:1200px ) {
  .section-1 .grid-item {
      width: calc(100% / 4);
  }
}

@media ( max-width:1199px ) and ( min-width:800px ) {
  .section-1 .grid-item {
    width: calc(100% / 3);
  }
}

@media ( max-width:799px ) and ( min-width:600px ) {
  .section-1 .grid-item {
    width: calc(100% / 2);
  }
}

@media ( max-width:599px ) {
  .section-1 .grid-item {
    width: calc(100% / 1);
  }
}