실습 11일 차

구성본·2022년 7월 13일
실습 11일차

1. 학습한 내용

  • TOP버튼 만들기
  • html
 <div class="topBtn">
        <button class="move"><i class="fa-solid fa-angle-up"></i></button>
        <p>TOP</p>
 </div>

-js

window.addEventListener("scroll", function() {
    var moveBtn = document.getElementsByClassName('move')[0];
        moveBtn.addEventListener('click', function() {
            var offsetY = window.pageYOffset;
            if(offsetY !== 0) {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
            });
        };
    });
})

-a태그를 사용한 top버튼 사용 js

$(window).scroll(function(){
    if ($(this).scrollTop() > 300){
        $('.topBtn').show();
    } else{
        $('.topBtn').hide();
    }
});
$('.topBtn').click(function(){
    $('html, body').animate({scrollTop:0},400);
    return false;
});
  • 각자 만든 부분들을 모아서 이벤트 활성화
  • 전체 html
<!DOCTYPE html>
<html lang="ko">

<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 href="./style.css" rel="stylesheet">

    <!-- topBtn -->
    <script src="./topBtn.js"></script>
    <!-- 슬라이드 -->
    <link rel="stylesheet" href="reset.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/01f338039f.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />

    <!-- 에코 -->
    <link rel="stylesheet" href="./animate.css">
    <script src="./wow.min.js"></script>

    <!-- 아이콘 -->
    <script src="./section5.js"></script>
    <script>
        wow = new WOW(
            {
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 0,
                mobile: true,
                live: true
            })
        wow.init();
    </script>
</head>

