220705 화

1) 학습한 내용
리소프트 홈페이지 제작에 있어 자바스크립트작업복습

<script>
			// 아이콘 8개
			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>

css작업

@media screen and (max-width:1217px) {
  .box_wrap .box_btn{
    bottom: 10%;}
	.box_wrap{
    height: 250px;}
	.box_wrap img{
    width: 50%;}
  .clients-img-wrap ul li{
    width: calc(100% / 8);}
	.clients-img-wrap ul li .img-wrap{
    width: 10vw; 
    height: 10vw;}
	.clients-img-wrap ul{
    margin: 0 5%;}
	.clients-img-wrap .load{
    display: initial;}
}	

@media screen and (max-width: 940px){
  .box_wrap
  {height: 400px; 
    text-align: center;}
  .box_wrap img{
    width: 60%;
    position:unset; 
    margin: 70px 0;}
  .box_wrap .box_btn{
    position: unset; 
    flex-direction: column; 
    align-items: center;}
  .box_wrap .box_btn button{
    width: 60%;}
  .clients-img-wrap ul{
    max-width: 500px; 
    margin: 0 auto;}
  .clients-img-wrap ul li{
    width: calc(100% / 4 - 6%); 
    margin: 0 3% 30px 3%;}
  .clients-img-wrap ul li .img-wrap{
    width: 110px; 
    height: 110px;}
  .clients-img-wrap .load i{
    font-size: 70px;}
}

@media를 이용해 화면을 늘렷다 줄였다 하였을때 보이는 그림 갯수 조정
2) 학습내용 중 어려웠던 점

자바 스크립트함수를 이용하여 딜레이를 주어서 표현하는 작업이 미흡함.
3) 해결방법

구글과 개발자도구를 활용하여 다양한 함수를 활용하여 실습을 하여 해결.

4) 학습소감

홈페이지를 제작하는데 있어서 짧은 자바스크립트와 css를 통하여 제작하여봤는데 내가 알고있는 다양한 함수들을 더 사용하여 보완하여가야겠다고 생각했다.