차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_dropdowns [2021/03/31 10:32]
emblim98
+++ wiki:css:css_note:css_dropdowns [2023/01/13 18:44] (현재)
@@ 줄 68: / 줄 68: @@
 =====Dropdown Menu=====
 사용자가 목록에서 옵션을 선택하는 드롭다운 메뉴를 만듭니다.\\
-{{:wiki:css:css_note:dropdownmenu.png?600|}}\\
+{{:wiki:css:css_note:dropdownmenu.png?400|}}\\
 하기 예제는 드롭다운 박스 안에 링크를 추가하고 링크에 스타일을 설정하여 스타일링된 드롭다운 버튼에 알맞게 한다는 것 이외에는 이전 예제와 유사합니다.\\
 ====예제====
@@ 줄 130: / 줄 130: @@
 \\
 =====Right-aligned Dropdown Content=====
-{{:wiki:css:css_note:aligneddropdowncontent.png?600|}}\\
+{{:wiki:css:css_note:aligneddropdowncontent.png?400|}}\\
 드롭다운 메뉴를 왼쪽에서 오른쪽 대신, 오른쪽에서 왼쪽으로 이동하려면 ''%%right: 0;%%''를 추가합니다.\\
 ====예제====
@@ 줄 203: / 줄 203: @@
 =====Dropdown Image=====
 드롭다운 박스 안에 이미지와 다른 콘텐츠를 추가하는 방법\\
+{{:wiki:css:css_note:dropdownimage.png?400|}}\\
 ====예제====
 <HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #f9f9f9;
+            min-width: 160px;
+            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+            z-index: 1;
+        }
+        .dropdown:hover .dropdown-content {display: block;}
+        .desc {
+            padding: 15px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <h2>Dropdown Image</h2>
+    <p>Move the mouse over the image below to open the dropdown content.</p>
+    <div class="dropdown">
+        <img src="img_5terre.jpg" alt="Cinque Terre" style="width:100px; height:50px;">
+        <div class="dropdown-content">
+            <img src="img_5terre.jpg" alt="Cinque Terre" style="width:300px; height:200px;">
+            <div class="desc">Beautiful Cinque Terre</div>
+        </div>
+    </div>
+</body>
+</html>
 </HTML>
+\\
 =====Dropdown Navbar=====
 네비게이션 바 안에 드롭다운 메뉴를 추가하는 방법\\
+{{:wiki:css:css_note:dropdown-navbar.png?400|}}\\
 ====예제====
 <HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background-color: #333;
+        }
+        li {float: left;}
+        li a,
+        .dropbtn {
+            display: inline-block;
+            color: white;
+            text-align: center;
+            padding: 14px 16px;
+            text-decoration: none;
+        }
+        li a:hover, .dropdown:hover .dropbtn {background-color: red;}
+        li.dropdown {display: inline-block;}
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #f9f9f9;
+            min-width: 160px;
+            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+            z-index: 1;
+        }
+        .dropdown-content a {
+            color: black;
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+            text-align: left;
+        }
+        .dropdown-content a:hover {background-color: #f1f1f1;}
+        .dropdown:hover .dropdown-content {display: block;}
+    </style>
+</head>
+<body>
+    <ul>
+        <li><a href="#home">Home</a></li>
+        <li><a href="#news">News</a></li>
+        <li class="dropdown">
+            <a href="javascript:void(0)" class="#dropbtn">Dropdown</a>
+            <div class="dropdown-content">
+                <a href="#">Link 1</a>
+                <a href="#">Link 2</a>
+                <a href="#">Link 3</a>
+            </div>
+        </li>
+    </ul>
+    <h3>Dropdown Menu inside a navigation Bar</h3>
+    <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
+</body>
+</html>
 </HTML>
 {{tag>오션 CSS Dropdowns}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구