<body>
    <!-------------------------------------------------------------- top button ----------------------------------------------------------------->
    <div class="topBtn">
        <button class="move"><i class="fa-solid fa-angle-up"></i></button>
        <p>TOP</p>
    </div>
    

     <!--------------------------------------------------------------- header -------------------------------------------------------------------->
    <header>
        <div id="wrapper" class="header">
            <div class="logo-box">
                <img src="./img/리소프트로고.png" alt="logo" class="logo" />
            </div>
            <div class="text-box">
                <div class="hd-1">
                    <p>Evolution<br />With New Software</p>
                    <!-- <p>Mobile APP(Android/iOS) Development, AI Bigdata Analysis, MetaVerse, Responsive WEBsite,
                        Brand Design Launch, ICT Consulting</p> -->
                    <p>
                        <span>Mobile APP(Android/iOS) Development, </span>
                        <span>AI Bigdata Analysis, MetaVerse, </span>
                        <span>Responsive WEBsite, Brand Design Launch, </span>
                        <span>ICT Consulting</span>
                    </p>
                </div>
                <div class="hd-2">
                    <img src="./img/메인뇌.png" alt="hd-img" class="hd-img" />
                </div>
            </div>
        </div>
    </header>

     <!-------------------------------------------------------------- card ----------------------------------------------------------------->
    <section>
        <article>
            <div class="b_wrap">
                <div class="busi_content_wrap">
                    <ul class="business_list">
                        <div class="flip">
                            <li class="front flip-item">
                                <a href="#">
                                    <p class="title">앱(APP) 개발</p>
                                    <p class="subTitleEng">ANDOID/IOS APP</p>
                                    <div class="img_wrap">

                                        <img src="./img/앱개발아이콘.png" alt="">
                                    </div>
                                </a>
                            </li>
                            <div class="back flip-item">
                                <a href='#' id='test' onclick='preventClick(event)' class="layoutImg"></a>
                                <img src="./img/앱개발.jpg" style="height: 100%; width: 100%">
                                <div class="app-text">

                                    Android 앱 개발 <br>
                                    iOS 앱 개발 <br>
                                    플랫폼 기획 및 설계
                                </div>
                            </div>
                        </div>
                        <div class="flip">
                            <li class="front flip-item">
                                <a href="#">
                                    <p class="title">웹(WEB) 구축</p>
                                    <p class="subTitleEng">RESPONSIVE WEB</p>
                                    <div class="img_wrap">
                                        <img src="./img/web.png" alt="" />
                                    </div>
                                </a>
                            </li>
                            <div class="back flip-item">
                                <a href='#' id='test' onclick='preventClick(event)' class="layoutImg"></a>
                                <img src="./img/웹구축.jpg" style="height: 100%; width: 100%">

                                <div class="app-text">
                                    반응형 홈페이지 구축 <br>데이터베이스 구축 <br>빅데이터 구축
                                </div>
                            </div>
                        </div>
                        <div class="flip">
                            <li class="front flip-item">
                                <a href="#">
                                    <p class="title">AI 기반 기술개발</p>
                                    <p class="subTitleEng">AI BIGDATA</p>
                                    <div class="img_wrap">
                                        <img src="./img/bigdata.png" alt="" />
                                    </div>
                                </a>
                            </li>
                            <div class="back flip-item" ;>
                                <a href='#' id='test' onclick='preventClick(event)' class="layoutImg"></a>
                                <img src="./img/AI기술개발.jpg" style="height: 100%; width: 100%">

                                <div class="app-text">
                                    AI 대화형 챗봇 <br>
                                    자동 객체인식 검출기 <br>
                                    딥러닝 학습 모델
                                </div>
                            </div>
                        </div>
                        <div class="flip">
                            <li class="front flip-item">
                                <a href="#">
                                    <p class="title">XR 콘텐츠 구현</p>
                                    <p class="subTitleEng">METAVERSE</p>
                                    <div class="img_wrap">
                                        <img src="./img/metaverse.png" alt="" />
                                    </div>
                                </a>
                            </li>
                            <div class="back flip-item">
                                <a href='#' id='test' onclick='preventClick(event)' class="layoutImg"></a>
                                <img src="./img/XR콘텐츠.jpg" style="height: 100%; width: 100%">

                                <div class="app-text">
                                    실감형 플랫폼 구축<br>
                                    가상현실 콘텐츠 제작<br>
                                    게임 콘텐츠 제작
                                </div>
                            </div>
                        </div>
                    </ul>
                </div>
        </article>


         <!-------------------------------------------------------------- slider ----------------------------------------------------------------->
        <article class="slide">
            <div class="news_wrap">
                <div class="news_content_wrap">
                    <div class="title tit_center">
                        <h2 class="h_tit">프로젝트</h2>
                        <p class="subTitleEng">resoft projects</p>
                    </div>
                    <div class="btn_wrap">
                        <!-- <a href="#" class="more"><span>more</span></a> -->
                    </div>
                </div>

                <div class="container_slide">
                    <div class="slick-track">

                        <div class="cont">
                            <p class="work-title">대구인문사회대학<br></p>
                            <img class="logo" src="./img/inmun_logo.png" alt="[WEB]">
                        </div>

                        <div class="cont">
                            <p class="work-title">제15회 달서 하프 비대면 마라톤대회<br></p>
                            <img class="logo" src="./img/달서구청.png" alt="[APP]">
                        </div>

                        <div class="cont">
                            <p class="work-title">제8회 한성백제 비대면 마라톤대회<br></p>
                            <img class="logo" src="./img/한성백제마라톤.png" alt="[APP]">
                        </div>

                        <div class="cont">
                            <p class="work-title">2020 대구 마스크 쓰GO 코로나 극복 레이스<br></p>
                            <img class="logo" src="./img/컬러풀대구로고.jpg" alt="[APP]">
                        </div>

                        <div class="cont">
                            <p class="work-title">송파구청 송파둘레길 비대면 걷기대회<br></p>
                            <img class="logo" src="./img/송파둘레길.png" alt="[APP]">
                        </div>

                    </div>
                </div>
            </div>
            <script type="text/javascript"
                src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
            <script src="index.js"></script>
            <script src="slick.js"></script>
        </article>

         <!-------------------------------------------------------------- ecoce ----------------------------------------------------------------->
        <article>
            <div class="cus_wrap">
                <img src="./img/에코스봇.png" alt="" class="ecoce-bot wow fadeInDown" data-wow-delay="0.3s">

                <img src="./img/환경부탄소중립기본법.png" alt="" class="ministry-Environ-img wow fadeInRight"
                    data-wow-delay="0.3s">

                <div class="ecoce-img-wrap">
                    <img src="./img/에코스모바일원.png" alt="" class="ecoce-img wow fadeInLeft" data-wow-delay="0.3s"
                        style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInLeft;">
                </div>

                <div class="eco-clean-earth wow fadeInRight" data-wow-delay="0.6s">
                    <p>
                        국내 최초<br>
                        '탄소중립 실천인증 플랫폼'
                    </p>
                    <p>ECO-Clean Earth</p>
                </div>
            </div>
        </article>

         <!-------------------------------------------------------------- icon ----------------------------------------------------------------->
        <article>
            <section>
                <div class="back-5">
                    <div class="back-5d">
                        <img src="./img/리소프트로고_big.png" class="wow fadeInDown sec5-image">
                    </div>
                </div>
        
                <div class="wraper">
                    <ul class="wraper-ul">
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="0.1s">
                            <div class="icon-image">
                                <img src="./img/대구광역시 건축사회.png" class="icon">                
                            </div>
                            <p class="icon-name">대구광역시 건축사회</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="0.2s">
                            <div class="icon-image">
                                <img src="./img/대구광역시.png" class="icon">                
                            </div>
                            <p class="icon-name">대구광역시</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="0.3s">
                            <div class="icon-image">
                                <img src="./img/매일신문.png" class="icon">                
                            </div>
                            <p class="icon-name">매일신문</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="0.4s">
                            <div class="icon-image">
                                <img src="./img/경북대학교.png" class="icon">                
                            </div>
                            <p class="icon-name">경북대학교</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="0.5s">
                            <div class="icon-image">
                                <img src="./img/대구MBC문화원.png" class="icon">                
                            </div>
                            <p class="icon-name">대구MBC문화원</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="0.6s">
                            <div class="icon-image">
                                <img src="./img/대구광역시 체육회.png" class="icon">                
                            </div>
                            <p class="icon-name">대구광역시 체육회</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="0.7s">
                            <div class="icon-image">
                                <img src="./img/대구가톨릭대학교.png" class="icon">                
                            </div>
                            <p class="icon-name">대구가톨릭대학교</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="0.8s">
                            <div class="icon-image">
                                <img src="./img/송파구청.png" class="icon">                
                            </div>
                            <p class="icon-name">송파구청</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="0.9s">
                            <div class="icon-image">
                                <img src="./img/국민의힘.png" class="icon">                
                            </div>
                            <p class="icon-name">국민의힘</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="1.8s">
                            <div class="icon-image">
                                <img src="./img/국제라이온스협회.png" class="icon">                
                            </div>
                            <p class="icon-name">국제라이온스협회</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="1.7s">
                            <div class="icon-image">
                                <img src="./img/한국전기공사협회.png" class="icon">                
                            </div>
                            <p class="icon-name">한국전기공사협회</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="1.6s">
                            <div class="icon-image">
                                <img src="./img/즐거운세상.png" class="icon">                
                            </div>
                            <p class="icon-name">(주)즐거운 세상</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="1.5s">
                            <div class="icon-image">
                                <img src="./img/해양대학교.png" class="icon">                
                            </div>
                            <p class="icon-name">한국해양대학교</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="1.4s">
                            <div class="icon-image">
                                <img src="./img/상공회의소.png" class="icon">                
                            </div>
                            <p class="icon-name">대구상공회의소</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="1.3s">
                            <div class="icon-image">
                                <img src="./img/대한건설협회.png" class="icon">                
                            </div>
                            <p class="icon-name">대한건설협회</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="1.2s">
                            <div class="icon-image">
                                <img src="./img/한국청년회의소.png" class="icon">                
                            </div>
                            <p class="icon-name">한국청년회의소</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="1.1s">
                            <div class="icon-image">
                                <img src="./img/계명대.png" class="icon">                
                            </div>
                            <p class="icon-name">계명대학교</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="1.0s">
                            <div class="icon-image">
                                <img src="./img/해양대학교.png" class="icon">                
                            </div>
                            <p class="icon-name">목포해양대학교</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="1.9s">
                            <div class="icon-image">
                                <img src="./img/대구공고.png" class="icon">                
                            </div>
                            <p class="icon-name">대구공업고등학교</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="2.0s">
                            <div class="icon-image">
                                <img src="./img/대경산업협회.png" class="icon">                
                            </div>
                            <p class="icon-name">대경ITC산업협회</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="2.1s">
                            <div class="icon-image">
                                <img src="./img/한국조리기능장협회.png" class="icon">                
                            </div>
                            <p class="icon-name">한국조리기능장협회</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="2.2s">
                            <div class="icon-image">
                                <img src="./img/여성기업인협회.png" class="icon">                
                            </div>
                            <p class="icon-name">IT여성기업인협회</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="2.3s">
                            <div class="icon-image">
                                <img src="./img/중소기업융합연합회.png" class="icon">                
                            </div>
                            <p class="icon-name">중소기업융합연합회</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="2.4s">
                            <div class="icon-image">
                                <img src="./img/대구신용보증재단.png" class="icon">                
                            </div>
                            <p class="icon-name">대구신용보증재단</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="2.5s">
                            <div class="icon-image">
                                <img src="./img/달서구청.png" class="icon">                
                            </div>
                            <p class="icon-name">달서구청</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="2.6s">
                            <div class="icon-image">
                                <img src="./img/대구디지털산업진흥회.png" class="icon">                
                            </div>
                            <p class="icon-name">대구디지털산업진흥원</p>
                        </li>
        
                        <li class="wow fadeInUp cu-list" data-wow-delay="2.7s">
                            <div class="icon-image">
                                <img src="./img/로타리클럽.png" class="icon">                
                            </div>
                            <p class="icon-name">국제로타리클럽</p>
                        </li>
        
                    </ul>
                    <button class="h-btn">
                        <i class="fa-solid fa-circle-plus"></i>
                    </button>
                </div>
            </section>
        </article>

         <!-------------------------------------------------------------- map ----------------------------------------------------------------->
        <article>
            <div class="map-wrap">
                <div id="map" class="kakaomap"></div>
                <script type="text/javascript"
                    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=78f4f36bf8cec7a4fe3231201a6f8b56"></script>
                <script>
                    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
                        mapOption = {
                            center: new kakao.maps.LatLng(35.87172918917555, 128.62486866975289), // 지도의 중심좌표
                            level: 3 // 지도의 확대 레벨
                        };
                    // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
                    var map = new kakao.maps.Map(mapContainer, mapOption);
                    var imageSrc = './img/지도마커.png', // 마커이미지의 주소입니다
                        imageSize = new kakao.maps.Size(220, 45), // 마커이미지의 크기입니다
                        imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
                    // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
                    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
                        markerPosition = new kakao.maps.LatLng(35.87172918917555, 128.62486866975289); // 마커가 표시될 위치입니다
                    // 마커를 생성합니다
                    var marker = new kakao.maps.Marker({
                        position: markerPosition,
                        image: markerImage // 마커이미지 설정
                    });
                    // 마커가 지도 위에 표시되도록 설정합니다
                    marker.setMap(map);
                </script>


                <div class="map-info-wrap">
                    <div class="map-info">
                        <p>TEL</p>
                        <p>(053)475-2110</p>
                    </div>
                    <div class="map-info">
                        <p>FAX</p>
                        <p>(0504)257-5966</p>
                    </div>
                    <div class="map-info">
                        <p>E-MAIL</p>
                        <p>call@resoft.kr</p>
                    </div>
                    <div class="map-info">
                        <p>ADDRESS</p>
                        <p>(41260)<br>대구광역시 동구 동대구로 465, 대구스케일업허브<br>(DASH) 713호<br>(주)리소프트</p>
                    </div>
                </div>
            </div>
        </article>
    </section>

     <!-------------------------------------------------------------- footer ----------------------------------------------------------------->
    <footer>
        <div id="wrapper">
            <div class="footer-logo">
                <img src="./img/푸터로고.png" alt="footer_logo">
            </div>
            <div class="footer_content">
                <p class="ex">주식회사 리소프트는 새로운 소프트웨어로 진화하여 여러분께 응답드리고자 노력하겠습니다.</p>
                <div class="elements">
                    <p>상호. (주)리소프트</p>
                    <p>대표이사. 오유나</p>
                    <p>사업자등록번호. 722-81-02219</p>
                    <p>개인정보책임자. 이현지</p>
                </div>
                <br />
                <p>주소. (41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호 (신천동 106)</p>
                <div class="elements">
                    <p>전화. (053) 475-2110</p>
                    <p>팩스. (0504) 257-5966</p>
                    <p>이메일. call@resoft.kr</p>
                </div>
                <br>
                <p>Copyright(c) RESOFT CO.LTD. All right reserved.</p>
            </div>
        </div>
    </footer>
</body>

</html>
  • 전체 css
@charset "utf-8";
@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, 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-family: 'Noto Sans KR', sans-serif;
    box-sizing: border-box;
    vertical-align: baseline;
    word-break: keep-all;
}

