자격증공부/웹디자인 기능사

웹디자인 기능사 레이아웃 유형 정리(메뉴유형2개)

아라라_ 2023. 4. 30. 05:00

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

Frederick Philips Brooks
Mythical Man-Month 저자
728x90

웹디자인 기능사를 시험 보기 위해서는 메뉴도 구현을 해야합니다 메뉴의 유형에는 3가지가 있는데 그중 2가지를 구현하고자 합니다.

메뉴유형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>M1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            width: 1200px;
            margin: 0 auto;
        }
        #header {
            height: 100px;
            display: flex;
        }
        #header h1{
            width: 20%;
            height: inherit;
            background-color: #B6B6B6;
        }
        #header h2{
            width: 80%;
            height: inherit;
            background-color: #9B9B9B;
        }
        #slider {
            width: 100%;
            height: 300px;
            background-color: #ff5858;
        }
        #main {
            width: 100%;
            height: 200px;
            background-color: #ffc5c5;
            display: flex;
        }
        .m1 {
            width: 33.333%;
            background-color: #ffdfdf;
        }
        .m2 {
            width: 33.333%;
            background-color: #ffb6b6;
        }
        .m3 {
            width: 33.333%;
            background-color: #f6ffa0;
        }
        #footer {
            width: 100%;
            height: 100px;
            background-color: #FFB0B0;
            display: flex;
        }
        #footer .f1 {
            width: 20%;
            background-color: #ffb6b6;
        }
        #footer .f2 {
            width: 80%;
            background-color: #ff6e6e;
        }
        #footer .f3 {
            width: 20%;
            background-color: #ffedef;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        li {
            list-style: none;
        }
        .nav {
            width: 80%;
            background-color: #ccc;
            padding: 30px 40px;
        }
        .nav > ul {
            display: flex;
            justify-content: right;
        }
        .nav > ul > li {
            position: relative;
        }
        .nav > ul > li > a {
            background-color: #F3D5D5;
            display: block;
            padding: 10px 40px;
        }
        .nav > ul > li > a:hover {
            background-color: #A36060;
        }
        .nav > ul > li > ul {
            position: absolute;
            left: 0;
            top: 40px;
            background-color: #ccc;
            width: 100%;
            display: none;
        }
        .nav > ul > li > ul > li > a {
            padding: 10px;
            display: block;
        }
        .nav > ul > li > ul > li > a:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">
            <h1></h1>
            <nav class="nav">
                <ul>
                    <li>
                        <a href="#">메뉴1</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴1-1</a></li>
                            <li><a href="#">서브메뉴1-2</a></li>
                            <li><a href="#">서브메뉴1-3</a></li>
                            <li><a href="#">서브메뉴1-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴2</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴2-1</a></li>
                            <li><a href="#">서브메뉴2-2</a></li>
                            <li><a href="#">서브메뉴2-3</a></li>
                            <li><a href="#">서브메뉴2-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴3</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴3-1</a></li>
                            <li><a href="#">서브메뉴3-2</a></li>
                            <li><a href="#">서브메뉴3-3</a></li>
                            <li><a href="#">서브메뉴3-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴4</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴4-1</a></li>
                            <li><a href="#">서브메뉴4-2</a></li>
                            <li><a href="#">서브메뉴4-3</a></li>
                            <li><a href="#">서브메뉴4-4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <article id="slider"></article>
        <main id="main">
            <div class="m1"></div>
            <div class="m2"></div>
            <div class="m3"></div>
        </main>
        <footer id="footer">
            <div class="f1"></div>
            <div class="f2"></div>
            <div class="f3"></div>
        </footer>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // $(".nav >  ul > li").mouseover(function(){
        //     $(this).find(".submenu").stop().slideDown();
        // });
        // $(".nav >  ul > li").mouseout(function(){
        //     $(this).find(".submenu").stop().slideUp();
        // });
        // $(".nav >  ul > li").mouseover(function(){
        //     $(".nav >  ul > li").find(".submenu").stop().slideDown();
        // });
        // $(".nav >  ul > li").mouseout(function(){
        //     $(".nav >  ul > li").find(".submenu").stop().slideUp();
        // });

         // 메뉴1
        document.querySelectorAll(".nav > ul > li").forEach(li => {
            li.addEventListener("mouseover", () => {
                li.querySelector("ul").style.display = "block";
            });
            li.addEventListener("mouseout", () => {
                li.querySelector("ul").style.display = "none";
            });
        });

       
    </script>
</body>
</html>

메뉴유형2

