<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>드롭다운 메뉴 만들기</b></span></p><p> </p><p> </p><div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/nrd9xjHbIjE?si=636ilNR4slzWAZyj" 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/nrd9xjHbIjE?si=636ilNR4slzWAZyj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b> Javascript 41 [드롭다운 서브메뉴] 순수 자바스크립트 3단계 업그레이드</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>index_html<br><span data-ke-size="size18"><header> </span><br><span data-ke-size="size18"><nav> </span><br><span data-ke-size="size18"><ul class="clearfix"> </span><br><span data-ke-size="size18"><li>1st menu </span><br><span data-ke-size="size18"><ul> </span><br><span data-ke-size="size18"><li>2nd menu</li> </span><br><span data-ke-size="size18"><li>2nd menu</li> </span><br><span data-ke-size="size18"></ul> </span><br><span data-ke-size="size18"></li> </span><br><span data-ke-size="size18"><li>2nd menu </span><br><span data-ke-size="size18"><ul> </span><br><span data-ke-size="size18"><li>2nd menu menu</li> </span><br><span data-ke-size="size18"><li>2nd menu</li> </span><br><span data-ke-size="size18"><li>2nd menu</li> </span><br><span data-ke-size="size18"><li>2nd menu</li> </span><br><span data-ke-size="size18"></ul> </span><br><span data-ke-size="size18"></li> </span><br><span data-ke-size="size18"><li>3rd menu </span><br><span data-ke-size="size18"><ul> </span><br><span data-ke-size="size18"><li>2nd menu</li> </span><br><span data-ke-size="size18"><li>2nd menu</li> </span><br><span data-ke-size="size18"></ul> </span><br><span data-ke-size="size18"></li> </span><br><span data-ke-size="size18"><li>4th menu </span><br><span data-ke-size="size18"><ul> </span><br><span data-ke-size="size18"><li>2nd menu</li> </span><br><span data-ke-size="size18"><li>2nd menu</li> </span><br><span data-ke-size="size18"><li>2nd menu</li> </span><br><span data-ke-size="size18"></ul> </span><br><span data-ke-size="size18"></li> </span><br><br><span data-ke-size="size18"></ul> </span><br><span data-ke-size="size18"></nav> </span><br><span data-ke-size="size18"></header></span></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><span data-ke-size="size18">index_CSS5 tag</span></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><span data-ke-size="size18">* {margin:0; padding:0;} <br>ul li {list-style:none;} <br>.clearfix:after{content:'';display:block; clear:both;} <br>body {background:green; overflow-y:scroll;} <br>header { <br>margin-top:20px; <br>background:linear-gradient(white 50px, rgba(255,255,255,0.5) 50px, rgba(255,255,255,0.5) ); <br>height:50px;  <br>overflow:hidden; <br>} <br><br>nav {width:960px; margin:0 auto;} <br>nav > ul > li {float:left; line-height:50px; margin-right:40px; position: relative;} <br>nav > ul > li ul{ width:100%; display: none; position: absolute;} <br>nav > ul > li ul li{white-space:nowrap;}</span></b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><span data-ke-size="size18"> index_html&CSS5_시작<br><style> <br>* {margin:0; padding:0;} <br>ul li {list-style:none;} <br>.clearfix:after{content:'';display:block; clear:both;} <br>body {background:green; overflow-y:scroll;} <br>header { <br>margin-top:20px; <br>background:linear-gradient(white 50px, rgba(255,255,255,0.5) 50px, rgba(255,255,255,0.5) ); <br>height:50px;  <br>overflow:hidden; <br>} <br><br>nav {width:960px; margin:0 auto;} <br>nav > ul > li {float:left; line-height:50px; margin-right:40px; position: relative;} <br>nav > ul > li ul{ width:100%; display: none; position: absolute;} <br>nav > ul > li ul li{white-space:nowrap;} <br><br><br></style> <br><br><header> <br><nav> <br><ul class="clearfix"> <br><li>1st menu <br><ul> <br><li>2nd menu</li> <br><li>2nd menu</li> <br></ul> <br></li> <br><li>2nd menu <br><ul> <br><li>2nd menu menu</li> <br><li>2nd menu</li> <br><li>2nd menu</li> <br><li>2nd menu</li> <br></ul> <br></li> <br><li>3rd menu <br><ul> <br><li>2nd menu</li> <br><li>2nd menu</li> <br></ul> <br></li> <br><li>4th menu <br><ul> <br><li>2nd menu</li> <br><li>2nd menu</li> <br><li>2nd menu</li> <br></ul> <br></li> <br><br></ul> <br></nav> <br></header></span></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><span data-ke-size="size18"> <span data-ke-size="size18">index_html&CSS5_완성</span><br></span></b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';"><b>index_html tag</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>밴드: 네이버 밴드</b></span></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><!DOCTYPE html> 스핀제공</span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><html></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><head></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><tiyle></title></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"></head></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><body></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><! -- partial: index.partial.html --></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><header></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">       <nav></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">               <ul class="clearfix mainmenu"></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                     <li>lst menu</span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                               <ul class="submenu"></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                                     <li>2nd menu</li> </span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                                     <li>2nd menu</li></span> </span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                               </ul></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                    </li></span></b><b></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                   <li>lst menu</span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                               <ul class="submenu"></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                                      <li>2nd mernu menu</li></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                                      <li>2nd menu</li> </span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                                      <li>2nd menu</li> </span></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                                      <li>2nd menu</li></span> </span> </span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">                               </ul></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"></header></span> </span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"></body></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"></html></span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">네이버 밴드:</span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">HTML tag</span></b></p><p> </p><p> </p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZZhx/8f78a504b00953da424ba7a1d5498234e27acf74" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZZhx/8f78a504b00953da424ba7a1d5498234e27acf74" data-origin-width="600" data-origin-height="800"></div><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>HTML tag</b></span></p>
<!-- -->
]]>
첫댓글 https://codepen.io/alikerock/pen/gZoqYw
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default