고정 Navbar를 만드는 방법

오늘의 기사에서는 고정 navbar를 만드는 방법을 보여 드리겠습니다.
두 개의 보너스도 있습니다.
별로 어렵지 않습니다. 다음과 같이 하시면 됩니다.

ul {
position: fixed;
    top: 0;
}

하지만 까다로울 수 있습니다.
그러니 이 글이 끝날 때까지 나와 함께 있어 주세요.

먼저 먼저 :

HTML 설정

 <header>

        <!-- This is for our background image -->
        <div class="bg"></div>

        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Projects</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">About</a></li>
            </ul>
       </nav>
    </header>

  <section>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, unde sequi. Labore, tempora quos veniam sunt deserunt dolor autem ullam eligendi, accusamus laudantium dolore cupiditate dignissimos omnis? Suscipit, ipsam possimus?</p>
    </section>

CSS 설정

A. 간단한 탐색 모음 만들기

ul {
    width: 100%;
    background-color: rgb(0, 204, 255);
    display: flex;
    justify-content: center;
}

li {
    /* gets rid of the bullets */
    list-style: none;

    margin: 20px 25px;
}

a {
    color: #fff;
    font-size: 120%;

    /* gets rid of the link underline */
    text-decoration: none;
}

B. 배경 이미지나 텍스트 또는 원하는 것을 만듭니다. 제 경우에는 배경 이미지를 만들었습니다.

.bg {
    position: relative;
    width: 100%;
    min-height: 125vh;

    /* got the image from https://www.gavtrain.com/?p=6851 */
background-image: linear-gradient(rgba(0, 0, 0, 0.801), rgba(0, 0, 0, 0.801)), url(https://www.gavtrain.com/wp-content/uploads/2020/02/Neon-BG-Blog.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
}

이제 아래로 스크롤하면 탐색 모음이 사라지는 것을 볼 수 있습니다.



C. ul 요소fixed positioning를 제공하여 이 난장판을 수정할 시간입니다.

ul {
position: fixed;
    top: 0;
}

이렇게 하면 탐색 모음이 화면 상단에 고정됩니다.
그러나 (아래 gif에서) 볼 수 있듯이 navbar가 사라졌거나 배경 이미지 뒤로 갔다고 말하는 것이 좋습니다.
이 문제를 해결하려면 z-index:1 ; 요소에 ul를 추가하세요.

추신: z-index에 대해 간략하게 설명했습니다.

ul {
    width: 100%;
    background-color: rgb(0, 204, 255);
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    z-index: 1;
}

축하합니다. 끈적끈적한 nabvar를 만들었습니다 🥳🥳


이것이 마지막 손질입니다.

보너스 1 : 내비게이션이 겹치지 않게 하는 방법

이것이 원본 배경 이미지입니다.

(here에서 이미지 가져옴)

보시다시피 navbar가 우리 요소에 겹치고 약간의 이미지가 navbar 아래에 있습니다.



배경에 margin-top를 부여하여 겹침을 수정할 수 있습니다.



재미있는 사실 : 이 짧은 영상을 올리려고 채널을 만들었습니다 ㅋㅋ

보너스 2:

링크 밑줄에 애니메이션을 적용하려면 다음을 수행할 수 있습니다check out this amazing article.