CSS로 만들 수 있는 간단한 드롭다운 메뉴 - 기본 드롭다운 메뉴 디자인

DevMaster!! 2024. 8. 10. 23:07

2024. 8. 10. 23:07

드롭다운 메뉴는 웹사이트에서 중요한 탐색 기능을 제공합니다. 사용자가 마우스를 올리거나 클릭했을 때 하위 메뉴가 나타나는 구조로, 많은 양의 메뉴를 깔끔하게 정리하는 데 유용합니다. 이 글에서는 CSS만을 사용해 간단한 드롭다운 메뉴를 만드는 방법을 소개하겠습니다.

기본 드롭다운 메뉴 디자인

드롭다운 메뉴를 구성하려면 HTML과 CSS를 사용하여 메뉴의 구조와 스타일을 정의해야 합니다. 먼저 HTML로 메뉴의 구조를 만들고, CSS로 드롭다운 기능과 스타일링을 적용하는 방식입니다.

1. HTML 구조

아래는 기본적인 드롭다운 메뉴의 HTML 구조입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>드롭다운 메뉴 예제</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <ul class="menu">
            <li class="menu-item"><a href="#">Home</a></li>
            <li class="menu-item dropdown">
                <a href="#">Services</a>
                <ul class="dropdown-content">
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">SEO</a></li>
                    <li><a href="#">Consulting</a></li>
                </ul>
            </li>
            <li class="menu-item"><a href="#">About</a></li>
            <li class="menu-item"><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

설명:

nav 태그는 내비게이션 메뉴를 감싸는 요소입니다.
ul.menu는 전체 메뉴 목록을 나타냅니다.
li.menu-item은 각각의 메뉴 항목을 나타내며, dropdown 클래스를 가진 항목이 드롭다운 메뉴를 포함합니다.
ul.dropdown-content는 드롭다운 메뉴의 하위 목록을 나타냅니다.

2. CSS 스타일링

아래는 드롭다운 메뉴에 적용할 CSS 스타일입니다.

/* 기본 메뉴 스타일 */
.navbar {
    background-color: #333;
    overflow: hidden;
}

.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu-item {
    position: relative;
}

.menu-item a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

.menu-item a:hover {
    background-color: #575757;
}

/* 드롭다운 메뉴 스타일 */
.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;
    text-align: left;
}

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

/* 드롭다운 메뉴 표시 */
.menu-item:hover .dropdown-content {
    display: block;
}

설명:

.navbar: 내비게이션 바의 배경색을 지정하고, 콘텐츠가 넘칠 경우 숨기도록 설정합니다.
.menu: 메뉴 항목을 가로로 배치하기 위해 display: flex;를 사용합니다.
.menu-item a: 각 메뉴 항목에 기본 스타일(배경색, 텍스트 색상, 패딩)을 적용합니다.
.menu-item a:hover: 사용자가 마우스를 올렸을 때 메뉴 항목의 배경색이 변하도록 설정합니다.
.dropdown-content: 드롭다운 메뉴의 스타일을 설정합니다. 기본적으로 display: none;으로 숨겨져 있으며, position: absolute;로 부모 요소에 대해 배치됩니다.
.dropdown-content a: 드롭다운 항목에 스타일을 적용하며, 마우스를 올렸을 때 배경색이 변하도록 설정합니다.
.menu-item:hover .dropdown-content: 사용자가 menu-item에 마우스를 올렸을 때, 드롭다운 메뉴가 보이도록 설정합니다.

결과

위의 HTML과 CSS를 사용하면 다음과 같은 드롭다운 메뉴가 생성됩니다:

"Home", "About", "Contact"는 일반 메뉴 항목입니다.
"Services"는 드롭다운 메뉴를 가지고 있으며, 사용자가 이 메뉴에 마우스를 올리면 "Web Design", "SEO", "Consulting" 항목이 아래로 나타납니다.

결론

CSS만을 사용해 드롭다운 메뉴를 만드는 것은 간단하면서도 강력한 웹 디자인 기술입니다. 이 글에서 소개한 기본적인 드롭다운 메뉴 디자인을 바탕으로, 여러분의 웹사이트에 맞는 다양한 스타일을 실험해볼 수 있습니다. 드롭다운 메뉴는 사용자에게 명확하고 직관적인 탐색 경험을 제공하는 데 중요한 역할을 하므로, 적절한 스타일링과 기능을 추가하여 사용자 친화적인 웹사이트를 만들어보세요.

'CSS' 카테고리의 다른 글

CSS로 테이블 스타일링 - 테이블의 셀, 헤더, 보더 등을 꾸미는 방법 (0)	2024.08.10
CSS로 카드를 디자인하는 방법 - 카드 레이아웃과 그림자 효과 적용 (0)	2024.08.10
CSS3 새로운 기능 소개 - 최신 CSS 기능과 지원 브라우저 설명 (0)	2024.08.10
CSS Z-index 속성 이해하기 - 요소의 쌓임 순서 제어 (0)	2024.08.10
CSS에서 사용하는 가상 클래스와 가상 요소 - :hover, :before, :after의 활용법 (0)	2024.08.10

CodeCrafted