HTML 및 CSS를 사용한 간단한 상단 탐색 메뉴

모든 웹 사이트는 이 웹 페이지에 오는 사용자가 웹 페이지 사이를 쉽게 이동할 수 있도록 일종의 탐색이 필요합니다.

웹사이트에 사이드 네비게이션, 상단 네비게이션, 우측 네비게이션 등 다양한 네비게이션 메뉴를 만들 수 있다.

어디를 배치하든, 이러한 내비게이션 메뉴나 내비게이션 메뉴는 웹사이트의 필수적인 부분입니다.

HTML과 CSS 코딩으로 시작할 때는 처음부터 만드는 것이 그리 간단할 수 없다.

그래서 이 블로그 포스트에 HTML과 CSS를 이용하여 처음부터 상위 탐색 메뉴나 탐색바를 만들고 소스 코드도 첨부하겠습니다.

웹 사이트에 대한 폴더 구조 만들기

저는 Nav1이라는 이름의 폴더를 만들었고 이 폴더 안에 Visual Studio 코드로 HTML과 CSS 코드를 작성할 편집자가 될 것입니다.

비주얼 스튜디오 코드에서 폴더가 열리면 index.html와 style.css 파일 두 개를 만들겠습니다.

저희 웹사이트의 기본 HTML 구조를 만드는 것부터 시작하겠습니다.

우리는 비주얼 스튜디오 코드에 Emmet 확장을 사용하고 있기 때문에 html 작성을 시작할 것이고, 웹사이트의 상용어 HTML 구조를 Emmet에서 제공할 것입니다.

그러면 우리의 style.css를 HTML 페이지에 링크하겠습니다.

그럼 웹사이트 본문에 몇 가지 요소를 추가해 보겠습니다.

위의 이미지에서 우리는 우리 몸 안에 헤더 요소를 추가한 것을 볼 수 있습니다.

헤더 태그 안에는 두 가지 요소를 만들었는데, 1은 우리 웹사이트의 로고 자리 표시자로 사용될 앵커 요소입니다.

헤더 내부의 다른 요소는 탐색 요소입니다. 탐색 요소는 일반적으로 탐색에 메뉴를 추가하기 위해 보관됩니다.

내비게이션 내부에는 정렬되지 않은 목록과 사용자가 앵커 요소를 사용하여 탐색할 페이지를 정의하는 몇 가지 요소가 있다.

지금까지의 HTML은 이런 모습입니다.

다음 단계는 웹 사이트가 원하는 대로 보이도록 우리가 만든 이러한 요소들에 몇 가지 CSS 스타일을 추가하는 것입니다.

먼저 웹 사이트에 글꼴을 추가하는 것은 전적으로 선택 사항입니다. 이 예에서는 Google Quicksand Font를 사용하고 있습니다. 폰트의 용도는 위의 이미지에 설명되어 있습니다.

위의 css 코드를 추가함으로써, 우리는 우리의 헤더에 플렉스 디스플레이 속성을 부여하고 헤더에 대한 정렬을 만듭니다. 위의 css가 변경된 후 헤더는 다음과 같습니다.

그리고 아래와 같이 네비게이션과 헤더에 스타일을 추가합니다.

이렇게 하면 네비게이션과 헤더에 색상과 스타일이 나타납니다.

HTML CSS 소스 코드의 상단 탐색 모음