#wrapper {
    max-width: 1500px;
    margin: 0 auto;
}



/* *{box-sizing: boder-box;}
body{font-family:'NanumSquareRound'; position: relative; font-weight: 500;} */

@keyframes aniLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes aniRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

/****************************** TOP button ********************************/
.topBtn{
    position: fixed;
    z-index: 999;
    bottom: 7%;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.topBtn .move{
    border-radius: 50%;
    border: 2px solid #828282;
    background-color: white;
    cursor: pointer;
    margin-bottom: 5px;
}
.topBtn i{
    padding: 5px;
    font-size: 32px;
}
.topBtn p{
    font-weight: 500;
    font-size: 16px;
    color: #828282;
}


/****************************** Header ********************************/
header {
    display: inline-block;

    width: 100%;
    height: 830px;

    background-image: url(./img/헤더배경.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 100%;

    color: white;
}

.header {
    height: 100%;
}

.logo {
    padding-top: 2%;
}

.text-box {
    /* 요소를 자기 자신을 기준을 배치 */
    position: relative;
    height: 100%;
}

.hd-1 {
    /* 부모 요소를 기준으로 배치 */
    position: absolute;
    top: 27%;
    animation: aniLeft 3s;
}

.hd-1 p:first-child {
    font-size: 50px;
    font-weight: bolder;
    line-height: 120%;
}

.hd-1 p:last-child {
    margin-top: 30px;
    word-break: normal;
    width: 60%;
}

.hd-2 {
    position: absolute;
    top: 10%;
    right: 0;
    animation: aniRight 3s;
    animation-delay: 0.5s;
}

@media screen and (max-width: 1500px) {
    .hd-2 {
        right: 2%;
    }
}

@media screen and (max-width: 1217px) {
    .hd-1 p:last-child {
        width: 100%;
    }

    .hd-1 p span {
        display: block;
    }

    .hd-2 {
        top: 11%;
    }

    .hd-img {
        width: 580px;
    }
}

@media screen and (max-width: 940px) {
    header {
        height: 1000px;

        background-image: url(./img/헤더배경940.png);
    }

    .logo {
        height: 30px;
        margin-left: 15px;
    }

    .hd-1 {
        top: 48%;
        left: calc(50% - 210.5px);
    }

    .hd-1 p:first-child {
        font-size: 35px;
    }

    .hd-2 {
        left: 50%;
        right: 0;
        top: 3%;
        transform: translateX(-50%);
        width: 500px;
    }

    .hd-img {
        width: 100%;
    }
}

@media screen and (max-width: 640px) {
    .hd-2 {
        width: 400px;
    }
}

@media screen and (max-width: 430px) {
    .hd-2 {
        width: 300px;
    }
}

/************************************ 카드 *********************************/
a {
    text-decoration: none;
    color: #000;
}

.b_wrap {
    padding: 200px 0;
    overflow: hidden;
}

.b_wrap .busi_content_wrap {
    max-width: 1400px;
    margin: 0 auto;
}

.b_wrap .business_list {
    width: 100%;
    display: flex;
    list-style: none;
}

.b_wrap .business_list li a {
    display: block;
    position: relative;
    text-align: center;
    height: 100%;
    transition: .2s;
}

.b_wrap .business_list li a .title {
    font-size: 23px;
    margin: 10px 0;
    font-weight: 1000;
    color: #2e2e2e;
}

.back.flip-item {
    text-align: center;
    line-height: 30px;
    width: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
}

.user-wrap img {
    width: 100%;
    vertical-align: middle;
}

.app-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    text-align: center;
    color: #ffffff;

}



.subTitleEng {
    text-transform: none;
    text-align: center;
    color: #ee72d8;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 3px;
}

.b_wrap .business_list li a .img_wrap {
    position: relative;
    width: 100%;
    height: 185px
}

.b_wrap .business_list li a .img_wrap img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    text-align: center;
}

