상단바를 만들어보자!

    <nav class = "navbar">
        <div class="navbar_logo">
            <i class="fa-solid fa-paw"></i>
            <a href="http://fluffybonnie.shop/">FluffyBonnie</a>
        </div>

        <ul class = "navbar_menu">
            <li><a href="">Home</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>

        <ul class ="navbar_icon">
            <li><i class="fa-brands fa-facebook"></i></li>
        </ul>
    

TIP!

(li>a)*4 하고 tab키를 누르면 <li><a href=""></a></li> 네 줄을 한번에 만들 수 있다.

font awesome 에서 free icons사용하기

1) 이메일로 가입하고 개인CDN 코드를 받기
2) 링크 소스 kit을 받기 위해서 이메일 등록하기.
3) 로그인 후에 Kit를 클릭하면 사이트에서 링크해서 쓸 수 있는데 js경로가 생성되어 있는데 이걸 head안에 입력.

<script src="https://kit.fontawesome.com/개인 폰트어썸 Kit 일련번호" crossorigin="anonymous"></script>

4) 내가 원하는 아이콘 검색해서 클릭
5) body 내에서 i class = "fa-brands fa-facebook"의 코드를 복사해 내가 넣고자 하는 부분에 붙여넣기.

그럼 현재 화면에선 이렇게 나온다. 이제 CSS 를 입힐 차례

    <style>
        .navbar {
            display: flex;
            /* #중간중간에 spacing넣기 */
            justify-content: space-between;
            align-items: center;
            background-color: midnightblue;
            padding: 8px 12px;
        }

        a {
            text-decoration: none;
/*             글자색깔을 하얗게*/
            color: white;
        }

        .navbar_logo{
            font-size: 24px;
            color: white;
        }

        .navbar_menu{
/*            안에 있는 리스트들을 한줄에 나란히 놓기*/
            display: flex;

/*            list들 앞에 붙는 점들 사라지게 하기 */
            list-style: none;
            padding: 12px 8px 4px 0px;}

        /*        메뉴안에 있는 아이템들이 너무 따닥따닥붙어있기 떄문에 spacing 넣어서 간격 맞추기 */
        .navbar_menu li{
            padding: 8px  12px;
        }

        .navbar_icon {
            list-style:none;
            color: white;
            display: flex;
        }

    </style>