HTML, CSS 에서 드롭다운 메뉴 만드는 법

공동 작성자 위키하우 직원

이 글은 HTML, CSS 코딩을 이용해 웹사이트에서 드롭다운 메뉴를 만드는 방법에 대해 설명한다. 사용자가 버튼 위에 마우스를 놓으면 드롭다운 메뉴가 보일 것이다. 드롭다운 메뉴가 뜨면 사용자는 하나씩 옵션을 클릭하여 그 웹페이지를 방문할 수 있다.

단계

PDF 다운로드

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/3234689-1.jpg\/v4-460px-3234689-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/3234689-1.jpg\/v4-728px-3234689-1.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
HTML 텍스트 편집기를 연다. 메모장이나 텍스트 편집기같은 간단한 편집기를 사용하거나 더 고급 편집기인 Notepad++를 사용해도 된다.
- Notepad++를 사용하는 경우, 먼저 창 상단의 언어 메뉴에서 "H" 에 있는 " HTML 을 고르고 진행한다.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/95\/3234689-2.jpg\/v4-460px-3234689-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/95\/3234689-2.jpg\/v4-728px-3234689-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
문서 헤더를 입력한다. 이는 나머지 문서에 사용되는 코드 타입을 입력하는 코드다. 다음과 같다:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c6\/3234689-3.jpg\/v4-460px-3234689-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c6\/3234689-3.jpg\/v4-728px-3234689-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
드롭다운 메뉴를 만든다. 다음과 같이 코드를 입력하여 드롭다운 메뉴의 크기와 색상을 정하고, "#" 에는 사용하려는 숫자를 대신 넣어줘야 한다(숫자가 클수록, 드롭다운 메뉴의 크기가 커진다). "background-color" 와 "color" 값도 원하는 색상(또는 HTML 컬러 코드)으로 바꿀 수 있다. ^{[1]
X
출처 검색하기}
```
 . 
 dropbtn 
 { 
 background-color 
 : 
 black 
 ; 
 color 
 : 
 white 
 ; 
 padding 
 : 
 #px 
 ; 
 font-size 
 : 
 #px 
 ; 
 border 
 : 
 none 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/78\/3234689-4.jpg\/v4-460px-3234689-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/78\/3234689-4.jpg\/v4-728px-3234689-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
드롭다운 메뉴에 링크를 넣고 싶다는 것을 표시한다. 나중에 드롭다운 메뉴에 링크를 추가할 것이기 때문에, 다음과 같이 입력하여 링크를 드롭다운 메뉴 안에 넣는다:
```
 . 
 dropdown 
 { 
 position 
 : 
 relative 
 ; 
 display 
 : 
 inline-block 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c2\/3234689-5.jpg\/v4-460px-3234689-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c2\/3234689-5.jpg\/v4-728px-3234689-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
드롭다운 메뉴의 외관을 만든다. 다음 코드는 드롭다운 메뉴의 크기, 다른 웹페이지 요소들과 있을 때의 위치, 색상을 결정한다. "min-width" 부분에 있는 "#" 에는 원하는 숫자로(예:250) 바꾸는 걸 잊지 말고, "background-color"도 원하는 색상이나 HTML 컬러 코드로 바꾼다:
```
 . 
 dropdown-content 
 { 
 display 
 : 
 none 
 ; 
 position 
 : 
 absolute 
 ; 
 background-color 
 : 
 lightgrey 
 ; 
 min-width 
 : 
 #px 
 ; 
 z-index 
 : 
 1 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/db\/3234689-6.jpg\/v4-460px-3234689-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/db\/3234689-6.jpg\/v4-728px-3234689-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

6
드롭다운 메뉴의 내용에 디테일을 추가한다. 다음 코드는 드롭다운 메뉴의 텍스트 색상과 드롭다운 메뉴의 버튼의 크기에 대한 코드이다. "#" 에는 버튼 크기를 결정하는 픽셀 숫자를 넣어야 한다.
```
 . 
 dropdown-content 
 a 
 { 
 color 
 : 
 black 
 ; 
 padding 
 : 
 #px 
 #px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 display 
 : 
 block 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/3234689-7.jpg\/v4-460px-3234689-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/3234689-7.jpg\/v4-728px-3234689-7.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
드롭다운 메뉴에 마우스를 댔을 때 어떻게 만들지 수정한다. 마우스를 드롭다운 메뉴 버튼에 올렸을 때 색깔이 몇가지로 바뀌도록 만들 것이다. 맨 처음 "background-color" 는 드롭다운 메뉴의 아이템을 선택했을 때 색깔이 변하는 부분이고, 두 번째 "background-color" 는 드롭다운 메뉴 버튼의 색깔이 변하는 부분이다. 선택하지 않았을 때 두 색상이 더 밝은 게 가장 좋다.
```
 . 
 dropdown-content 
 a 
 : 
 hover 
 { 
 background-color 
 : 
 white 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropdown-content 
 { 
 display 
 : 
 block 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropbtn 
 { 
 background-color 
 : 
 grey 
 ;} 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/15\/3234689-8.jpg\/v4-460px-3234689-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/15\/3234689-8.jpg\/v4-728px-3234689-8.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
CSS 부분을 닫는다. 다음 코드를 입력하여 CSS부분은 끝났다는 것을 나타낸다.
```
 </ 
 style 
 > 
 </ 
 head 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/3234689-9.jpg\/v4-460px-3234689-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/3234689-9.jpg\/v4-728px-3234689-9.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

9
드롭다운 버튼의 이름을 만든다. 다음 코드를 입력하고, "Name" 부분에는 원하는 이름으로 바꿔서 넣는다. (예: Menu ):
```
 < 
 div 
 class 
 = 
 "dropdown" 
 > 
 < 
 button 
 class 
 = 
 "dropbtn" 
 > 
Name </ 
 button 
 > 
 < 
 div 
 class 
 = 
 "dropdown-content" 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8f\/3234689-10.jpg\/v4-460px-3234689-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8f\/3234689-10.jpg\/v4-728px-3234689-10.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

10
드롭다운 메뉴에 링크를 추가한다. 드롭다운 메뉴의 각 아이템은 웹사이트 내의 다른 페이지가 외부 웹사이트와 연결돼야 한다. 다음 코드를 입력하여 드롭다운 메뉴에 아이템을 추가할 수 있다. https://www.website.com 부분은 링크 주소(인용 부호는 그대로 둔다)로 바꾸고 "Name"은 링크 이름으로 바꿔야 한다.
```
 < 
 a 
 href 
 = 
 "https://www.website.com" 
 > 
Name </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.website.com" 
 > 
Name </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.website.com" 
 > 
Name </ 
 a 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/3234689-11.jpg\/v4-460px-3234689-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/3234689-11.jpg\/v4-728px-3234689-11.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

11
문서를 마친다. 다음 코드를 입력하여 문서를 마치고 드롭다운 메뉴의 코드가 끝났다는 것을 보여준다.:
```
 </ 
 div 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/3234689-12.jpg\/v4-460px-3234689-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/3234689-12.jpg\/v4-728px-3234689-12.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

코드는 다음과 같이 보여야 한다. ^{[2]
X
출처 검색하기}

 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 . 
 dropbtn 
 { 
 background-color 
 : 
 black 
 ; 
 color 
 : 
 white 
 ; 
 padding 
 : 
 16 
 px 
 ; 
 font-size 
 : 
 16 
 px 
 ; 
 border 
 : 
 none 
 ; 
 } 
 . 
 dropdown 
 { 
 position 
 : 
 relative 
 ; 
 display 
 : 
 inline-block 
 ; 
 } 
 . 
 dropdown-content 
 { 
 display 
 : 
 none 
 ; 
 position 
 : 
 absolute 
 ; 
 background-color 
 : 
 lightgrey 
 ; 
 min-width 
 : 
 200 
 px 
 ; 
 z-index 
 : 
 1 
 ; 
 } 
 . 
 dropdown-content 
 a 
 { 
 color 
 : 
 black 
 ; 
 padding 
 : 
 12 
 px 
 16 
 px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 display 
 : 
 block 
 ; 
 } 
 . 
 dropdown-content 
 a 
 : 
 hover 
 { 
 background-color 
 : 
 white 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropdown-content 
 { 
 display 
 : 
 block 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropbtn 
 { 
 background-color 
 : 
 grey 
 ;} 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 div 
 class 
 = 
 "dropdown" 
 > 
 < 
 button 
 class 
 = 
 "dropbtn" 
 > 
Social Media </ 
 button 
 > 
 < 
 div 
 class 
 = 
 "dropdown-content" 
 > 
 < 
 a 
 href 
 = 
 "https://www.google.com" 
 > 
Google </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.facebook.com" 
 > 
Facebook </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.youtube.com" 
 > 
YouTube </ 
 a 
 > 
 </ 
 div 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >

팁

웹사이트에 올리기 전에 항상 코드를 먼저 테스트 한다.
위의 설명은 마우스 커서를 드롭다운 메뉴의 버튼 위에 올려놓았을 때 활성화되는 드롭다운 메뉴에 대한 내용이다. 클릭했을 때만 드롭다운 메뉴가 뜨게 만들고 싶다면 JavaScript를 이용해야 한다. ^{[3]
X
출처 검색하기}

경고

HTML 색상은 "black" 또는 "green"처럼 태그를 사용할 때 상대적으로 제한적이다. HTML 컬러 코드 생성기를 쓰면 자신만의 색상을 만들어서 쓸 수 있다. here .

[1]

[2]

[3]

로그인

HTML, CSS 에서 드롭다운 메뉴 만드는 법

단계

팁

경고

관련 위키하우

출처

이 위키하우에 대하여

이 글이 도움이 되었나요?

관련 글

위키하우의 뉴스레터를 무료로 구독하세요!

팔로우 하기

공유

Explore Categories