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 fadeInDown" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s;
animation-name: fadeInDown;">
</div>
</div>
<div class="clients-img-wrap">
<ul>
<li class="wow fadeInUp customer_list" data-wow-delay="0.1s"
style="visibility: visible; animation-delay: 0.1s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구광역시 건축사회.png" alt="">
</div>
<p>대구광역시 건축사회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.2s"
style="visibility: visible; animation-delay: 0.2s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구광역시.png" alt="">
</div>
<p>대구광역시</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/매일신문.png" alt="">
</div>
<p>매일신문</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.4s"
style="visibility: visible; animation-delay: 0.4s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/경북대학교.png" alt="">
</div>
<p>경북대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.5s"
style="visibility: visible; animation-delay: 0.5s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구MBC문화원.png" alt="">
</div>
<p>대구MBC문화원</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.6s"
style="visibility: visible; animation-delay: 0.6s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구광역시 체육회.png" alt="">
</div>
<p>대구광역시 체육회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.7s"
style="visibility: visible; animation-delay: 0.7s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구가톨릭대학교.png" alt="">
</div>
<p>대구가톨릭대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.8s"
style="visibility: visible; animation-delay: 0.8s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/송파구청.png" alt="">
</div>
<p>송파구청</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.9s"
style="visibility: visible; animation-delay: 0.9s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/국민의힘.png" alt="">
</div>
<p>국민의힘</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.8s"
style="visibility: visible; animation-delay: 1.8s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/국제라이온스협회.png" alt="">
</div>
<p>국제라이온스협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.7s"
style="visibility: visible; animation-delay: 1.7s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/한국전기공사협회.png" alt="">
</div>
<p>한국전기공사협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.6s"
style="visibility: visible; animation-delay: 1.6s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/즐거운세상.png" alt="">
</div>
<p>(주)즐거운 세상</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.5s"
style="visibility: visible; animation-delay: 1.5s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/해양대학교.png" alt="">
</div>
<p>한국해양대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.4s"
style="visibility: visible; animation-delay: 1.4s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/상공회의소.png" alt="">
</div>
<p>대구상공회의소</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.3s"
style="visibility: visible; animation-delay: 1.3s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대한건설협회.png" alt="">
</div>
<p>대한건설협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.2s"
style="visibility: visible; animation-delay: 1.2s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/한국청년회의소.png" alt="">
</div>
<p>한국청소년회의소</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.1s"
style="visibility: visible; animation-delay: 1.1s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/계명대.png" alt="">
</div>
<p>계명대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.0s"
style="visibility: visible; animation-delay: 1.0s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/목포해양대학교.png" alt="">
</div>
<p>목포해양대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.0s"
style="visibility: visible; animation-delay: 2.0s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구공고.png" alt="">
</div>
<p>대구공업고등학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.1s"
style="visibility: visible; animation-delay: 2.1s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대경산업협회.png" alt="">
</div>
<p>대경ICT산업협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.2s"
style="visibility: visible; animation-delay: 2.2s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/한국조리기능장협회.png" alt="">
</div>
<p>한국조리기능장협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.3s"
style="visibility: visible; animation-delay: 2.3s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/여성기업인협회.png" alt="">
</div>
<p>IT여성기업인협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.4s"
style="visibility: visible; animation-delay: 2.4s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/중소기업융합연합회.png" alt="">
</div>
<p>중소기업융합연합회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.5s"
style="visibility: visible; animation-delay: 2.5s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구신용보증재단.png" alt="">
</div>
<p>대구신용보증재단</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.6s"
style="visibility: visible; animation-delay: 2.6s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/달서구청.png" alt="">
</div>
<p>달서구청</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.7s"
style="visibility: visible; animation-delay: 2.7s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구디지털산업진흥회.png" alt="">
</div>
<p>대구디지털산업진흥회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.8s"
style="visibility: visible; animation-delay: 2.8s;
animation-name: fadeInUp;">
<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>
<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);
// if (document.querySelectorAll('.customer_list[style="display:none;"]').length == 0) {
// load.style.display = "none";
// }
});
});
}
// 아이콘 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>
</body>
</html>*css
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
* {
box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
max-width: 100%;
font-family: 'Noto Sans KR', sans-serif;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*아이콘*/
.clients-img-wrap{
text-align: center;
max-width: 1400px;
margin: 150px auto;
}
.clients-img-wrap .load{
background: transparent;
cursor: pointer;
border: none;
display: none;
}
.clients-img-wrap .load i{
font-size: 80px;
color: #04088a;
}
.clients-img-wrap ul {
display: flex;
flex-wrap: wrap;
}
.clients-img-wrap ul li {
color:#a3a3a3;
font-size: 18px;
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
width: calc(100% / 9);
}
.clients-img-wrap ul li p {
font-size: 16px;
padding-top: 15px;
word-break: break-all;
}
.clients-img-wrap ul li img {
max-width: 100%;
padding: 20px;
margin-bottom: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.clients-img-wrap ul li .img-wrap {
width: 120px;
position: relative;
height: 120px;
border: 3px solid #dddddd;
border-radius: 50%;
}
.box_wrap .box_btn{
bottom: 10%;
}
.box_wrap img{
position: absolute;
bottom: 0;
}
.box_wrap{
background-color: #04088a;
height: 250px;
}
.box_wrap .img_btn{
position: relative;
height: 100%;
max-width: 1400px;
margin: 0 auto;
}
@media screen and (max-width: 1500px){
.clients-img-wrap ul{
margin: 0 2%;
}
.clients-img-wrap {
margin: 130px auto;
}
.box_wrap img {
left: 2%;
}
}
@media screen and (max-width:1217px) {
.clients-img-wrap .load{
display: initial;
}
.clients-img-wrap ul{
margin: 0 5%;
}
.clients-img-wrap ul li {
width: calc(100% / 8);
}
.box_wrap img {
width: 50%;
}
.clients-img-wrap ul li .img-wrap {
width: 10vw;
height: 10vw;
}
.clients-img-wrap .load{
display: initial;
}
}
@media screen and (max-width: 940px){
.clients-img-wrap ul{
max-width: 500px;
margin: 0 auto;
}
.title .h_tit{
font-size: 28px;
}
.clients-img-wrap ul li {
width: calc(100% / 4 - 6%);
margin: 0 3% 30px 3%;
}
.box_wrap {
height: 400px;
text-align: center;
}
.box_wrap img {
width: 60%;
position: unset;
margin: 70px 0;
}
.clients-img-wrap ul li .img-wrap {
width: 110px;
height: 110px;
}
.clients-img-wrap .load i{
font-size: 70px;
}
}*결과:
2)학습내용 중 어려웠던점
X
3)해결방법
X
4)학습소감
와우를 이용하여 애니메이션추가하는 법을 알았다.
다른애니메이션도 추가해볼 생각이다
안녕하세요