CSS 입문 | CSS 고급 | 드롭다운(dropdown) 효과

Tags:

드롭다운(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>요소가 눈에 보이게 된다.

드롭다운(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 속성을 이용하여 드롭다운 메뉴를 구현하고 있다.




최종 수정 : 2021-08-27