실습 2일 차

구성본·2022년 7월 3일
실습2일차
<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>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="./js/wow.min.js"></script>
    <script>new WOW().init();</script>
</head>
<body>
    <section class="itemhover">

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


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

                <li 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>
    </section>

</body>
</html>
@charset "utf-8";
/* 가장 기본적인 틀 */
*{
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
}

/* sec-5 RESOFT Image */
.back-5{
    background-color: #04088a;
    width: 100%;
    height: 300px;
}
.sec5-image{
    position: relative;
    padding-top: 140px;
    padding-left: 250px;
    animation: fadeInDown 1s ease-in;
}

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

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

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

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

p{
    font-size: 15px;
    color: rgb(224, 221, 221);
    margin: 15px;
}

/* animation */
@keyframes fadeInDown{
    from{
        opacity: 0; 
        bottom: 50px;
    }
    to{
        opacity: 1;
        bottom: 0px;
    } 
}

/* media Query */
@media screen and (max-width:940px){
    .wraper-ul{
        max-width: 500px;
        margin: 0 auto;
    }
    .columns{
        width: calc(100% / 4);
        margin: 0 3% 30px 3%;
    }
    .icon-image{
        width: 110px;
        height: 110px;
    }
}

@media screen and (max-width:1217px){
    .wraper-ul{
        margin: 0 5%;
    }
    .columns{
        width: calc(100% / 8);
    }
    .icon-image{
        width: 10vw;
        height: 10vw;
    }
}

1. 추가된 점

  • animation fadeInDown 추가
  • animation fadeInUp에 각 리스트 별로 딜레이 주기 위해 WOW.js 사용
  • WOW.js사용하기 위해 링크 추가
<link rel="stylesheet" href="./css/animate.css">
<script src="./js/wow.min.js"></script>
<script>new WOW().init();</script>

2. 여전히 안되는 점

  1. 미디어쿼리
  2. animation을 적용했더니 만들어놓은 아이콘 이미지들이 깨지기 시작함

3. 해결해야 할 점

  1. 미디어쿼리를 통해 변화되는 부분들 수정 및 더하기 아이콘 추가 설정(감도 안잡힘)
  2. animation을 적용까지는 했는데 갑자기 아이콘 이미지들이 불일치되는 것 같은 모습(???)

4. 느낀점

이게 진짜 강의만 다 들었을 때 모두 할 수 있는 건지 솔직히 의문이다. 내가 너무 열심히 하지 않은 건가 싶기도 하다. 어떻게든 길을 찾아보면서 하곤 있지만 정말 쉽지 않은 것 같다. 지금 하는 부분들이 가장 기본적인 부분들이라는데...그저 미치겠다..

profile
구성본
코딩공부중
이전 포스트

실습 1일 차

다음 포스트

실습 3~5일차

0개의 댓글