.b_wrap .busi_content_wrap .business_list .flip:first-child img {
    width: 140px;
}


.b_wrap .business_list .flip {
    box-sizing: border-box;
    cursor: pointer;
    width: calc(100% / 4 - 3%);
    height: 350px;
    position: relative;
    margin: 0 1.5%;
}

.b_wrap .business_list .flip .flip-item {

    backface-visibility: hidden;
    background: #f6f6f6;
    transition: 1s;
    width: 100%;
    height: 100%;
}

.b_wrap .business_list .flip .front {
    position: absolute;
    backface-visibility: hidden;
    transition: 1s;
    transform: rotateY(0deg);
}

.b_wrap .business_list .flip .front a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.b_wrap .business_list .flip .back {
    transform: rotateY(-180deg);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

}

.b_wrap .business_list .flip:hover .front {
    transform: rotateY(180deg);
}

.b_wrap .business_list .flip:hover .back {
    transform: rotateY(0deg);
}



/* 미디어쿼리  */



@media screen and (max-width: 940px) {


    .b_wrap {
        padding: 100px;
    }

    .b_wrap .business_list {
        flex-wrap: wrap;

    }

    .b_wrap .business_list .flip {
        width: calc(100% / 2 - 4%);
        margin: 2%;
    }

}

/* 태블릿 */

