Navbar를 만드는 방법 | HTML, CSS 및 JavaScript를 사용하여 Navbar 만들기

https://www.codewithrandom.com/2022/05/How-to-Create-a-Navbar.html



소개:
안녕하세요 코더 여러분, codewithrandom에 오신 것을 환영합니다. 오늘 우리는 HTML, CSS 및 JavaScript의 도움으로 내비게이션 바 또는 내비게이션을 만드는 방법을 살펴보겠습니다. 프론트 엔드 개발자로서 우리는 HTML, CSS 및 JavaScript라는 도구를 가지고 있습니다. 이를 통해 창의적으로 만들고 사용자 인터페이스의 관심을 끌 수 있습니다. 코드 부분으로 이동하기 전에 Navbar가 무엇인지 살펴보겠습니다.

Navbar는 무엇입니까?
탐색 모음 또는 Navbar는 웹 페이지 또는 웹 사이트의 요소입니다. 한 페이지에서 다른 페이지로 사용자 인터페이스를 리디렉션하는 링크가 포함되어 있습니다. 태그는 모든 기본 막대, 즉 웹사이트의 기본 탐색을 래핑합니다. 수직 또는 수평일 수 있습니다.
Navbar의 코딩 부분을 살펴보겠습니다.

HTML 코드:

 <div class="navbar">  
  <div class="logo">  
   <h1>Codewithrandom</h1>  
  </div>  
  <div class="nav__links">  
   <a href="#home" class="active nav__link">Home</a>  
   <a href="#about" class="nav__link">About</a>  
   <a href="#contact" class="nav__link">Contact</a>  
  </div>  
 </div>  
 <div id="home" class="section">  
  <h1>Home</h1>  
 </div>  
 <div id="about" class="section">  
  <h1>About</h1>  
 </div>  
 <div id="contact" class="section">  
  <h1>Contact</h1>  
 </div>  
 <script src="main.js"></script>

이 HTML 코드에서 로고, navbar 및 nav_links와 같은 클래스를 정의하고 호출했습니다. 그리고 제목을 홈, 정보, 연락처로 설명합니다. HTML 출력을 살펴보겠습니다. Navbar용 CSS를 작성하기 전에.

HTML 출력:


이 출력에서 ​​우리는 HTML 부분과 이것이 어떻게 보이는지 코딩했으며 navbar가 매력적으로 보이도록 CSS를 작성하겠습니다.

CSS 코드:

 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");  
 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
  font-family: "Poppins", sans-serif;  
 }  
 body {  
  scr

Read more