CSS - 드롭다운: 초보자 가이드

안녕하세요, 미래의 웹 디자이너 여러분! 오늘은 CSS 드롭다운의 fascinante 세계로 함께 뛰어보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해드리는 것을 기대하고 있습니다. 코드를 한 줄도 적어보지 않았다면 걱정하지 마세요 - 우리는 기본에서 시작하여 차근차근 올라갈 것입니다. 그러니 커피(또는 차, 당신이 좋아하는 것이라면)를 한 잔 마시고 시작해보세요!

CSS 드롭다운이란?

코드로 들어가기 전에 드롭다운이 무엇인지 이해해보겠습니다. 고급 레스토랑에서 웨이터가 메뉴를 내주는 상상해보세요. 하지만 이 메뉴는 보통 메뉴가 아닙니다 - 마법의 메뉴입니다! "어필러"를 터치하면 맛있는 시작 메뉴가 나타납니다. 웹사이트에서 드롭다운이 하는 일은 이와 같습니다. 마우스나 터치로 상호작용할 때 더 많은 옵션을 보여주는 메뉴입니다.

이제 CSS로 이 마법을 만들어보겠습니다!

CSS 드롭다운 - 기본 예제

먼저 간단한 드롭다운 메뉴를 만들어보겠습니다. 다음은 HTML과 CSS 코드입니다:

<div class="dropdown">
<button class="dropbtn">드롭다운</button>
<div class="dropdown-content">
<a href="#">링크 1</a>
<a href="#">링크 2</a>
<a href="#">링크 3</a>
</div>
</div>

.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: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

이를 차례대로 설명하겠습니다:

1. 전체 드롭다운을 위한 컨테이너 (<div class="dropdown">)를 만듭니다.
2. 내부에는 드롭다운을 트리거할 버튼 (<button class="dropbtn">)가 있습니다.
3. 실제 드롭다운 콘텐츠는 다른 div (<div class="dropdown-content">)에 있습니다.
4. CSS를 사용하여 드롭다운 콘텐츠를 기본적으로 숨깁니다 (display: none;).
5. 드롭다운 컨테이너에 마우스를 올리면 콘텐츠를 표시합니다 (display: block;).

CSS 드롭다운 - 호버 효과

이제 기본 드롭다운을 가지고 더 멋지게 만들어보겠습니다. 호버 효과를 추가해보겠습니다:

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

이 CSS는 버튼의 색상을 호버할 때 변경합니다. 버튼이 "헤이, 더 많은 옵션을 보여드릴 준비가 되었어요!"라고 말하는 것 같습니다!

CSS 드롭다운 - 클릭된 드롭다운

때로는 드롭다운이 호버보다는 클릭할 때 나타나기를 원할 때가 있습니다. 이를 JavaScript로 어떻게 할 수 있는지 보겠습니다:

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">드롭다운</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">링크 1</a>
<a href="#">링크 2</a>
<a href="#">링크 3</a>
</div>
</div>

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

.show {display:block;}

이 스크립트는 버튼을 클릭할 때 'show' 클래스를 켜고 끄고, 페이지의 다른 부분을 클릭할 때 드롭다운을 닫습니다.

CSS 드롭다운 - 오른쪽 정렬 메뉴

드롭다운을 왼쪽이 아니라 오른쪽에 정렬하고 싶다면? 쉽습니다!

.dropdown-content {
right: 0;
}

이를 기존 CSS에 추가하면 됩니다. 드롭다운이 "오른쪽으로 이동해 주세요!"라고 말하는 것 같습니다!

CSS 드롭다운 - 왼쪽 정렬 메뉴

완전성을 위해서 왼쪽 정렬 메뉴를 명확히 만들어보겠습니다(기본적으로 왼쪽 정렬이 되지만):

.dropdown-content {
left: 0;
}

CSS 드롭다운 - 이미지 포함

드롭다운에 이미지를 추가하여 더 흥미롭게 만들어보겠습니다:

<div class="dropdown">
<button class="dropbtn">드롭다운</button>
<div class="dropdown-content">
<a href="#"><img src="img_5terre.jpg" alt="Cinque Terre" width="100"></a>
<a href="#">링크 1</a>
<a href="#">링크 2</a>
</div>
</div>

.dropdown-content img {
margin: 10px 0;
}

이제 드롭다운에 아름다운 이미지가 표시됩니다. CSS 사ند이에 체리를 추가하는 것 같습니다!

CSS 드롭다운 - 네비게이션 바와 함께

마지막으로, 드롭다운을 네비게이션 바에 통합하는 방법을 보겠습니다:

<ul class="navbar">
<li><a href="#">홈</a></li>
<li><a href="#">뉴스</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">드롭다운</a>
<div class="dropdown-content">
<a href="#">링크 1</a>
<a href="#">링크 2</a>
<a href="#">링크 3</a>
</div>
</li>
</ul>

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.navbar .dropdown {
display: inline-block;
}

이제 완전 기능을 갖춘 네비게이션 바에 드롭다운 메뉴가 있습니다.

결론

축하합니다! 여러분은 다양한 유형의 CSS 드롭다운을 배웠습니다. 연습이 완벽을 만든다는 것을 기억하세요, 그러니 이 예제들을 실험해보지 마세요. 색상을 변경하거나 애니메이션을 추가하거나, 다른 유형의 드롭다운을 하나의 페이지에 결합해보세요.

여기 우리가 다루었던 방법의 빠른 참고 표입니다:

방법	설명
기본 드롭다운	호버할 때 나타나는 간단한 드롭다운
호버 효과	호버할 때 색상이 변경되는 드롭다운
클릭된 드롭다운	클릭할 때 나타나는 드롭다운
오른쪽 정렬 메뉴	오른쪽에 정렬된 드롭다운
왼쪽 정렬 메뉴	왼쪽에 정렬된 드롭다운 (기본)
이미지 포함	이미지가 포함된 드롭다운
네비게이션 바와 함께	네비게이션 바에 통합된 드롭다운

웹 디자인의 세계에서 창의성은 여러분의 최고의 친구입니다. 그러니 창의적으로 만들어보세요! 웹 네비게이션의 다음 큰 발견을 발명할지도 모릅니다. 행복하게 코딩하세요!

Credits: Image by storyset