@media screen and (max-width: 768px) {

    .main {
        width: 100%;
        margin: 0px auto 0;
    }

    .b_wrap {
        max-width: 100%;
        margin: 0 auto;
        /* 중앙정렬  */
        height: auto;
        padding: 40px 0;
    }

    .b_wrap .busi_content_wrap {
        padding: 60px 20px;
    }




}


@media screen and (max-width: 640px) {

    .b_wrap .business_list .flip {
        height: 300px;
    }

    .b_wrap .business_list .flip {
        height: 250px;

    }

    .b_wrap .business_list li a .img_wrap {
        height: 125px;
    }

    .b_wrap .business_list li a .img_wrap img {
        width: 80px;
    }

    .b_wrap .busi_content_wrap .business_list .flip:first-child img {
        width: 135px;
    }

    .b_wrap .business_list li a .title {
        font-size: 22px;
    }

    .subTitleEng {
        font-size: 14px;
    }

}

/* 모바일 */

@media screen and (max-width: 480px) {

    .b_wrap .business_list li a .title {
        font-size: 21px;
    }

    .subTitleEng {
        font-size: 14px;
    }

    .b_wrap .business_list .flip {
        width: 100%;
        height: 250px;

    }

    .b_wrap .busi_content_wrap .flip:first-child li img {
        width: 130px !important;
        /* 나중에 설정한 값이 적용되지 않게 !important */
    }


}








