[HTML / CSS] Navbar 메뉴바 만들기!

안녕하세요 지난 시간에는 부트스트랩을 다운받고 적용한 뒤 버튼을 만드는 예제를 배워보았어요,

 

이번시간에는 상단 메뉴바를 만드는 걸 해보아요~!!

 

http://bootstrapk.com/getting-started/

시작하기 · 부트스트랩

부트스트랩을 다운 받지 않은 사람은 여기서 다운 받으시면 됩니다.

 

 

 

오늘은 부트스트랩을 사용하여 상단 메뉴바를 만들어 보겠습니다.

 

 

부트스트랩의 Navbar는 많은 웹페이지의 화면 상단에서 볼 수 있는 메뉴 바의 기본 틀을 제공합니다. 

부트스트랩 사이트(https://getbootstrap.com/)의 Documentation 탭에서 Navbar를 검색하면 자세한 설명과 함께 예시 코드를 볼 수 있습니다. 

 

 

Navbar의 Documentation에 있는 기본 코드를 실행하면 다음과 같은 Navbar가 만들어집니다. 

여기서 변경해야할 점은 다음과 같습니다. 

 

1. 화면의 크기가 medium 이하일 때 toggle 버튼이 생기도록 변경

2. Navbar의 배경 색을 dark로 변경

3. Navbar-brand의 텍스트 내용을 "Fixed navbar"로 변경

4. Dropdown 메뉴 삭제

5. 스크롤해서 화면이 내려가도 Navbar가 위에 고정되도록 변경

<!-- 화면 변경 크기와 navbar의 배경색, 글자색 변경 -->

<!-- 화면 위쪽에 고정하기 위해 fixed-top 클래스 추가 -->

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">

  <!-- navbar-brand의 content 변경 -->

  <a class="navbar-brand" href="#">Fixed navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <!-- dropdown 메뉴 삭제 -->

      <li class="nav-item">

        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

 

이 소스코드대로 실행하면 아래와 같은 화면이 나옵니다.

 

 

 

스틱코드를 사용하면 코드를 블록화 하여 코딩하는것에 있어 시간을 단축할 수 있습니다.

많이 사랑해주세요~ ^^7

https://stickode.com/mainlogin.html

STICKODE