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="./img/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="./img/리소프트로고_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="./img/대구광역시 건축사회.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="./img/대구광역시.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="./img/매일신문.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="./img/경북대학교.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="./img/대구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="./img/대구광역시 체육회.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="./img/대구가톨릭대학교.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="./img/송파구청.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="./img/국민의힘.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="./img/국제라이온스협회.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="./img/한국전기공사협회.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="./img/즐거운세상.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="./img/해양대학교.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="./img/상공회의소.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="./img/대한건설협회.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="./img/한국청년회의소.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="./img/계명대.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="./img/목포해양대학교.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="./img/대구공고.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="./img/대경산업협회.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="./img/한국조리기능장협회.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="./img/여성기업인협회.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="./img/중소기업융합연합회.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="./img/대구신용보증재단.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="./img/달서구청.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="./img/대구디지털산업진흥회.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="./img/로타리클럽.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>*아이콘 파트
·아이콘 부분 롤린효과 애니메이션
·1217px 이상일때 아이콘 가로 9개
·941px 이상일때 아이콘 가로 8개
·940px 이하일때 아이콘 가로 4개
·1216px 이하일때 안보이는 아이콘 보이게 하는 추가버튼
·윈도우에 스크롤이 300px이상 생기면 최상단으로 올려주는 top버튼 생성
2)학습내용 중 어려웠던점
X
3)해결방법
X
4)학습소감
각자 파트 부분에서 코드 분석을 하여 자신이 짠 코드를 더 깊게 이해할수있는 좋은시간이었다.
안녕하세요