/************************************ 슬라이드 *********************************/
.slide {
    vertical-align: baseline;
}

.slide button {
    outline: none;
}

.slide br {
    opacity: 0;
}

.slide .news_wrap {
    width: 100%;
    padding: 80px 0;
    background-color: #f8f8f8;
}

.slide .news_wrap .news_content_wrap {
    max-width: 1500px;
    margin: 0 auto;
    overflow: hidden;
}

.slide .tit_center {
    text-align: center;
    float: none;
}

.slide .title .h_tit {
    font-size: 42px;
    font-weight: 600;
    color: navy;
}

.slide .subTitleEng {
    text-transform: uppercase;
    text-align: center;
    color: #ee72d8;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 3px;
}

.slide h2 {
    font-size: 18px;
    color: #272626;
    font-weight: 600;
    padding: 20px 0px;
}

.slide .container_slide {
    max-width: 1400px;
    margin: 55px auto;

}

.slide p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.slide .wrap {
    width: 1440px;
    height: 400px;
    margin: 0 auto;
}

.slide .cont {
    width: 300px;
    height: 300px;
    display: inline-block;
    background-color: #fff;
    margin: 0 10px;
}

.slide .logo {
    margin: 0 auto;
    width: 80%;
    height: 40%;

    transition: all 0.2s linear;
}

.slide .logo:hover {
    transform: scale(1.2);
    box-shadow: 0;
}

.slide .work-title {
    height: 30%;
    font-size: 20px;
    color: #222;
    font-weight: 600;
    letter-spacing: -0.4px;
    line-height: 1.5;
    margin-left: 1rem;
    margin-right: 1rem;
}

.slide .cont p {
    word-break: keep-all;
}




/************************************ 에코 *********************************/
.cus_wrap {
    max-width: 1400px;
    height: 1100px;
    margin: 0 auto;
    display: block;
    margin-top: 60px;
    margin-bottom: 250px;
    position: relative;
    background-position: center;
}

.cus_wrap .ecoce-bot {
    position: absolute;
    top: 5%;
    right: 0;
    width: 740px;
}

.cus_wrap .ministry-Environ-img {
    position: absolute;
    right: 0;
    top: 290px;
    width: 350px;
}

.cus_wrap .ecoce-img-wrap {
    position: relative;
    height: 100%;
    top: 160px;
    width: 960px;
}

.cus_wrap .ecoce-img-wrap .ecoce-img {
    position: absolute;
    left: 0;
    width: 100%;
}

