7/14 개발일지

정명환·2022년 7월 14일

대구 ai 스쿨

목록 보기

55/79

1)학습한 내용

다음주부터 구현할 팀프로젝트의 드롭다운 메뉴바를 구현하여 보았습니다.
원래는 hover 시가 아니라 오른쪽 상단의 버튼으로 클릭으로 작동하는데 아직 구현을 하지 못하였습니다.

<!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="style.css">
    <link rel="stylesheet" href="reset.css">
    <style>
        header a {text-decoration: none; }
        header h1 {position: absolute; left: 30px; top: 20px; z-index: 5; margin-left: 20%;}
        header > h2 {position:absolute; display: flex; right: 14%; top:28px; width: 70px; z-index: 5;}
        header #gon {position: absolute; left: 0; top: 0; padding: 0 232px 15px; width: 100%; box-sizing: border-box; border-bottom: 1px solid white;  z-index: 10;}
        header #gon nav > ul {text-align: center; overflow: hidden;}
        header #gon nav > ul:hover{overflow: visible;}
        header #gon nav + div {position:absolute; left: 0; top:87px; width: 100%;height: 200px; background: rgba(24, 75, 159, .7); opacity: 0; transition: all 0.5s; z-index: -1;}
        header #gon nav:hover + div{opacity: 1;}
        header #gon nav > ul:hover ul{opacity: 1;}
        header #gon nav > ul >li {display: inline-block; position: relative;}
        header #gon nav > ul > li > a{display: block; position:relative;  width:160px; height: 70px; font-size: 20px; color: white; line-height: 70px; text-decoration: none; top: 8px; z-index: 10;}
        header #gon nav > ul > li > a:after {content: ""; position: absolute; left: 5px; bottom: 0px; width: 0; height: 9px; background: #184B9F; transition: all 0.5s;}
        header #gon nav > ul > li:hover > a:after{left: 0; width: 100%;}
        header #gon nav > ul ul {padding: 22px 0 0 0; position: absolute; width: 100%; text-align: center; opacity: 0; height: 230px; transition: all 0.5s;}
        header #gon nav > ul ul li{line-height: 25px; }
        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%;}
        header .visual img{width: 100%; filter: opacity(0.5) drop-shadow(0 0 0 black);}
        header > h2 img{height: 30px;}
        #main-nav {padding-left: 50%;}
   </style>
</head>
<body>
    <header id="header">
        <h1><a href="/"><img src="./images/리소프트로고.png" alt="로고"></a></h1>
        <div id="gon">
        <nav>
            <ul id="main-nav">
                <li><a href="">회사소개</a>
                    <ul class="so">
                        <li><a href="">REsoft소개</a></li>
                        <li><a href="">연혁</a></li>
                        <li><a href="">조직도</a></li>
                        <li><a href="">특허&인증</a></li>
                        <li><a href="">오시는 길</a></li>
                    </ul>
            </li>
                <li><a href="">사업현황</a>
                <ul class="so">
                    <li><a href="">ECOCE</a></li>
                    <li><a href="">moaDo</a></li>
                    <li><a href="">Etc</a></li>
                </ul>
            </li>
                <li><a href="">정보마당</a>
                <ul class="so">
                    <li><a href="">REsoft소식</a></li>
                </ul>
                </li>
            </ul>
        </nav>  
        <div></div>
    </div>
        <h2><a href="/" ><img src="./images/구성 요소 23 – 1.svg" alt=""></a></h2>
        <div class="visual"><img src="./images/사각형 46.png" alt=""></div>
    </header>

</body>
</html>