드롭다운
드롭다운(dropdown) 효과
해당 요소에 마우스를 올려서 다른 요소나 텍스트가 나타나게 하는 효과를 드롭다운(dropdown) 효과라고 합니다.
CSS를 이용하면 이러한 드롭다운 효과를 간단히 설정할 수 있습니다.
다음 예제는 display 속성을 이용하여 드롭다운 효과를 구현하는 예제입니다.
예제
<style>
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
display: none;
position: absolute;
background-color: #F9F9F9;
min-width: 160px;
padding: 8px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content { display: block; }
</style>
위의 예제에서 사용자가 마우스를 올리면 나타날 <div>요소의 display 속성값을 none으로 설정합니다.
이렇게 설정하면 처음에는 눈에 보이지 않게 됩니다.
하지만 특정 요소에 마우스를 올리면 해당 <div>요소의 display 속성값이 블록(block)으로 변경됩니다.
따라서 이때에는 이 <div>요소가 눈에 보이게 됩니다.
위의 예제에서 사용된 inline-block 속성값에 대한 더 자세한 사항은 CSS 디스플레이 수업에서 확인할 수 있습니다.
드롭다운(Dropdown) 메뉴
메뉴에 마우스를 올리면 하위 메뉴가 나타나게 하는 메뉴를 드롭다운(dropdown) 메뉴라고 합니다.
드롭다운 효과를 이용하면 이러한 드롭다운 메뉴도 간단히 구현할 수 있습니다.
예제
<style>
.dropdown-button { background-color: #FFDAB9; padding: 8px; font-size: 15px; border: none; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
display: none;
position: absolute;
background-color: #FFDAB9;
min-width: 70px;
padding: 8px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a { color: black; padding: 8px; text-decoration: none; display: block; }
.dropdown-content a:hover { background-color: #CD853F; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropdown-button { background-color: #CD853F; }
</style>
위의 예제에서도 앞선 예제와 마찬가지로 해당 요소의 display 속성을 이용하여 드롭다운 메뉴를 구현하고 있습니다.