.cus_wrap .eco-clean-earth {
    position: absolute;
    right: 0;
    top: 830px;
    text-align: right;
    line-height: 45px;
    margin-top: 50px;
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.fadeInRight p {
    font-family: 'Noto Sans KR', sans-serif;
    text-align: right;
}

.fadeInRight p:first-child {
    font-size: 40px;
    font-weight: 600;
}

.fadeInRight p:last-child {
    font-size: 30px;
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@media screen and (max-width: 1500px) {
    .cus_wrap {
        height: 60vw
    }

    .cus_wrap .ecoce-bot {
        top: 5%;
        width: 53%;
        right: 2%;
    }

    .cus_wrap .ministry-Environ-img {
        top: 30%;
        width: 25%;
        right: 2%;
    }

    .cus_wrap .ecoce-img-wrap {
        top: 20%;
        width: 69%;
        left: 2%;
    }

    .cus_wrap .eco-clean-earth {
        top: 90%;
        right: 2%;
    }
}

@media screen and (max-width: 1217px) {
    .cus_wrap .eco-clean-earth p:first-child {
        font-size: 30px;
    }

    .cus_wrap .eco-clean-earth p:last-child {
        font-size: 25px;
    }
}

@media screen and (max-width: 940px) {
    .cus_wrap {
        height: auto;
        margin: 60px 2%;
    }

    .cus_wrap .ecoce-bot {
        width: 75%;
        position: unset;
    }

    .cus_wrap .ministry-Environ-img {
        display: none;
    }

    .cus_wrap .ecoce-img-wrap {
        width: 85%;
        height: auto;
        margin: 0 auto;
        margin-top: 65px;
        margin-bottom: 30px;
    }

    .cus_wrap .ecoce-img-wrap .ecoce-img {
        position: unset;
    }

    .cus_wrap .eco-clean-earth {
        margin: 0;
        position: unset;
    }
}

@media screen and (max-width: 640px) {
    .cus_wrap .eco-clean-earth {
        line-height: 35px;
    }

    .cus_wrap .eco-clean-earth p:first-child {
        font-size: 28px;
    }

    .cus_wrap .eco-clean-earth p:last-child {
        font-size: 22px;
    }

    .cus_wrap .ecoce-bot {
        width: 95%;
    }

    .cus_wrap .ecoce-img-wrap {
        margin-top: 40px;
    }
}



/************************************ 아이콘 *********************************/

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.cu-list{
    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: 16px;
    color: #A3A3A3;
    padding-top: 15px;
    word-break: break-all;
}

/****************** icon-button *********************/
section button.h-btn{
    background: transparent;
    cursor: pointer;
    border: none;
    display: none;
}
section button i{
    font-size: 70px;
    color: #04088a;
}

/*********************** icon-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.cu-list{
        width: calc(100% / 8);
        padding-left: 15px;
    }
    section div ul li div.icon-image{
        width: 10vw;
        height: 10vw;
    }
    section button.h-btn{
        display: initial;
    } 
}

@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.cu-list{
        width: calc(100% / 4);
    }
    section div ul li div.icon-image{
        width: 110px;
        height: 110px;
    }
    section button.h-btn{
        display: initial;
    }
}


/************************** 맵 *************************************/
.map-wrap {
    margin: 200px 200px;
    margin-left: 200px;
    display: flex;
    gap: 90px;
}

.kakaomap {
    width: 65%;
    height: 45vw;
    animation: aniLeft 3s;
}

.map-info-wrap {
    display: flex;
    gap: 35px;
    flex-direction: column;
    font-size: 18px;
    margin-top: 75px;
    animation: aniRight 3s;
    animation-delay: 0.5s;
}

.map-info>p:first-child {
    font-weight: 600;
    margin-bottom: 15px;
}

.map-info p:last-child {
    line-height: 25px;
}

.map-info p:last-child {
    color: #7b7b7b;
}

@media screen and (max-width: 1300px) {
    .map-wrap {
        gap: 50px;
        margin: 200px 50px;
    }

    .kakaomap {
        height: 585px;
    }

    .map-info-wrap {
        width: 40%;
    }
}

@media screen and (max-width: 1217px) {
    .kakaomap {
        height: 650px;
    }
}

@media screen and (max-width: 940px) {
    .map-wrap {
        gap: 50px;
    }
}

@media screen and (max-width: 640px) {
    .map-wrap {
        flex-direction: column-reverse;
        margin: 0;
        margin-bottom: 300px;
        align-items: center;
    }

    .kakaomap {
        width: 90%;
        height: 600px;
    }

    .map-info-wrap {
        flex-wrap: wrap;
        flex-direction: row;
        margin: 0;
        gap: 0;
        width: 90%;
    }

    .map-info {
        width: calc(100% / 2);
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 430px) {
    .map-info-wrap {
        flex-direction: column;
    }

    .map-info {
        width: 100%;
        margin-bottom: 23px;
    }
}






/********************************* 푸터 **************************************/
footer {
    display: inline-block;

    width: 100%;
    height: 400px;

    background-image: url(./img/footer2.png);
    background-repeat: no-repeat;
    background-size: cover;

    color: white;
}

.footer-logo,
.footer_content {
    margin: 0;
}

footer #wrapper {
    display: flex;
    padding: 80px 50px;
}

.ex {
    font-size: large;
}

.footer_content {
    padding: 0px 50px;
    font-size: medium;
}

.footer_content p {
    padding-bottom: 10px;
}

.elements {
    display: flex;
    flex-wrap: wrap;
}

.elements p {
    margin: 0;
    width: 50%;
}
  • js 아이콘

///////////////////////////// 1217px 아이콘 8개 /////////////////////////////
if (window.matchMedia("screen and (max-width: 1217px)").matches) {
    $(function () {
        $(".cu-list").hide();
        var array = [];
        var list = document.getElementsByClassName('cu-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('h-btn')[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);
        });
    });
}


////////////////////////////////  940px 아이콘 4개  ////////////////////////////////////
if (window.matchMedia("screen and (max-width: 940px)").matches) {
    $(function(){
        $(".cu-list").hide();
        var array = [];
        var list = document.getElementsByClassName('cu-list');
        for (var i=0; i<list.length; i++){
            array.push(list[i]);
        }
        var viziArray = [];
        viziArray = array.slice(0, 4);
        viziArray = viziArray.concat(array.slice(4, 8).reverse());
        viziArray = viziArray.concat(array.slice(8, 12));
        
        var third = 0;
        for(var i=0; i<viziArray.length; i++){
            third = third + 0.1;
            viziArray[i].setAttribute('data-wow-delay', third + 's')
            viziArray[i].style.display = 'block';
        }

        var load2 = document.getElementsByClassName('h-btn')[0];
        load2.addEventListener('click', function (e){
            e.preventDefault();
            var hiddenArray2 = [];
            hiddenArray2 = array.slice(12, 27);

            var hthird = 0;
            for(var i=0; i<hiddenArray2.length; i++){
                hthird = hthird + 0.1;
                hiddenArray2[i].setAttribute('data-wow-delay', hthird + 's')
                hiddenArray2[i].style.display = 'block';
            }
            load2.style.display = 'none';

            window.scrollTo(0, window.pageYOffset + 1);
            window.scrollTo(0, window.pageYOffset - 1);
        });
    });
}
function preventClick(e){
    e.preventDefault()
}
  • js slide
$(function () {
    $('.slick-track').slick({
        slide: 'div',
        slidesToShow: 4,
        slidesToScroll: 1,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: false,
        pauseOnHover: true,
        responsive: [
            {
                breakpoint: 431,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 950,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            }
        ]
    })
})

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

  • 각자 만든 부분들을 모아서 합치면서 문제가 많이 생길 줄 알았지만 자잘하게 조절해줄 부분을 제외하면 큰 문제는 없었던 것 같다.
  • 2주 동안 만든 부분은 사실상 프롤로그에 지나지 않았다, 한 달의 시간을 가지고 새롭게 만들어야 할 부분들은 생각보다 심적으로 큰 부담으로 다가왔다.

3. 해결방법

  • 똑같이 구현 할 수 있을지 모르겠지만 할 수 있는 선에선 최선을 다 할 생각이다.
  • 처음이라 그런지 모르겠지만 한 페이지 씩 맡아서 구현해야 한다는 부담감이 있는 것 같다.
  • 겁먹지 말고 차근차근히 대처하면 되겠지 싶지만 일단 오늘은 약간은 멘붕 상태인 것 같다.
  • 걱정이 된다. 내가 과연 여기서 일을 하고 돈을 벌면서 살 수 있을까? 이정도에도 부담을 가지며 흔들리는데 말그대로 야생인 현업에 뛰어들어서 과연 내가 잘 할 수 있을까라는 의문이 든다.

4. 학습소감

  • 내가 과연 이 직업군에서 살아갈 수 있을까?
profile
구성본
코딩공부중
이전 포스트

실습 10일 차

다음 포스트

실습 12일 차

0개의 댓글