실습 3~5일차

구성본·2022년 7월 5일

1. 학습한 내용(진행상황)

갑작스러운 인원 변동으로 인한 조 이동
하지만 맡은 부분은 같다
현재 추가된 사항

<script src="https://kit.fontawesome.com/dbfce80840.js" crossorigin="anonymous"></script>

<button class="load">
	<i class="fa-solid fa-circle-plus"></i>
</button>

폰트어썸 버튼 추가(하지만 백그라운드 색깔이 뭔가 이상하다)
미디어쿼리 추가

@media screen and (max-width: 1217px){
    section div.back-5{
        height: 250px;
    }
    section div img.sec5-image{
        width: 50%;
        margin-left: 20px;
    }
    section div ul.wraper-ul{
        margin: 0 5%;
    }
    section div ul li.columns{
        width: calc(100% / 8);
    }
    section div ul li.p{
        word-break: break-all;
    }
    section div ul li div.icon-image{
        width: 10vw;
        height: 10vw;
    }
}

@media screen and (max-width: 940px){
    section div.back-5{
        height: 300px;
    }
    section div img.sec5-image{
        width: 60%;
        margin: 80px 185px;
    }
    section div ul.wraper-ul{
        max-width: 500px;
        margin: 0 auto;
    }
    section div ul li.columns{
        width: calc(100% / 4);
    }
    section div ul li div.icon-image{
        width: 110px;
        height: 110px;
    }
    section div ul li.p{
        word-break: break-all;
    }
}

max-width가 1217일 때와 940일 때 기본적으로 변경될 수 있는 부분들 추가
자잘 자잘한 css부분들을 추가하고 좀 더 나름 보기 좋게 변화를 줬다
현재는 마진을 추가하지 않고 각 사이즈일 때 8줄, 4줄로 나올 수 있는 부분들만 구현
전체적인 아이콘 사이즈가 맞지 않는 느낌

* {
box-sizing: border-box;
}

이걸 추가하니 박스 사이즈에 맞는 모습들로 변화
현재 미디어쿼리를 js 함수로 가져가서 적용하는 방식을 고민 중
li를 배열화 시켜서 함수로 가져온 다음 각 사이즈에서 변화 시킬 수 있는 함수들을 만들어서 적용하고자 한다.
문제는

