우리 둘 다 바닐라로 끈적끈적한 나바를 만들자.

반응형

img

블로그를 포함한 많은 웹사이트에 끈적끈적한 내비게이션 바가 있다는 것을 우리 중 많은 사람들이 알아챘습니다.

지프, 지아이에프, 그래픽 인터체인지 포맷(Graphic Interchange Format)

여기 GIF에서는 보시다시피 Navbar가 페이지 상단에 고정되어 있습니다.

 

끈적끈적한 내바를 유지하는 유일한 목적은 매력적으로 보이고 접근하기 어렵게 만든다.

그래서, 네 웹사이트에 끈적끈적한 탐색기를 추가하고 싶어?

먼저 Vanilla CSS cape부터 시작하겠습니다.

• 탐색바의 기본 층계 작성

<div class="container">
    <h1 class="text">stickattop</h1>
</div>

 

• 스크롤을 만들 이미지 추가

<img src="https://images.unsplash.com/photo-1646498749176-b4ddb3b3b4a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80" alt="catimg" class="img">
  <img src="https://images.unsplash.com/photo-1646497795650-58de9c4fd44f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=772&q=80" class="img"/>

    ```

    CSS 를 시작할 시간입니다.

    - 스타일링 탐색 막대

    ```js

.container{
  position: fixed;
    top: 0;
      width: 100%;
        background: #1e293b;
        }

 

• 문자 스타일 지정

.text{
  text-align: center;
    text-transform: uppercase;
      font-weight: 900;
        letter-spacing: 0.05em;
          color: white;
          }

• 전체 코드

<div class="container">
    <h1 class="text">stickattop</h1>
</div>
<img src="https://images.unsplash.com/photo-1646498749176-b4ddb3b3b4a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80" alt="catimg" class="img">
  <img src="https://images.unsplash.com/photo-1646497795650-58de9c4fd44f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=772&q=80" class="img"/>

    ```

    ```js

body{
  margin: 0;
    padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      .container{
        position: fixed;
          top: 0;
            width: 100%;
              background: #1e293b;
              }
              .text{
                text-align: center;
                  text-transform: uppercase;
                    font-weight: 900;
                      letter-spacing: 0.05em;
                        color: white;
                        }

                        .img{
                          width: 100%;
                            height: auto; 
                            }

 

출력 - Vanilla CSS

Tailwind CSS 로 갑시다.

• 고정식 탐색 막대 만들기

<div class="top-0 sticky bg-slate-800 text-white py-4">
  <h1 class="uppercase font-black text-center text-3xl tracking-wider">stickattop</h1>
  </div>

• 스크롤을 위한 이미지 추가(옵션)

 

<img src="https://images.unsplash.com/photo-1646498749176-b4ddb3b3b4a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80" alt="catimg">
  <img src="https://images.unsplash.com/photo-1646497795650-58de9c4fd44f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=772&q=80" />

    ```

    ### 출력 - 뒷바람 CSS

    Twitter - @code with snowbit를 통해 언제든지 연락 주십시오.

    ###  연결해보자

    - 깃헙

- 트위터

- 유튜브

<div class="content-ad"></div>

제 콘텐츠를 즐기시고 도움이 되셨다면 이 내용을 확인해 보세요.

![Buy me a coffee](https://res.cloudinary.com/practicaldev/image/fetch/s--WQ38dLuT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7242fho13cwcxlh8jutn.png)