..

Search

35) 드롭다운

드롭다운


드롭다운(dropdown) 효과

해당 요소에 마우스를 올려서 다른 요소나 텍스트가 나타나게 하는 효과를 드롭다운(dropdown) 효과라고 합니다.

CSS를 이용하면 이러한 드롭다운 효과를 간단히 설정할 수 있습니다.

 

다음 예제는 display 속성을 이용하여 드롭다운 효과를 구현하는 예제입니다.

예제

<style>

    .dropdownposition: relativedisplay: 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 디스플레이 수업에서 확인할 수 있습니다.

 

CSS 디스플레이 수업 확인 =>


드롭다운(Dropdown) 메뉴

메뉴에 마우스를 올리면 하위 메뉴가 나타나게 하는 메뉴를 드롭다운(dropdown) 메뉴라고 합니다.

드롭다운 효과를 이용하면 이러한 드롭다운 메뉴도 간단히 구현할 수 있습니다.

예제

<style>

    .dropdown-button { background-color: #FFDAB9; padding: 8px; font-size: 15px; border: none; }

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


연습문제