<!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>M2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            width: 1200px;
            margin: 0 auto;
        }
        #header {
            height: 100px;
            display: flex;
        }
        #header h1{
            width: 20%;
            height: inherit;
            background-color: #ffa1a1;
        }
        #header h2{
            width: 80%;
            height: inherit;
            background-color: #ffa0a0;
        }
        #nav {
            width: 100%;
            height: 300px;
            background-color: #ff5858;
        }
        #main {
            width: 100%;
            height: 200px;
            background-color: #ffc5c5;
            display: flex;
        }
        .m1 {
            width: 33.333%;
            background-color: #ffdfdf;
        }
        .m2 {
            width: 33.333%;
            background-color: #ffb6b6;
        }
        .m3 {
            width: 33.333%;
            background-color: #f6ffa0;
        }
        #footer {
            width: 100%;
            height: 100px;
            background-color: #FFB0B0;
            display: flex;
        }
        #footer .f1 {
            width: 20%;
            background-color: #ffb6b6;
        }
        #footer .f2 {
            width: 80%;
            background-color: #ff6e6e;
        }
        #footer .f3 {
            width: 20%;
            background-color: #ffedef;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        li {
            list-style: none;
        }
        .nav {
            width: 80%;
            background-color: #fff1f1;
            padding: 30px 40px;
        }
        .nav > ul {
            display: flex;
            justify-content: right;
        }
        .nav > ul > li {
            position: relative;
        }
        .nav > ul > li > a {
            background-color: #F3D5D5;
            display: block;
            padding: 10px 40px;
        }
        .nav > ul > li > a:hover {
            background-color: #ff9696;
        }
        .nav > ul > li > ul {
            position: absolute;
            left: 0;
            top: 40px;
            background-color: #ccc;
            width: 100%;
            display: none;
        }
        .nav > ul > li > ul > li > a {
            padding: 10px;
            display: block;
        }
        .nav > ul > li > ul > li > a:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">
            <h1></h1>
            <nav class="nav">
                <ul>
                    <li>
                        <a href="#">메뉴1</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴1-1</a></li>
                            <li><a href="#">서브메뉴1-2</a></li>
                            <li><a href="#">서브메뉴1-3</a></li>
                            <li><a href="#">서브메뉴1-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴2</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴2-1</a></li>
                            <li><a href="#">서브메뉴2-2</a></li>
                            <li><a href="#">서브메뉴2-3</a></li>
                            <li><a href="#">서브메뉴2-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴3</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴3-1</a></li>
                            <li><a href="#">서브메뉴3-2</a></li>
                            <li><a href="#">서브메뉴3-3</a></li>
                            <li><a href="#">서브메뉴3-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴4</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴4-1</a></li>
                            <li><a href="#">서브메뉴4-2</a></li>
                            <li><a href="#">서브메뉴4-3</a></li>
                            <li><a href="#">서브메뉴4-4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <nav id="nav"></nav>
        <main id="main">
            <div class="m1"></div>
            <div class="m2"></div>
            <div class="m3"></div>
        </main>
        <footer id="footer">
            <div class="f1"></div>
            <div class="f2"></div>
            <div class="f3"></div>
        </footer>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // $(".nav >  ul > li").mouseover(function(){
        //     $(this).find(".submenu").stop().slideDown();
        // });
        // $(".nav >  ul > li").mouseout(function(){
        //     $(this).find(".submenu").stop().slideUp();
        // });
        // $(".nav >  ul > li").mouseover(function(){
        //     $(".nav >  ul > li").find(".submenu").stop().slideDown();
        // });
        // $(".nav >  ul > li").mouseout(function(){
        //     $(".nav >  ul > li").find(".submenu").stop().slideUp();
        // });

        //  // 메뉴1
        // document.querySelectorAll(".nav > ul > li").forEach(li => {
        //     li.addEventListener("mouseover", () => {
        //         li.querySelector("ul").style.display = "block";
        //     });
        //     li.addEventListener("mouseout", () => {
        //         li.querySelector("ul").style.display = "none";
        //     });
        // });

        //메뉴2
        document.querySelectorAll(".nav > ul > li").forEach(li => {
            li.addEventListener("mouseover", () => {
                // document.querySelector(".nav > ul > li > ul").style.display = "block";
                document.querySelectorAll(".nav > ul > li > ul").forEach(e => {
                    e.style.display = "block";
                });
            });
            li.addEventListener("mouseout", () => {
                document.querySelectorAll(".nav > ul > li > ul").forEach(e => {
                    e.style.display = "none";
                });
            });

        });
    </script>
</body>
</html>

 

 

 

 

'자격증공부/웹디자인 기능사'의 다른글

  • 현재글웹디자인 기능사 레이아웃 유형 정리(메뉴유형2개)

관련글

댓글

티스토리툴바