1)학습한 내용
*html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resoft</title>
<link rel="shortcut icon" href="./리소프트 홈페이지 이미지/web.png" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./animate.css">
<script src="./wow.min.js"></script>
<script>new WOW().init();</script>
<script src="https://kit.fontawesome.com/af2a9fd141.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
</head>
<body _c_t_common="1">
<!--아이콘-->
<div class="box_wrap">
<div class="img_btn">
<img src="./리소프트 홈페이지 이미지/리소프트로고_big.png"
alt class="wow rotateInDownLeft" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s;
animation-name: rotateInDownLeft;">
</div>
</div>
<div class="clients-img-wrap">
<ul>
<li class="wow rollIn customer_list" data-wow-delay="0.1s"
style="visibility: visible; animation-delay: 0.1s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구광역시 건축사회.png" alt="">
</div>
<p>대구광역시 건축사회</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="0.2s"
style="visibility: visible; animation-delay: 0.2s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구광역시.png" alt="">
</div>
<p>대구광역시</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/매일신문.png" alt="">
</div>
<p>매일신문</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="0.4s"
style="visibility: visible; animation-delay: 0.4s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/경북대학교.png" alt="">
</div>
<p>경북대학교</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="0.5s"
style="visibility: visible; animation-delay: 0.5s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구MBC문화원.png" alt="">
</div>
<p>대구MBC문화원</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="0.6s"
style="visibility: visible; animation-delay: 0.6s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구광역시 체육회.png" alt="">
</div>
<p>대구광역시 체육회</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="0.7s"
style="visibility: visible; animation-delay: 0.7s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구가톨릭대학교.png" alt="">
</div>
<p>대구가톨릭대학교</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="0.8s"
style="visibility: visible; animation-delay: 0.8s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/송파구청.png" alt="">
</div>
<p>송파구청</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="0.9s"
style="visibility: visible; animation-delay: 0.9s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/국민의힘.png" alt="">
</div>
<p>국민의힘</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="1.8s"
style="visibility: visible; animation-delay: 1.8s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/국제라이온스협회.png" alt="">
</div>
<p>국제라이온스협회</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="1.7s"
style="visibility: visible; animation-delay: 1.7s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/한국전기공사협회.png" alt="">
</div>
<p>한국전기공사협회</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="1.6s"
style="visibility: visible; animation-delay: 1.6s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/즐거운세상.png" alt="">
</div>
<p>(주)즐거운 세상</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="1.5s"
style="visibility: visible; animation-delay: 1.5s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/해양대학교.png" alt="">
</div>
<p>한국해양대학교</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="1.4s"
style="visibility: visible; animation-delay: 1.4s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/상공회의소.png" alt="">
</div>
<p>대구상공회의소</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="1.3s"
style="visibility: visible; animation-delay: 1.3s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대한건설협회.png" alt="">
</div>
<p>대한건설협회</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="1.2s"
style="visibility: visible; animation-delay: 1.2s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/한국청년회의소.png" alt="">
</div>
<p>한국청소년회의소</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="1.1s"
style="visibility: visible; animation-delay: 1.1s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/계명대.png" alt="">
</div>
<p>계명대학교</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="1.0s"
style="visibility: visible; animation-delay: 1.0s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/목포해양대학교.png" alt="">
</div>
<p>목포해양대학교</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="2.0s"
style="visibility: visible; animation-delay: 2.0s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구공고.png" alt="">
</div>
<p>대구공업고등학교</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="2.1s"
style="visibility: visible; animation-delay: 2.1s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대경산업협회.png" alt="">
</div>
<p>대경ICT산업협회</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="2.2s"
style="visibility: visible; animation-delay: 2.2s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/한국조리기능장협회.png" alt="">
</div>
<p>한국조리기능장협회</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="2.3s"
style="visibility: visible; animation-delay: 2.3s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/여성기업인협회.png" alt="">
</div>
<p>IT여성기업인협회</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="2.4s"
style="visibility: visible; animation-delay: 2.4s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/중소기업융합연합회.png" alt="">
</div>
<p>중소기업융합연합회</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="2.5s"
style="visibility: visible; animation-delay: 2.5s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구신용보증재단.png" alt="">
</div>
<p>대구신용보증재단</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="2.6s"
style="visibility: visible; animation-delay: 2.6s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/달서구청.png" alt="">
</div>
<p>달서구청</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="2.7s"
style="visibility: visible; animation-delay: 2.7s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구디지털산업진흥회.png" alt="">
</div>
<p>대구디지털산업진흥회</p>
</li>
<li class="wow rollIn customer_list" data-wow-delay="2.8s"
style="visibility: visible; animation-delay: 2.8s;
animation-name: rollIn;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/로타리클럽.png" alt="">
</div>
<p>국제로타리클럽</p>
</li>
</ul>
<button class="load">
<i class="fa-solid fa-circle-plus"></i>
</button>
</div>
<!--top버튼-->
<div class="topBtn">
<button class="move">
<i class="fa-solid fa-angle-up"></i>
</button>
<p>TOP</p>
</div>
<!-- 숨겨진 아이콘 보이게 하는버튼 -->
<script>
if (window.matchMedia("screen and (max-width: 1217px)").matches) {
$(function () {
$(".customer_list").hide();
var array = [];
var list = document.getElementsByClassName('customer_list');
for (var i = 0; i < list.length; i++) {
array.push(list[i]);
}
var visiArray = [];
visiArray = array.slice(0, 8);
visiArray = visiArray.concat(array.slice(8, 16).reverse());
visiArray = visiArray.concat(array.slice(16, 24));
var second = 0;
for (var i = 0; i < visiArray.length; i++) {
second = second + 0.1;
visiArray[i].setAttribute('data-wow-delay', second + 's')
visiArray[i].style.display = 'block';
}
var load = document.getElementsByClassName('load')[0];
//숨겨진 아이콘
load.addEventListener('click', function (e) {
e.preventDefault();
var hiddenArray = [];
hiddenArray = array.slice(24, 27);
var hSecond = 0;
for (var i = 0; i < hiddenArray.length; i++) {
hSecond = hSecond + 0.1;
hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
hiddenArray[i].style.display = 'block';
}
load.style.display="none";
window.scrollTo(0, window.pageYOffset + 1);
window.scrollTo(0, window.pageYOffset - 1);
});
});
}
// 아이콘 4개
if (window.matchMedia("screen and (max-width: 940px)").matches) {
$(function () {
$(".customer_list").hide();
var list = document.getElementsByClassName('customer_list');
var hiddenArray = [];
var openArray = [];
$(".customer_list").slice(0, 12).show();
for (var i = 0; i < list.length; i++) {
if (list[i].style.display == "none") {
hiddenArray.push(list[i]);
} else {
openArray.push(list[i]);
}
}
// 보여진 아이콘
var second = 0
for (var i = 0; i < openArray.length; i++) {
second = second + 0.1
openArray[i].setAttribute('data-wow-delay', second + 's');
}
//숨겨진 아이콘
var hSecond = 0;
$(".load").click(function (e) {
e.preventDefault();
for (var i = 0; i < hiddenArray.length; i++) {
hSecond = hSecond + 0.1;
hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
hiddenArray[i].style.display = 'block';
if ($(".customer_list:hidden").length == 0) {
$(".load").hide();
}
};
});
window.scrollTo(0, window.pageYOffset + 1);
window.scrollTo(0, window.pageYOffset - 1);
})
}
function preventClick(e){
e.preventDefault()
}
</script>
<!--top버튼 맨위로 스크롤-->
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 300){
$('.topBtn').show();
} else{
$('.topBtn').hide();
}
});
$('.topBtn').click(function(){
$('html, body').animate({scrollTop:0},400);
return false;
});
</script>
</body>
</html>*결과:
2)학습내용 중 어려웠던점
X
3)해결방법
X
4)학습소감
파트를 완성하였는데 좋은 경험이었다.
안녕하세요