6일차 - 로고 SVG 파일 (4) 총 코드

HTML

    <header id="hd" class="rel">
        <div class="container d-flex justify-content-between align-items-center">
            <h1><a href="#none"  class="d-block">
                <img src="./img/logo.svg" alt="" class="d-block">
                <img src="./img/logo_w.svg" alt="" class="d-block">
                </a>
            </h1>
            <ul id="gnb" class="d-flex">
                <li class="rel">
                    <a href="#none" class="d1">회사소개</a>
                    <ul class="abs d2">
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">찾아오시는길</a></li>
                    </ul>
                </li>
                <li class="rel">
                    <a href="#none" class="d1">견적</a>
                    <ul class="abs d2">
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                    </ul>
                </li>
                <li class="rel">
                    <a href="#none" class="d1">대메뉴</a>
                    <ul class="abs d2">
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                    </ul>
                </li>
                <li class="rel">
                    <a href="#none" class="d1">대메뉴</a>
                    <ul class="abs d2">
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>

CSS
reset cdn + 공통 클래스

<style>
    /* rest cdn */
    *{ margin: 0; padding: 0; }
    a{ color: black; text-decoration: none;}
    li{ list-style: none; }

    /* common *//* 절대 쓰면 안되는 공통클래스! 공용 */
    .container { max-width: 1280px; margin: 0 auto;}

    .rel{ position: relative;}
    .abs{ position: absolute; }    
    .fixed{ position: fixed; }

    .d-flex{ display: flex; } 
    .d-block{ display: block; }
    .justify-content-between{ justify-content: space-between; }
    .align-items-center{ align-items: center; }

    .text-center{ text-align: center; }
    .text-left{ text-align: left; }
    .text-right{ text-align: right; }
  </style>

CSS 스타일

<style>
    #hd{ background-color: black; padding: 1rem 0;}                                  
    #hd h1 img{ height: calc(100% - 1rem); }

    #hd h1 img:nth-child(2),
    #hd h1:hover img:nth-child(1) { display:none; }

    #hd h1:hover img:nth-child(2),
    #hd h1 img:nth-child(1) {display:block; }

    #gnb a{ display: block; }
    #gnb .d1{ 
        color:white;
        font-size: 2em; 
        padding: 1rem 1.5rem;
    } 
    /* ----- 소메뉴 hover ----- */
    #gnb .d2{
        background-color: yellow;
        font-size: 1.2rem;
        padding: 0 1.5rem;
        line-height: 2;
        left: 0;
        right: 0;
        height: 0;
        overflow: hidden;
        transition: 0.5s;
    }
    
    /* 소메뉴 갯수마다 창 높이 다르게 열리기 */
    /* li 높이(2.4rem) * 5 (소메뉴 갯수) + 3 (padding-top 1.5rem + padding-bottom 1.5rem) */
    
    /* #gnb li:hover .d2{ height: 160px; } */

    #gnb li:nth-child(1):hover .d2{
        height: calc( 2.4rem * 5 + 3rem );
    }

    #gnb li:nth-child(2):hover .d2{
        height: calc( 2.4rem * 2 + 3rem );
    }

    #gnb li:nth-child(3):hover .d2{
        height: calc( 2.4rem * 5 + 3rem );
    }

    #gnb li:nth-child(4):hover .d2{
        height: calc( 2.4rem * 3 + 3rem );
    }

    /* #gnb:hover .d2{ height: calc( 2.4rem * 5 + 3rem ); } */

    #gnb li:hover .d1 { color: yellow; } /* 예쁘게 대메뉴에 색넣기 */

    /* -----------위아래 여백 주기--------------- */

    #gnb .d2 li:first-child{ padding-top: 1.5rem; }
    #gnb .d2 li:last-child{ padding-bottom: 1.5rem; }
    /* li 높이(2.4rem) * 5 (소메뉴 갯수) + 3 (padding-top 1.5rem + padding-bottom 1.5rem) */
</style>