window.onload = function(){
    let list = document.getElementsByClassName("icon");

현재까지 진행된 전체 코드
-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, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="./css/section5.css">
    <link rel="stylesheet" href="./css/animate.css">
    <script src="https://kit.fontawesome.com/dbfce80840.js" crossorigin="anonymous"></script>
    <script src="./js/wow.min.js"></script>
    <!-- <script src="./js/section5.js"></script> -->
    <script src="./js/section5 copy.js"></script>
    <script>
        wow = new WOW(
        {
        boxClass:     'wow',      
        animateClass: 'animated',
        offset:       0,          
        mobile:       true,       
        live:         true    
        })
        wow.init();
    </script>
</head>
<body>
    <section>

        <div class="back-5">
            <div class="back-5d">
                <img src="./image/리소프트로고_big.png" class="wow fadeInDown sec5-image">
            </div>
        </div>

        <div class="wraper">
            <ul class="wraper-ul">

                <li id="test" class="wow fadeInUp columns" data-wow-delay="0.1s">
                    <div class="icon-image">
                        <img src="./image/대구광역시 건축사회.png" class="icon">                
                    </div>
                    <p class="icon-name">대구광역시 건축사회</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="0.2s">
                    <div class="icon-image">
                        <img src="./image/대구광역시.png" class="icon">                
                    </div>
                    <p class="icon-name">대구광역시</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="0.3s">
                    <div class="icon-image">
                        <img src="./image/매일신문.png" class="icon">                
                    </div>
                    <p class="icon-name">매일신문</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="0.4s">
                    <div class="icon-image">
                        <img src="./image/경북대학교.png" class="icon">                
                    </div>
                    <p class="icon-name">경북대학교</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="0.5s">
                    <div class="icon-image">
                        <img src="./image/대구MBC문화원.png" class="icon">                
                    </div>
                    <p class="icon-name">대구MBC문화원</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="0.6s">
                    <div class="icon-image">
                        <img src="./image/대구광역시 체육회.png" class="icon">                
                    </div>
                    <p class="icon-name">대구광역시 체육회</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="0.7s">
                    <div class="icon-image">
                        <img src="./image/대구가톨릭대학교.png" class="icon">                
                    </div>
                    <p class="icon-name">대구가톨릭대학교</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="0.8s">
                    <div class="icon-image">
                        <img src="./image/송파구청.png" class="icon">                
                    </div>
                    <p class="icon-name">송파구청</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="0.9s">
                    <div class="icon-image">
                        <img src="./image/국민의힘.png" class="icon">                
                    </div>
                    <p class="icon-name">국민의힘</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="1.8s">
                    <div class="icon-image">
                        <img src="./image/국제라이온스협회.png" class="icon">                
                    </div>
                    <p class="icon-name">국제라이온스협회</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="1.7s">
                    <div class="icon-image">
                        <img src="./image/한국전기공사협회.png" class="icon">                
                    </div>
                    <p class="icon-name">한국전기공사협회</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="1.6s">
                    <div class="icon-image">
                        <img src="./image/즐거운세상.png" class="icon">                
                    </div>
                    <p class="icon-name">(주)즐거운 세상</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="1.5s">
                    <div class="icon-image">
                        <img src="./image/해양대학교.png" class="icon">                
                    </div>
                    <p class="icon-name">한국해양대학교</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="1.4s">
                    <div class="icon-image">
                        <img src="./image/상공회의소.png" class="icon">                
                    </div>
                    <p class="icon-name">대구상공회의소</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="1.3s">
                    <div class="icon-image">
                        <img src="./image/대한건설협회.png" class="icon">                
                    </div>
                    <p class="icon-name">대한건설협회</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="1.2s">
                    <div class="icon-image">
                        <img src="./image/한국청년회의소.png" class="icon">                
                    </div>
                    <p class="icon-name">한국청년회의소</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="1.1s">
                    <div class="icon-image">
                        <img src="./image/계명대.png" class="icon">                
                    </div>
                    <p class="icon-name">계명대학교</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="1.0s">
                    <div class="icon-image">
                        <img src="./image/해양대학교.png" class="icon">                
                    </div>
                    <p class="icon-name">목포해양대학교</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="1.9s">
                    <div class="icon-image">
                        <img src="./image/대구공고.png" class="icon">                
                    </div>
                    <p class="icon-name">대구공업고등학교</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="2.0s">
                    <div class="icon-image">
                        <img src="./image/대경산업협회.png" class="icon">                
                    </div>
                    <p class="icon-name">대경ITC산업협회</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="2.1s">
                    <div class="icon-image">
                        <img src="./image/한국조리기능장협회.png" class="icon">                
                    </div>
                    <p class="icon-name">한국조리기능장협회</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="2.2s">
                    <div class="icon-image">
                        <img src="./image/여성기업인협회.png" class="icon">                
                    </div>
                    <p class="icon-name">IT여성기업인협회</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="2.3s">
                    <div class="icon-image">
                        <img src="./image/중소기업융합연합회.png" class="icon">                
                    </div>
                    <p class="icon-name">중소기업융합연합회</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="2.4s">
                    <div class="icon-image">
                        <img src="./image/대구신용보증재단.png" class="icon">                
                    </div>
                    <p class="icon-name">대구신용보증재단</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="2.5s">
                    <div class="icon-image">
                        <img src="./image/달서구청.png" class="icon">                
                    </div>
                    <p class="icon-name">달서구청</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="2.6s">
                    <div class="icon-image">
                        <img src="./image/대구디지털산업진흥회.png" class="icon">                
                    </div>
                    <p class="icon-name">대구디지털산업진흥원</p>
                </li>

                <li class="wow fadeInUp columns" data-wow-delay="2.7s">
                    <div class="icon-image">
                        <img src="./image/로타리클럽.png" class="icon">                
                    </div>
                    <p class="icon-name">국제로타리클럽</p>
                </li>

            </ul>
            <button class="load">
                <i class="fa-solid fa-circle-plus"></i>
            </button>
        </div>
    </section>

</body>
</html>

-css

@charset "utf-8";
/* 가장 기본적인 틀 */
*{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Noto Sans KR', sans-serif;
    box-sizing: border-box;
    vertical-align: baseline;
}

/* sec-5 RESOFT Image */
section div.back-5{
    background-color: #04088a;
    width: 100%;
    height: 300px;
}
section div.back-5d{
    position: relative;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
section div img.sec5-image{
    position: absolute;
    bottom: 0;
}

/* sec-5 Icon */
section div.wraper{
    max-width: 1400px;
    margin: 150px auto;
    text-align: center;
}
section div ul.wraper-ul{
    display: flex;
    flex-wrap: wrap;
}

section div ul li.columns{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 9);
    margin-bottom: 50px;
}

/* sec-5 Icon Image */
section div ul li div.icon-image{
    position: relative;
    width: 120px;
    height: 120px;
    border: 3px solid rgb(224, 221, 221);
    border-radius: 50%;
}

section div ul li div img.icon{
    position: absolute;
    max-width: 100%;
    margin-bottom: 5px;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section div ul li p{
    font-size: 15px;
    color: #A3A3A3;
    margin: 15px;
    word-break: break-all;
}
section button {
    font-size: 70px;
    color: #04088a;
}

/* media Query */
@media screen and (max-width: 1217px){
    section div.back-5{
        height: 250px;
    }
    section div img.sec5-image{
        width: 50%;
        margin-left: 20px;
    }
    section div ul.wraper-ul{
        margin: 0 5%;
    }
    section div ul li.columns{
        width: calc(100% / 8);
    }
    section div ul li.p{
        word-break: break-all;
    }
    section div ul li div.icon-image{
        width: 10vw;
        height: 10vw;
    }
}

@media screen and (max-width: 940px){
    section div.back-5{
        height: 300px;
    }
    section div img.sec5-image{
        width: 60%;
        margin: 80px 185px;
    }
    section div ul.wraper-ul{
        max-width: 500px;
        margin: 0 auto;
    }
    section div ul li.columns{
        width: calc(100% / 4);
    }
    section div ul li div.icon-image{
        width: 110px;
        height: 110px;
    }
    section div ul li.p{
        word-break: break-all;
    }
}

-js

if(matchMedia("screen and (max-width: 1217px)").matches){
   
    for (var i=0; i<list.length; i++){
        array.push(list[i]); // 배열 끝에 인자로 주어진 값을 추가, 새 배열 반환
    }

2. 학습한 내용 중 어려웠던 점

배열화 시킨 뒤 이걸 array라는 함수로 가져와서 사용해야 하는데 새로운 array를 만드는 부분이 잘 안됨. 함수를 for~return하는 부분까지 잘 적용이 안됨. 함수 부분이 많이 부족하다.
기본적인 부분을 보고 응용할 수 있어야 되는데 그게 안되서 매우 답답하다. 코 앞까지 정답이 와 있는 느낌인데 문 턱에서 걸리는 느낌. 물론 이것도 내 생각일 뿐이지만..아무튼 몇 날을 이 간단하지만 어려운 부분때문에 막혀있다.
내가 과연 극복할 수 있을까?
배열 부분만 뚫으면 나머지 함수 만드는 건 좀 편할까...?

3. 해결방법

최대한 기본적인 함수 만드는 법부터 모두 훑으면서 어떻게하면 응용할 수 있을 지 생각해보고 있다
머리가 정말 나쁘긴 한 것 같다. 낫 놓고 기억자 모른다는 느낌이 이런걸까 싶다.

4. 학습소감

많은 분들이 다양한 이유들로 프로젝트에서 빠지신걸 보았다. 아까웠다. 다양한 이유들이 있겠지만, 지금까지 쏟은 시간이, 앞으로도 뭐든 할 수 있는 가능성들이, 그들이 나보다 가진 많은 시간들이.
나는 포기할 수 없다. 그들만큼 시간도, 능력도 없다. 그저 해야된다. 인생 살면서 처음으로 최선에 가까운 노력을 해보고 있다. 남들보다 늦더라도, 남들과 비교되더라도 포기만 안하면 된다. 답이 없어보여도, 그 옛날 군대에서 머리에 새긴 단 하나가 있다면, 길은 항상 있고 걷다보면 끝이 있고, 언젠간 해는 뜬다는거.
머리가 나빠도 하다보면 이해하지 않을까, 라는 생각으로 묵묵히 해보자.

구성본

코딩공부중

이전 포스트

실습 2일 차

다음 포스트

실습 3~5일차

1. 학습한 내용(진행상황)

2. 학습한 내용 중 어려웠던 점

3. 해결방법

4. 학습소감

실습 2일 차

실습 6일 차

0개의 댓글