HTML과 CSS를 사용하여 탐색 모음을 만드는 방법-CSS 튜토리얼-php.cn

How to Create a Navigation Bar Using HTML and CSS

잘 디자인되고 기능적인 탐색 모음(navbar)은 모든 웹사이트의 핵심 구성 요소 중 하나입니다. 이는 사용자를 위한 로드맵 역할을 하여 다양한 페이지를 탐색하는 데 도움을 줍니다. 탐색 모음은 일반적으로 웹페이지 상단에 위치하며 사용자가 주요 링크에 액세스할 수 있도록 항상 표시됩니다. 이 글에서는 HTML과 CSS를 사용하여 시각적으로 매력적이고 기능적인CSS 네비게이션 바를 만드는 방법을 살펴보겠습니다. 또한 탐색 표시줄을 페이지 상단에 유지하는 다양한 기술에 대해서도 논의하겠습니다.

CodePen의 미리보기를 방문하면 이 탐색 모음의 라이브 데모를 확인하고 기능을 살펴볼 수 있습니다.

다음 코드 조각은 로고, 메뉴 항목 및 클릭 유도 버튼이 포함된 반응형 탐색 모음을 만드는 방법을 보여줍니다. HTML 및 CSS 코드는 다음과 같습니다.

으아악

코드 분석
HTML과 CSS를 사용하여 탐색바가 어떻게 생성되는지 자세히 살펴보겠습니다.

HTML 구조

코드의 HTML 부분은 간단합니다. 이는 세 가지 주요 구성 요소를 포함하는 탐색 요소로 구성됩니다.

로고(이미지)
A **메뉴 **클릭 가능한 링크가 있는 목록(홈, 회사 소개, 문의처, 블로그)
행동 촉구 역할을 하는 **버튼 **(지금 전화)
구조는 탐색 모음의 컨테이너 역할을 하는 요소 내부에 래핑되어 있습니다.

으아악

로고는태그를 사용하여 생성됩니다. 메뉴는 목록 항목(

)

을 포함하는 순서가 지정되지 않은 목록 (
)
이며, 각 목록 항목에는 앵커 태그 ()가 있어 다른 페이지에 대한 링크를 생성할 수 있습니다. 마지막으로 버튼은 스타일링이 적용된 심플한 태그입니다

CSS를 사용한 스타일링

내비게이션 바의 레이아웃과 모양을 정의하는 CSS 섹션에서 마법이 일어납니다. 몇 가지 핵심 요소에 대해 논의해 보겠습니다.

배경 및 바디 스타일링
본체에는 파란색(#2258c3)에서 분홍색(#fd2df3)으로 전환되는 그라데이션 배경이 있습니다. 높이는 100vh(뷰포트 높이)로 설정되어 배경이 전체 화면을 채우고 페이지 주위에 불필요한 공간이 생기지 않도록 여백이 없습니다.

으아악

탐색바 스타일링

navbar는 흰색 배경과 둥근 모서리를 가지고 있습니다(테두리 반경: 30px). 패딩과 여백은 탐색 모음 내부와 외부에 간격을 만듭니다. display: flex 속성은 navbar를 flexbox로 만들어 하위 요소의 수평 정렬을 허용합니다. justify-content: space-between은 로고, 메뉴, 버튼의 간격을 균등하게 유지합니다.

으아악

Navbar를 상단에 고정하기

내비게이션 바의 주요 기능 중 하나는 스크롤하는 동안 페이지 상단에 머무르는 것입니다. 이를 달성하기 위해 position: 고정 속성을 사용합니다. 이렇게 하면 탐색 모음이 스크롤에 관계없이 상단(top: 0)에 고정된 상태로 유지됩니다. 또한, z-index: 9999는 탐색 표시줄이 항상 페이지의 다른 요소 위에 위치하도록 보장합니다.

으아악

메뉴 항목 및 상호 작용

메뉴 항목은 .menu 클래스의 display: flex를 사용하여 가로로 표시됩니다. 항목에는 여백을 통해 간격이 지정되고 각 항목에는 기본 목록 스타일과 패딩을 제거하도록 스타일이 지정됩니다. 메뉴 항목 내의 링크에는 텍스트 장식이 없으며 굵은 글꼴과 어두운 색상으로 스타일이 지정됩니다.

링크의 호버 효과는 파란색 배경 색상과 일치하도록 색상을 변경하여(#2258c3)링크가 대화형이라는 시각적 단서를 제공합니다.

으아악