정구리의 우주정복

[HTML,CSS] 드롭다운 메뉴 만들기 본문

STUDY/K-DIGITAL

[HTML,CSS] 드롭다운 메뉴 만들기

Jungry_ 2022. 8. 7. 22:32
반응형

기본화면
마우스 hover 시 dropdown 되는 모습

 

*실제 a 태그에 href 값을 넣지 않아 동작하지 않습니다 공부용으로 봐주세요*

 

HTML

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./quiz02.css">
</head>

<body>
    <div class="dropdown">
        <button class="dropdown-btn">Real Estate Type</button>
        <div class="dropdown-submenu">
            <a href="#none">All</a>
            <a href="#none">One room</a>
            <a href="#none">1.5 rooms</a>
            <a href="#none">Two rooms</a>
            <a href="#none">Three rooms</a>
            <a href="#none">Officetel</a>
            <a href="#none">Apartment</a>
        </div>
    </div>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

body {
    /* 색 줄높이를 미리 잡고 시작한다 */
    font-family: 'Noto Sans KR', sans-serif;
    color : #222;
    line-height: 1.5em;
}
/* 보통 바디태그에 주고나서 a태그에 색상을 주는게 기본이다!!! (상속이 안되니까 별도로) */
a {
    color : #222;
    text-decoration: none;
}

.dropdown {
    /* 보더를 통해서 틀을 봐주는게 좋다 ! */
    /* border: 1px solid #000; */
    /* width: 200px; */
    display: inline-block;
}
.dropdown-btn {
    width: 200px;
    /* 패딩으로 크기 늘려주기 */
    padding : 10px;
    font-size: 18px;
    background-color: yellowgreen;
    color : #fff;
    border: none;
    cursor: pointer;
}

.dropdown-submenu{
    /* border: 1px solid #000; */
    width:200px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.192);
    display: none;
}

.dropdown-submenu a {
    display: block;
    padding: 7px;
    text-align: center;
}

.dropdown-submenu a:hover{
    background-color: #eee;
}
/* hover 뒤에 다른 selector가 이어지면 앞이 명령의 대상, 뒤에가 style이 수행되고 적용되는 부분 */
/* dropdown-btn 과 dropdown-sumbenu는 둘이 같은 계층이다 그래서 동작 안하는거임 (상하관계가 되어야 동작함)
한칸을 띄운다 = 상하관계가 전제가 되어있다는거임 !!!!!*/
.dropdown:hover .dropdown-submenu {
    display: block;

}

 

코드 설명

<div class="dropdown">
        <button class="dropdown-btn">Real Estate Type</button>
        <div class="dropdown-submenu">
            <a href="#none">All</a>
            <a href="#none">One room</a>
            <a href="#none">1.5 rooms</a>
            <a href="#none">Two rooms</a>
            <a href="#none">Three rooms</a>
            <a href="#none">Officetel</a>
            <a href="#none">Apartment</a>
        </div>
    </div>

메인이 될 버튼을 button 태그에 넣고 

나머지 submenu 들은 div 로 하나로 묶어준다

submenu 안에는 a 태그를 이용해서 원하는 드롭다운 내용들을 넣어준다

 

 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

body {
    /* 색 줄높이를 미리 잡고 시작한다 */
    font-family: 'Noto Sans KR', sans-serif;
    color : #222;
    line-height: 1.5em;
}
/* 보통 바디태그에 주고나서 a태그에 색상을 주는게 기본이다!!! (상속이 안되니까 별도로) */
a {
    color : #222;
    text-decoration: none;
}

기본적으로 font , body 에 줄높이와 색상 , a 태그에 별도의 색상과 text-decoration 에 none을 주는게 기본이라고 한다.

 

.dropdown {
    /* 보더를 통해서 틀을 봐주는게 좋다 ! */
    /* border: 1px solid #000; */
    /* width: 200px; */
    display: inline-block;
}

border를 사용해서 틀을 만들어 어떻게 동작하는지 직접 봐 가며 하는것이 좋다. 

 

.dropdown-btn {
    width: 200px;
    /* 패딩으로 크기 늘려주기 */
    padding : 10px;
    font-size: 18px;
    background-color: yellowgreen;
    color : #fff;
    border: none;
    cursor: pointer;
}

메인이 되는 btn 의 색상과 기본적으로 적용되는 border 를 없애주고 cursor 를 pointer 로 줘 마우스를 올려 놓으면 포인터로 커서가 바뀌게끔 만들어주자

 

.dropdown-submenu{
    /* border: 1px solid #000; */
    width:200px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.192);
    display: none;
}

a 태그들이 들어가는 dropdown-submenu 에는 bax-shadow 값을 줘 밑에 은은한 그림자가 생기게끔 해줬다

 

그리고 display:none 을 줘서 기존에는 모습이 보이지 않게끔 만들어준다

 

.dropdown-submenu a {
    display: block;
    padding: 7px;
    text-align: center;
}

.dropdown-submenu a:hover{
    background-color: #eee;
}

a 태그는 display:block 을 줬다 왜냐면 블록 요소는 세로로 쌓이기 때문에 세로로 만들기 위해서는 기존 inline 인 a 태그를 block 요소로 바꿔줘야 한다.

또한 a 태그에 마우스를 올리면 백그라운드가 바뀌게끔 만들어주자

 

/* hover 뒤에 다른 selector가 이어지면 앞이 명령의 대상, 뒤에가 style이 수행되고 적용되는 부분 */
/* dropdown-btn 과 dropdown-sumbenu는 둘이 같은 계층이다 그래서 동작 안하는거임 (상하관계가 되어야 동작함)
한칸을 띄운다 = 상하관계가 전제가 되어있다는거임 !!!!!*/
.dropdown:hover .dropdown-submenu {
    display: block;

}

hover 뒤에 다른 selector 가 이어지면 앞이 명령의 대상이고 , 뒤에가 style 이 수행되고 적용되는 부분이다

그렇다면 왜 dropdown-btn:hover dropdown-submenu 는 동작을 안하는 것일까 ?!?!

이유는 간단하다 dropdown-btn 과 dropdown-submenu 는 동일한 계층이기 때문이다 

한칸을 띄운다는 것은 상하관계가 전제 되어있을 때 동작한다 그래서 dropdown:hover dropdown-submenu 이렇게 동작을 시켜야한다.

반응형

'STUDY > K-DIGITAL' 카테고리의 다른 글

[Java] Math.random 사용법, 배수 출력하기  (0) 2022.08.11
[Java] 계절 출력 (Switch-Case break 사용)  (0) 2022.08.10
[Java] 자바 가위바위보 만들기 (if 사용)  (0) 2022.08.10
[HTML,CSS] 로그인폼 만들기 2 (공부용)  (0) 2022.08.10
[HTML,CSS] 로그인 폼 만들기 (공부용)  (0) 2022.08.06
'STUDY/K-DIGITAL' Related Articles more
Comments