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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_dropdowns
wiki:css:css_note:css_dropdowns

차이

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

차이 보기로 링크

다음 판 		이전 판
wiki:css:css_note:css_dropdowns [2021/03/31 09:03]
emblim98 만듦 		wiki:css:css_note:css_dropdowns [2023/01/13 18:44] (현재)
줄 13: 줄 13:
 ====예제==== ====예제====
 <HTML> <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);
 +            padding: 12px 16px;
 +            z-index: 1;
 +        }
 +
 +        .dropdown:hover .dropdown-content {display: block;}
 +    </style>
 +</head>
 +<body>
 +    <h2>Hoverable Dropdown</h2>
 +    <p>Move the mouse over the text below to open the dropdown content.</p>
 +    <div class="dropdown">
 +        <span>Mouse over me</span>
 +        <div class="dropdown-content">
 +            <p>Hello World!</p>
 +        </div>
 +    </div>
 +</body>
 +</html>
 </HTML>  </HTML> 
 +\\
 +====예제 설명====
 +**%%HTML)%%** 예를 들어 %%<span>%% 또는 %%<button>%% 요소와 같은 임의의 요소를 사용하여 드롭다운 콘텐츠를 엽니다.\\
 +\\
 +%%<div>%% 같은 컨테이너 요소를 사용하여 드롭다운 콘텐츠를 만들고, 그 안에 원하는 내용을 추가합니다.\\
 +\\
 +CSS를 사용하여 드롭다운 콘텐츠를 올바르게 배치하려면 %%<div>%% 요소로 요소 주위를 감쌉니다(wrap).\\
 +\\
 +**%%CSS)%%** ''%%.dropdown%%'' 클래스는 ''%%position : relative%%''를 사용하는데, 드롭다운 콘텐츠를 드롭다운 버튼(''%%position:absolute%%'' 사용) 바로 아래에 배치하려는 경우 필요합니다.\\
 +\\
 +''%%.dropdown-content%%'' 클래스는 실제 드롭다운 콘텐츠를 보유합니다. 기본적으로 숨겨져 있으며 마우스 오버 시 표시됩니다(아래 참조).\\ 
 +''%%min-width%%''는 160px로 설정되어 있습니다. 이것을 자유롭게 변경하십시오.\\ 
 +**Tip:** 드롭다운 콘텐츠의 너비를 드롭다운 버튼만큼 넓게 하려면, ''%%width%%''를 100%로 설정합니다.\\
 +그리고 작은 화면에서 스크롤을 활성화 하도록 ''%%overflow : auto%%''으로 설정합니다.\\
 +\\
 +보더를 사용하는 대신, CSS ''%%box-shadow%%'' 속성을 사용하여 드롭다운 메뉴를 "카드"처럼 보이게 했습니다.\\
 +\\
 +''%%:hover%%'' 셀렉터는 사용자가 드롭다운 버튼 위로 마우스를 이동할 때 드롭다운 메뉴를 표시하는 데 사용됩니다.\\
 +\\
 +=====Dropdown Menu=====
 +사용자가 목록에서 옵션을 선택하는 드롭다운 메뉴를 만듭니다.\\
 +{{:wiki:css:css_note:dropdownmenu.png?400|}}\\
 +하기 예제는 드롭다운 박스 안에 링크를 추가하고 링크에 스타일을 설정하여 스타일링된 드롭다운 버튼에 알맞게 한다는 것 이외에는 이전 예제와 유사합니다.\\
 +====예제====
 +<HTML>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +    <style>
 +        .dropbtn {
 +            background-color: #4caf50;
 +            color: white;
 +            padding: 16px;
 +            font-size: 16px;
 +            border: none;
 +            cursor: pointer;
 +        }
 +
 +        .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-content a {
 +            color: dodgerblue;
 +            padding: 12px 16px;
 +            text-decoration: none;
 +            display: block;
 +        }
 +
 +        .dropdown-content a:hover {background-color: #f1f1f1;}
 +
 +        .dropdown:hover .dropdown-content {display: block;}
 +
 +        .dropdown:hover .dropbtn {background-color: violet;}
 +    </style>
 +</head>
 +<body>
 +    <h2>Dropdown Menu</h2>
 +    <p>Move the mouse over the button to open the dropdown menu.</p>
 +    <div class="dropdown">
 +        <button class="dropbtn">Dropdown</button>
 +        <div class="dropdown-content">
 +            <a href="">Link 1</a>
 +            <a href="">Link 2</a>
 +            <a href="">Link 3</a>
 +        </div>
 +    </div>
 +    <p><strong>Note:</strong>We use href="#" for test links. In a real web site this would be URLs</p>
 +</body>
 +</html>
 +</HTML> 
 +\\
 +=====Right-aligned Dropdown Content=====
 +{{:wiki:css:css_note:aligneddropdowncontent.png?400|}}\\
 +드롭다운 메뉴를 왼쪽에서 오른쪽 대신, 오른쪽에서 왼쪽으로 이동하려면 ''%%right: 0;%%''를 추가합니다.\\
 +====예제====
 +<HTML>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +    <style>
 +        .dropbtn {
 +            background-color: #4caf50;
 +            color: white;
 +            padding: 16px;
 +            font-size: 16px;
 +            border: none;
 +            cursor: pointer;
 +        }
 +
 +        .dropdown {
 +            position: relative;
 +            display: inline-block;
 +        }
 +
 +        .dropdown-content {
 +            display: none;
 +            position: absolute;
 +            right: 0;
 +            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;
 +        }
 +
 +        .dropdown-content a:hover {background-color: #f1f1f1;}
 +
 +        .dropdown:hover .dropdown-content {display: block;}
 +
 +        .dropdown:hover .dropbtn {background-color: #3e8e41;}
 +    </style>
 +</head>
 +<body>
 +    <h2>Aligned Dropdown Content</h2>
 +    <p>
 +        Determine whether the dropdown content should go from left to right or right to left with the left and right properties.
 +    </p>
 +    <div class="dropdown" style="float:left;">
 +        <button class="dropbtn">Left</button>
 +        <div class="dropdown-content" style="left:0;">
 +            <a href="">Link 1</a>
 +            <a href="">Link 2</a>
 +            <a href="">Link 3</a>
 +        </div>
 +    </div>
 +    <div class="dropdown" style="float:right;">
 +        <button class="dropbtn">Right</button>
 +        <div class="dropdown-content">
 +            <a href="">Link 1</a>
 +            <a href="">Link 2</a>
 +            <a href="">Link 3</a>
 +        </div>
 +    </div>
 +</body>
 +</html>
 +</HTML>
 +======More Examples======
 +=====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}} {{tag>오션 CSS Dropdowns}}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_dropdowns.1617149034.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki