c22. CSS 드롭다운

CSS 드롭다운

드롭다운 매뉴

마우스를 버튼위로 올리면, 드롭다운 메뉴가 나타납니다.

첫째 날 둘째 날 세째 날 마지막 날

여행 잘 다녀오세요.

드롭다운 박스는 사용자가 어떤 태그에 마우스를 올리면 나타나는 글이나 그림 상자 입니다.

---

먼저 마우스가 올라갈 버튼 태그 (<button>)를 하나를 만들고, 또 마우스가 올라갔을 때 보여질 내용물 컨테이너 태그 (<div>) 를 하나 만듭니다. 
<button class="db">여행 일정표</button>
<div class="dd-content">...</div>

---

드롭다운 되는 내용들을 CSS 속성으로 정확하게 위치시키기 위해, <div> 태그로 이 태그 들을 감쌉니다.
<div class="dd">
<button class="db">여행 일정표</button>
<div class="dd-content">
<a href="#">첫째 날</a>
...
</div>
</div>

---

CSS 코딩에서 .dd 클래스에서 position:relative; 속성을 줍니다. 이 속성은 드롭다운 내용이, 드롭다운 버튼 바로 아래 위치 시키기 위해 필요합니다.

반면 드롭다운 버튼에서는 position:absolute; 를 주어서, 버튼 밑에 드롭다운 내용이 오도록 할 것입니다.

dd-content 클래스는 실제 드롭다운될 내용을 가지고 있습니다. 기본값으로 숨겨져 (hidden) 있고, 마우스가 올라가면 (hover) 표시될 것입니다.

최소 폭 (min-width) 은 160px 로 설정하였는데 바꾸어 쓰면 됩니다.

테두리 (border) 대신에, CSS3 박스-그림자 속성 (box-shadow property) 을 사용하여 드롭다운 메뉴가 "카드"처럼 보이게 하였습니다.

:hover 선택자 (selector) 는 (사용자의 마우스가 드롭다운 버튼 위로 올라갔을 때) 드롭다운 메뉴가 보이도록 합니다.
.dd:hover .dd-content {
display: block;
}

---

드롭다운 박스 내에 링크를 추가하고, 드롭다운 버튼에 맞게 스타일을 부여합니다.

.dd-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; border-bottom:1px solid #bbb; }

---

<style>
.db {
background-color: Fuchsia;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dd {
position: relative;
display: inline-block;
}

.dd-content {
display: none;
position: absolute;
background-color: AliceBlue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dd-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom:1px solid #bbb;
}

.dd-content a:last-child {border-bottom: none;}

.dd-content a:hover {background-color: Gold;}

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

.dd:hover .db {
background-color: Gold;
}
</style>
<h2>드롭다운 매뉴</h2>
<p>마우스를 버튼위로 올리면, 드롭다운 메뉴가 나타납니다.</p>

<div class="dd">
<button class="db">여행 일정표</button>
<div class="dd-content">
<a href="#">첫째 날</a>
<a href="#">둘째 날</a>
<a href="#">세째 날</a>
<a href="#">마지막 날</a>
</div>
</div>

<p>여행 잘 다녀오세요.</p>

---

[광고] Udemy 동영상 강의로 보기