<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/8x1mO1d6-4w?si=X3L40TXN5CoaBqLM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/8x1mO1d6-4w?si=X3L40TXN5CoaBqLM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>html  CSS 및 HTML을 사용하여 드롭다운 탐색 메뉴를 만드는 방법</b></span></p><p><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  <head></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8" /></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta http-equiv="X-UA-Compatible" content="IE=edge" /></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0" /></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Responsive Personal Portfolio Website Design | Codehal</title></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- box icons --></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link href="<a href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" target="_top" class="ke-link">https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css</a>" rel="stylesheet" /></b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- custom css --></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="css/style.css" /></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <style></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    @import‎‎ url("<a href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" target="_top" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap</a>");</b></span></p><p><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            font-family:poppins; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background: url("<a href="https://i.postimg.cc/zfn5wLYT/2.jpg" target="_blank" class="ke-link">https://i.postimg.cc/zfn5wLYT/2.jpg</a>"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            -webkit-background-size: cover; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background-size: cover; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background-position: center center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background-repeat: no-repeat; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            height: 100vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        a{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            font-size: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            text-transform: uppercase; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background: #262626; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area:after{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            content: ''; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            clear: both; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area ul{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            list-style: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area > ul > li{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            float: left; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area ul li a{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            padding: 15px 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area ul li:hover a{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background: #34495e; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area ul ul{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            min-width: 160px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            top: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            left: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area ul li:hover > ul{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area ul ul li:hover a{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background: #262626; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area ul ul li{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area ul ul ul{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            top: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            left: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        .nav-area ul ul ul li:hover a{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            background: #34495e; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        } </b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></style> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><nav class="nav-area"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li><a href="#">home</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li><a href="#">About</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li><a href="#">Services</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li><a href="#">Web Design</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li><a href="#">Web Development</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li><a href="#">Email Marketing</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li><a href="#">Graphics Design</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        <ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            <li><a href="#">Logo Design</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            <li><a href="#">Card Design</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            <li><a href="#">Poster Design</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            <li><a href="#">Template Design</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                <ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                    <li><a href="#">Web Template</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                    <li><a href="#">Email Template</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                    <li><a href="#">News Template</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                    <li><a href="#">Bio Template</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                    <li><a href="#">Wedding Template</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                                </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            </li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                            <li><a href="#">Brochure Design</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                        </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li><a href="#">SEO</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li><a href="#">Portfolio</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li><a href="#">Contact</a></li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </ul> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </nav> </b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> html</b></span></p>
<!-- -->
]]>
