드롭 다운 메뉴를 만드는 방법 A

[gyun님]

드롭 다운 메뉴를 만드는 방법 A

HTML 및 CSS를 사용하여 드롭 다운 메뉴를 만드는 방법

안녕하세요 시청자 여러분, 다시 오신 것을 환영합니다. 오늘이 블로그에서는 HTML과 CSS를 사용하여 간단한 드롭 다운 메뉴 또는 CSS 드롭 다운 메뉴를 만드는 방법을 배웁니다. 이전에 HTML과 CSS를 사용한 간단한 웹 사이트 디자인에 대한 블로그 게시물을 공유했습니다. 드롭 다운 메뉴 HTML의 드롭 다운 메뉴 CSS에 대한이 자습서에서는 일반 HTML과 CSS를 사용하여 탐색 모음의 드롭 다운 효과를 얻습니다.

CSS 드롭다운 메뉴란 무엇입니까?
웹 디자인을 연습하고 있다면 드롭 다운 메뉴에 대해 들어 보셨을 것입니다. 드롭다운 메뉴는 웹사이트 방문자가 기본 메뉴 위로 마우스를 가져갈 때 나타나는 하위 메뉴입니다. 누군가가 메인 메뉴의 탐색 항목 위로 마우스를 가져가면 연결된 하위 메뉴가 메인 메뉴의 하단에 나타납니다. 따라서 하위 메뉴가 나타나면 방문자는 그 중 하나를 클릭하여 연결된 다른 페이지를 방문할 수 있습니다. 드롭 다운 메뉴는 주로 개발 프로세스 중에 많은 웹 페이지가 구축 된 다중 페이지 웹 사이트에 사용됩니다. 오늘날 대부분의 최신 웹 사이트는 웹 사이트 콘텐츠를 구성하는 가장 좋은 방법이기 때문에 웹 사이트에서 드롭 다운 메뉴를 사용합니다.

이 튜토리얼 (HTML 및 CSS를 사용한 드롭 다운 메뉴)에서는 처음에는 HTML 마크 업에서 우리가 만들 모든 탐색 컨텐츠 표시 줄의 컨테이너 역할을하는 래퍼라는 div를 사용했습니다. 그 후, 나는 정렬되지 않은 목록을 가져 갔다. 드롭 다운을 만들기 위해 서비스 탐색 항목 내에서 정렬되지 않은 다른 목록을 가져 왔습니다. 디자인 하위 메뉴 아래에 다른 하위 메뉴를 만들기 위해 정렬되지 않은 다른 목록도 가져갔습니다.

다음 기사도 좋아할 수 있습니다.

• HTML과 CSS를 사용한 간단한 웹 사이트 디자인
• HTML과 CSS만을 사용한 간단한 아코디언 디자인
• HTML과 CSS를 사용한 간단한 프리로더 애니메이션

CSS 부분에서는 먼저 범용 선택기에 여백과 패딩 0을 제공하여 문서의 기본 여백과 패딩을 버렸습니다. 그런 다음 몸에 배경 이미지를 제공하고 100vh 높이를 부여했습니다. 그런 다음 래퍼 컨테이너에 860px의 사용자 정의 너비를 지정하고 여백 0과 auto를 제공하여 중앙으로 설정했습니다. 그런 다음 정렬되지 않은 목록의 모든 li 요소에 170px의 사용자 정의 너비를 지정하고 상대 위치 값을 지정했습니다. 그런 다음 li 요소에 글꼴 크기, 색상, 줄 높이 등을 제공하여 기본적인 스타일을 지정했습니다. 처음에는 아무 것도 표시하지 않도록 드롭 다운을 정렬하지 않았습니다. 누군가 li 요소 위로 마우스를 가져가면 드롭다운 ul 구성 요소가 나타납니다. 이 일이 발생하도록 마우스를 가져갈 때 기본 navbar li 요소에 표시 블록 값을 넣습니다. 첫 번째 드롭 메뉴 아래의 두 번째 드롭 다운 메뉴의 경우 절대 위치 값을 상단 값이 0이고 여백 왼쪽 값이 170px로 설정했습니다.

HTML과 CSS를 사용한 드롭 다운 메뉴 (소스 코드)

이 스 니펫을 만들려면 두 개의 파일을 만들어야합니다. 그 중 하나는 HTML 파일이고 다른 하나는 CSS 파일입니다. 그런 다음 HTML 및 CSS 코드를 복사하여 적절한 파일에 붙여넣고 저장해야 합니다.

HTML과 CSS를 사용하여 멋진 애니메이션 검색 창 (codingflicks.com)

HTML 및 CSS를 사용하여 드롭 다운 메뉴를 만드는 방법 (codingflicks.com)

드롭 다운 메뉴를 만드는 방법 A

[gyun님]

https://www.codingflicks.com/2020/07/awesome-animated-search-bar-using-html-css.html