8/10 개발일지

정명환·2022년 8월 10일
0

대구 ai 스쿨

목록 보기
72/79

1. 학습한 내용

지도 부분 미디어쿼리

메뉴바 미디어쿼리 작성

메인 페이지 메뉴바

<!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>Resoft</title>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <link rel="stylesheet" href="reset.css">
    <script src="https://code.jquery.com/jquery-latest.js"></script>       
    <link rel="stylesheet" href="./animate.css">
    <link rel="stylesheet" href="./magic.css">
    <script src="./wow.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap" rel="stylesheet">
    <style>
/* 바디 */
html body{    
    margin:0 auto;
    font-family:'Noto Sans KR'; 
}
/* 네비바 */
header a {text-decoration: none; cursor: pointer; }
header .logo {position: fixed; left: 30px; top: 25px; z-index: 100; margin-left: 11%; height: 30px;}
header >div >a  {position:fixed; display: flex; right: 12%; top:25px; width: 50px; z-index: 100; }
header #gon {position: fixed; left: 0; top: 0; padding: 0px 232px 0px 5px; width: 100%; box-sizing: border-box; height: 80px; background: transparent; z-index: 10; border-bottom: 1px solid #fff;}
header #gon #main-nav {padding-top: 5px; padding-bottom: 5px; text-align: end; padding-right: 7%;}
header #gon nav + div {position:absolute; left: 0; top:80px; width: 100%;height: 296px; background: rgba(24, 75, 159, .9); transition: all 0.5s; z-index: -1;}
header #gon nav > ul >li {display: inline-block; position: relative; font-weight: 700; font-size: 20px;}
header #gon nav > ul > li > a{display: block; position:relative; width:160px; height: 70px; font-size: 20px; color: #fff; line-height: 70px; text-decoration: none; top: 0px; z-index: 10; text-align: center; }
header .active nav > ul > li > a:after {content: ""; position: absolute; bottom: 10px; left: 40px; width: 0; height: 6px; background: #184B9F; transition: all 0.5s; border-radius: 20px;}
header .active nav > ul > li:hover > a:after{ width: 50%;}
header #gon nav > ul > li:hover > a{ color: #184B9F; transition: .5s;}
header .active nav > ul > li:hover > a{ color: #184B9F !important; transition: .5s;}
header #gon nav > ul ul {padding-top: 30px; position: absolute; width: 100%; text-align: left; height: 230px; transition: all 0.5s; padding-left: 40px; font-size: 18px; font-weight: 400;}
header #gon nav > ul ul li{line-height: 2; padding-left: 0px; }
header #gon nav > ul ul a {font-size: 20px; color: white; z-index: 10;}
header .active nav > ul ul a:hover {color: #DBDBDB !important;}
header #gon nav > ul ul a:hover :after {left: 0; width: 100%; }
header .active {
     background: #fff !important;
     border-bottom: 1px solid #DBDBDB !important;
}
header .active nav > ul > li > a{  color: #000 !important;}
.close{opacity: 0; display: none;}
header #gon nav > ul > li .menu{ display:none;}
.more{opacity: 1;}
.won{max-width: 1440px;
margin: 0 auto;}
.wall{
        height: 5000px;
        width: 100%;
        background-color: burlywood;
    }



    @media screen and (max-width: 1024px){
        header #gon{padding: 0 5%;}
        header #gon #main-nav{text-align: center; display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: baseline;align-content: stretch;}
        header #gon nav > ul > li .dpdl{opacity: 0; width: 100px; pointer-events : none; transition: .5s;}
        header #gon nav > ul > li .menu{ display:block; color: white; border-bottom: 1px solid white; line-height: 2;}
        header #gon nav > ul ul >a{text-align: center; }
        header #gon nav > ul ul a{ font-size: 17px;}
        header #gon nav > ul ul{width: 83px; padding-left:6vw ; text-align: center;}
    }
    @media screen and (max-width: 768px){
    header .logo {position: fixed; left: -15px; top: 15px; z-index: 100; margin-left: 11%; height: 20px;}
    header >div >a  {position:fixed; display: flex; right: 1%; top:15px; width: 50px; z-index: 100; height: 20px;}
    header #gon nav > ul ul >a{height: 60px; }
    header #gon {height: 50px;}
    header #gon nav + div{top: 50px; height: 230px;}
    header #gon nav > ul ul{padding-top: 0;}
    header #gon nav > ul ul a{ font-size: 13px;}
    header #gon nav > ul > li > a{height: 55px;}
    }

    </style>
</head>
<body>
    <header id="header">
        <div class="won">
        <a class="logo" href="./index.html"><img src="./img/toco-common/logo-Resoft-white.png" alt="로고"></a>
        <div id="gon">
        <nav>
            <ul id="main-nav">
                <li><a class="dpdl" href="./Company2/Company2.html">회사소개</a>
                    <ul class="so close">
                        <li><a class="menu" href="./Company2/Company2.html">회사소개</a></li>
                        <li><a href="./Company2/Company2.html">REsoft소개</a></li>
                        <li><a href="./Company2/Company2.html">연혁</a></li>
                        <li><a href="./Company2/Company2.html#organ">조직도</a></li>
                        <li><a href="./Company2/Company2.html#certi">특허&인증</a></li>
                        <li><a href="./Company2/Company2.html#direc">오시는 길</a></li>
                    </ul>
            </li>
                 <li><a class="dpdl" href="./Business/business.html">사업현황</a>
                  
                <ul class="so close">
                    <li><a class="menu" href="./Business/business.html">사업현황</a></li>
                    <li><a href="./Business/business.html#content-ecoce">ECOCE</a></li>
                    <li><a href="./Business/business.html#content-moado">moaDo</a></li>
                    <li><a href="./Business/business.html#content-etc">Etc</a></li>
                </ul>
            </li>
                 <li><a class="dpdl" href="./Yard/yard.html">정보마당</a>
                    
                <ul class="so close">
                    <li><a class="menu" href="./Yard/yard.html">정보마당</a></li>
                    <li><a href="./yard-news/yard-news.html">REsoft소식</a></li>
                </ul>
                </li>
            </ul>
        </nav>  
        <div class="so close"></div>
    </div>
         <a class="ham"><img src="./img/toco-img1/icon-menu.svg" alt="" ></a>        
        </div>
    </header>   
    <div class="wall"></div>
    <script>
    $(window).on('scroll',function(){
        if($(window).scrollTop()){
            $('#gon').addClass('active');
            const logo = document.querySelector('.logo img');
            logo.src = "./img/toco-common/logo-Resoft.svg"
            const ham = document.querySelector('.ham img');
            ham.src = "./img/toco-common/company_N_busines_N_yard-menu.svg"
            $("#gon").css('transition',".5s");
        }else{
            if($('.so').hasClass('close')){
                $('#gon').removeClass('active');
                const logo = document.querySelector('.logo img');
                logo.src = "./img/toco-common/logo-Resoft-white.png"
                const ham = document.querySelector('.ham img');
                ham.src = "./img/toco-img1/icon-menu.svg"
            }
        }
    });

 $(document).ready(function(){
    //  네비바 햄버거
    $('.ham').click(function() {
        if($('.so').hasClass('more')){
    $('.so').addClass('magictime fadeOut');
    setTimeout(function() { $('.so').addClass('close').removeClass('more');}, 500);
    if($(window).scrollTop()==0){
    $('#gon').removeClass('active');
                const logo = document.querySelector('.logo img');
                logo.src = "./img/toco-common/logo-Resoft-white.png"
                const ham = document.querySelector('.ham img');
                ham.src = "./img/toco-img1/icon-menu.svg"}
        }
    else if($('.so').hasClass('close')){
    $('.so').removeClass('magictime fadeOut');
    $('.so').addClass('magictime fadeIn');
    $('.so').addClass('more').removeClass('close');
    $('#gon').addClass('active');
            const logo = document.querySelector('.logo img');
            logo.src = "./img/toco-common/logo-Resoft.svg"
            const ham = document.querySelector('.ham img');
            ham.src = "./img/toco-common/company_N_busines_N_yard-menu.svg"
            $("#gon").css('transition',".5s");
    }
    });
    });
    </script>
</body>
</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>Resoft</title>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <link rel="stylesheet" href="reset.css">
    <script src="https://code.jquery.com/jquery-latest.js"></script>       
    <link rel="stylesheet" href="./animate.css">
    <link rel="stylesheet" href="./magic.css">
    <script src="./wow.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap" rel="stylesheet">
    <style>
/* 바디 */
html body{    
    margin:0 auto;
    font-family:'Noto Sans KR'; 
}
/* 네비바 */
header a {text-decoration: none; cursor: pointer; }
header .logo {position: fixed; left: 30px; top: 25px; z-index: 100; margin-left: 11%; height: 30px;}
header >div >a  {position:fixed; display: flex; right: 12%; top:25px; width: 50px; z-index: 100; }
header #gon {position: fixed; left: 0; top: 0; padding: 0px 232px 0px 5px; width: 100%; box-sizing: border-box; height: 80px; background: #fff; z-index: 10; border-bottom: 1px solid #DBDBDB;}
header #gon #main-nav {padding-top: 5px; padding-bottom: 5px; text-align: end; padding-right: 7%;}
header #gon nav + div {position:absolute; left: 0; top:80px; width: 100%;height: 296px; background: rgba(24, 75, 159, .9); transition: all 0.5s; z-index: -1;}
header #gon nav > ul >li {display: inline-block; position: relative; font-weight: bold; font-size: 20px;}
header #gon nav > ul > li > a{display: block; position:relative; width:160px; height: 70px; font-size: 20px; color: #000; line-height: 70px; text-decoration: none; top: 0px; z-index: 10; text-align: center; }
header #gon nav > ul > li > a:after {content: ""; position: absolute; bottom: 10px; left: 40px; width: 0; height: 6px; background: #184B9F; transition: all 0.5s; border-radius: 20px; }
header #gon nav > ul > li:hover > a:after{ width: 50%;}
header #gon nav > ul > li:hover > a{ color: #184B9F;}
header #gon nav > ul ul {padding-top: 30px; position: absolute; width: 100%; text-align: left; height: 230px; transition: all 0.5s; padding-left: 40px; font-size: 18px; font-weight: 400;}
header #gon nav > ul ul li{line-height: 2; padding-left: 0px; }
header #gon nav > ul ul a {font-size: 20px; color: white; z-index: 10;}
header #gon nav > ul ul a:hover :after {left: 0; width: 100%; }
.close{opacity: 0; display: none;}
header #gon nav > ul > li .menu{ display:none;}
.more{opacity: 1;}
.won{max-width: 1440px;
margin: 0 auto;}
.wall{
        height: 5000px;
        width: 100%;
        background-color: burlywood;
    }



    @media screen and (max-width: 1024px){
        header #gon{padding: 0 5%;}
        header #gon #main-nav{text-align: center; display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: baseline;align-content: stretch;}
        header #gon nav > ul > li .dpdl{opacity: 0; width: 100px; pointer-events : none;}
        header #gon nav > ul > li .menu{ display:block; color: white; border-bottom: 1px solid white; line-height: 2;}
        header #gon nav > ul ul >a{text-align: center; }
        header #gon nav > ul ul a{ font-size: 17px;}
        header #gon nav > ul ul{width: 83px; padding-left:6vw ; text-align: center;}
    }
    @media screen and (max-width: 768px){
        header .logo {position: fixed; left: -15px; top: 15px; z-index: 100; margin-left: 11%; height: 20px;}
    header >div >a  {position:fixed; display: flex; right: 1%; top:15px; width: 50px; z-index: 100; height: 20px;}
    header #gon nav > ul ul >a{height: 60px; }
    header #gon {height: 50px;}
    header #gon nav + div{top: 50px; height: 230px;}
    header #gon nav > ul ul{padding-top: 0;}
    header #gon nav > ul ul a{ font-size: 13px;}
    header #gon nav > ul > li > a{height: 55px;}
    }

    </style>
</head>
<body>
    <header id="header">
        <div class="won">
        <a class="logo" href="../index.html"><img src="../img/toco-common/logo-Resoft.svg" alt="로고"></a>
        <div id="gon">
        <nav>
            <ul id="main-nav">
                <li><a class="dpdl" href="../Company2/Company2.html">회사소개</a>
                    <ul class="so close">
                        <li><a class="menu" href="../Company2/Company2.html">회사소개</a></li>
                        <li><a href="../Company2/Company2.html">REsoft소개</a></li>
                        <li><a href="../Company2/Company2.html">연혁</a></li>
                        <li><a href="../Company2/Company2.html#organ">조직도</a></li>
                        <li><a href="../Company2/Company2.html#certi">특허&인증</a></li>
                        <li><a href="../Company2/Company2.html#direc">오시는 길</a></li>
                    </ul>
            </li>
                <li><a class="dpdl" href="../Business/business.html">사업현황</a>
                  
                <ul class="so close">
                    <li><a class="menu" href="../Business/business.html">사업현황</a></li>
                    <li><a href="../Business/business.html#content-ecoce">ECOCE</a></li>
                    <li><a href="../Business/business.html#content-moado">moaDo</a></li>
                    <li><a href="../Business/business.html#content-etc">Etc</a></li>
                </ul>
            </li>
                    <li><a class="dpdl" href="../Yard/yard.html">정보마당</a>
                    
                <ul class="so close">
                    <li><a class="menu" href="../Yard/yard.html">정보마당</a></li>
                    <li><a href="../yard-news/yard-news.html">REsoft소식</a></li>
                </ul>
                </li>
            </ul>
        </nav>  
        <div class="so close"></div>
    </div>
         <a class="ham"><img src="./img/toco-common/company_N_busines_N_yard-menu.svg" alt="" ></a>        
        </div>
    </header>   
    <div class="wall"></div>
    <script>
 $(document).ready(function(){
    //  네비바 햄버거
    $('.ham').click(function() {
        if($('.so').hasClass('more'))
    $('.so').addClass('magictime fadeOut');
    else if($('.so').hasClass('close'))
    $('.so').removeClass('magictime fadeOut');
    });
    // 
    $('.ham').click(function(){
        if($('.so').hasClass('close')){
            $('.so').addClass('magictime fadeIn');
            $('.so').addClass('more').removeClass('close');
        }else if($('.so').hasClass('more')){
            setTimeout(function() { $('.so').addClass('close').removeClass('more');}, 500);
        }
    });
});
    </script>
</body>
</html>

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

x

3. 해결방법

x

4. 학습소감

마무리작업으로 들어가니 세부적인 것을 다듬을수록 시간이 오래 걸리는 것 같습니다. 한가지를 붙잡고 하다가 일을 못 끝낼 수도 있겠다고 생각이 들었습니다.

profile
정명환
JAMIHs
이전 포스트

8/9 개발일지

다음 포스트

8/11 개발일지

0개의 댓글