PDF 다운로드
PDF 다운로드
이 글은 HTML, CSS 코딩을 이용해 웹사이트에서 드롭다운 메뉴를 만드는 방법에 대해 설명한다. 사용자가 버튼 위에 마우스를 놓으면 드롭다운 메뉴가 보일 것이다. 드롭다운 메뉴가 뜨면 사용자는 하나씩 옵션을 클릭하여 그 웹페이지를 방문할 수 있다.
단계
-
HTML 텍스트 편집기를 연다. 메모장이나 텍스트 편집기같은 간단한 편집기를 사용하거나 더 고급 편집기인 Notepad++를 사용해도 된다.
- Notepad++를 사용하는 경우, 먼저 창 상단의 언어 메뉴에서 "H" 에 있는 " HTML 을 고르고 진행한다.
-
문서 헤더를 입력한다. 이는 나머지 문서에 사용되는 코드 타입을 입력하는 코드다. 다음과 같다:
<!DOCTYPE html> < html > < head > < style >
-
드롭다운 메뉴를 만든다. 다음과 같이 코드를 입력하여 드롭다운 메뉴의 크기와 색상을 정하고, "#" 에는 사용하려는 숫자를 대신 넣어줘야 한다(숫자가 클수록, 드롭다운 메뉴의 크기가 커진다). "background-color" 와 "color" 값도 원하는 색상(또는 HTML 컬러 코드)으로 바꿀 수 있다. [1] X 출처 검색하기
. dropbtn { background-color : black ; color : white ; padding : #px ; font-size : #px ; border : none ; }
-
드롭다운 메뉴에 링크를 넣고 싶다는 것을 표시한다. 나중에 드롭다운 메뉴에 링크를 추가할 것이기 때문에, 다음과 같이 입력하여 링크를 드롭다운 메뉴 안에 넣는다:
. dropdown { position : relative ; display : inline-block ; }
-
드롭다운 메뉴의 외관을 만든다. 다음 코드는 드롭다운 메뉴의 크기, 다른 웹페이지 요소들과 있을 때의 위치, 색상을 결정한다. "min-width" 부분에 있는 "#" 에는 원하는 숫자로(예:250) 바꾸는 걸 잊지 말고, "background-color"도 원하는 색상이나 HTML 컬러 코드로 바꾼다:
. dropdown-content { display : none ; position : absolute ; background-color : lightgrey ; min-width : #px ; z-index : 1 ; }
-
드롭다운 메뉴의 내용에 디테일을 추가한다. 다음 코드는 드롭다운 메뉴의 텍스트 색상과 드롭다운 메뉴의 버튼의 크기에 대한 코드이다. "#" 에는 버튼 크기를 결정하는 픽셀 숫자를 넣어야 한다.
. dropdown-content a { color : black ; padding : #px #px ; text-decoration : none ; display : block ; }
-
드롭다운 메뉴에 마우스를 댔을 때 어떻게 만들지 수정한다. 마우스를 드롭다운 메뉴 버튼에 올렸을 때 색깔이 몇가지로 바뀌도록 만들 것이다. 맨 처음 "background-color" 는 드롭다운 메뉴의 아이템을 선택했을 때 색깔이 변하는 부분이고, 두 번째 "background-color" 는 드롭다운 메뉴 버튼의 색깔이 변하는 부분이다. 선택하지 않았을 때 두 색상이 더 밝은 게 가장 좋다.
. dropdown-content a : hover { background-color : white ;} . dropdown : hover . dropdown-content { display : block ;} . dropdown : hover . dropbtn { background-color : grey ;}
-
CSS 부분을 닫는다. 다음 코드를 입력하여 CSS부분은 끝났다는 것을 나타낸다.
</ style > </ head >
-
드롭다운 버튼의 이름을 만든다. 다음 코드를 입력하고, "Name" 부분에는 원하는 이름으로 바꿔서 넣는다. (예: Menu ):
< div class = "dropdown" > < button class = "dropbtn" > Name </ button > < div class = "dropdown-content" >
-
드롭다운 메뉴에 링크를 추가한다. 드롭다운 메뉴의 각 아이템은 웹사이트 내의 다른 페이지가 외부 웹사이트와 연결돼야 한다. 다음 코드를 입력하여 드롭다운 메뉴에 아이템을 추가할 수 있다. 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 >
-
문서를 마친다. 다음 코드를 입력하여 문서를 마치고 드롭다운 메뉴의 코드가 끝났다는 것을 보여준다.:
</ div > </ div > </ body > </ html >
-
드롭다운 박스의 코드를 확인한다. 코드는 다음과 같이 보여야 한다. [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 .
광고
출처
이 위키하우에 대하여
이 문서는 11,034 번 조회 되었습니다.
광고