HTML 및 CSS 언어로 드롭 다운 메뉴를 만드는 방법

동영상: HTML+CSS 5 :하위메뉴가 열리는 메뉴 만들기 - 전주코딩학원

콘텐츠

단계
조언
경고

이 위키 하우에서는 HTML과 CSS 코드를 사용하여 웹 사이트에 드롭 다운 메뉴를 만드는 방법을 알려줍니다. 방문자가 지정된 버튼 위에 마우스 포인터를 올려 놓으면 드롭 다운 메뉴가 나타납니다. 그런 다음 항목 중 하나를 클릭하여 해당 옵션의 웹 사이트로 이동할 수 있습니다.

단계

HTML 텍스트 편집기를 엽니 다. 간단한 텍스트 편집기 (메모장, 텍스트 편집기) 또는 고급 (메모장 ++)을 사용할 수 있습니다.
- Notepad ++로 이동하기로 결정한 경우 다음을 선택해야합니다. HTML 메뉴의 "H"부분에서 언어 계속하기 전에 창 상단에서 (언어)를 선택합니다.
문서의 제목을 입력하십시오. 다음은 문서의 나머지 부분에 사용할 코드 유형을 결정하는 코드입니다.
드롭 다운 메뉴를 만듭니다. 다음 코드를 입력하여 드롭 다운 메뉴의 크기와 색상을 지정하고 "#"을 사용하려는 매개 변수로 바꾸는 것을 잊지 마십시오 (숫자가 클수록 드롭 다운 메뉴가 커집니다). 또한 배경색 "background-color"및 "color"를 원하는 색상 (또는 HTML 색상 코드)으로 바꿀 수 있습니다.
드롭 다운 메뉴에서 링크를 바꿀 것인지 지정합니다. 그런 다음 메뉴에 링크를 추가하므로 다음 코드를 입력하여 드롭 다운 메뉴에서 링크를 바꿀 수 있습니다.
드롭 다운 메뉴의 모양을 만듭니다. 다음 코드는 웹 페이지의 다른 요소와 결합 될 때 위치를 포함하여 드롭 다운 메뉴의 크기와 색상을 결정합니다. "min-width"섹션의 "#"을 원하는 숫자 (예 : 250)로 바꾸고 "background-color"(배경색) 헤더를 특정 색상 또는 HTML 코드로 변경하는 것을 잊지 마십시오.
드롭 다운 메뉴의 내용에 세부 정보를 추가합니다. 다음 코드는 내부 텍스트 색상과 드롭 다운 메뉴 버튼의 크기를 지정합니다. "#"을 메뉴 버튼 크기를 정의하는 픽셀 수로 바꾸는 것을 잊지 마십시오.
드롭 다운 메뉴에서 마우스를 가져 갔을 때 마우스 포인터가 변경되는 방식을 편집합니다. 메뉴 버튼 위에 마우스 포인터를 올려 놓으면 일부 색상을 변경해야합니다. "배경색"줄은 드롭 다운 메뉴에서 항목을 선택할 때 변경된 색상을 반영하고 두 번째 "배경색"줄은 메뉴 버튼이 변경되는 색상입니다. 이상적으로이 두 가지 색상은 선택 취소했을 때보 다 더 밝아 야합니다.
CSS 섹션을 닫습니다. 다음 코드를 입력하여 문서의 CSS 부분을 완료했음을 지정합니다.
메뉴 버튼의 이름을 만듭니다. 다음 코드를 입력하되 "Name"을 드롭 다운 메뉴 버튼의 이름 (예 : 메뉴):
메뉴에 링크를 추가하십시오. 드롭 다운 메뉴의 각 항목은 현재 웹 사이트의 페이지이든 외부 웹 사이트이든 특정 콘텐츠로 연결됩니다. 다음 코드를 입력하여 드롭 다운 메뉴에 선택 항목을 추가하십시오. https://www.website.com 링크 주소 (괄호 포함)로 바꾸고 "이름"을 링크 이름으로 바꿉니다.
문서를 닫습니다. 다음 태그를 입력하여 문서를 닫고 드롭 다운 메뉴의 코드 끝을 지정합니다.
검토 코드는 드롭 다운 메뉴를 지정합니다. 스 니펫은 다음과 같습니다. 광고