0708

벨로그용·2022년 7월 8일
0

ai스쿨

목록 보기
31/60

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)학습소감

파트를 완성하였는데 좋은 경험이었다.

profile
안녕하세요

0개의 댓글