[내일배움캠프 01일차 TIL] navbar 정렬

1주차 숙제는 강의중 만든 멜로디쉐어의 완성도를 높이는 것!

 수정해야 할 내용은 크게 3가지로

1. Navbar

2. Main의 내용

3. 카드의 내용

 

처음엔 힌트 없이 시작했는데

main의 내용이랑 카드 내용은 무난하게 수정을 했다.

 

하지만 문제는 navbar,,

처음엔 두번째 상위에 있는 nav에 img를 넣었는데 그 위치에 넣으니 버튼들과 한 묶음이 되어서

d-flex justify-content-between을 넣어도 양쪽으로 정렬이 되지 않았다..

 

그래서 위치를 한 칸 위로 옮겨 가장 상위에 있는 nav로 옮기니 양쪽 정렬이 되었다!

 

두 번째 nav에 넣은게 아마 버튼이랑 하나로 묶여서 원하는 정렬이 안 나왔던게 아닐까..

 

그래서 내가 작성한 코드는

<nav class="navbar border-bottom border-body d-flex justify-content-between" data-bs-theme="dark">
            <img class="logo"
                src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg"
                alt="" />
            <nav class="navbar navbar-expand-lg">
                <div class="container-fluid">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-white" aria-current="page" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-white" href="#">Music</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-white" href="#">Album</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-white" aria-disabled="true">Movie</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </nav>

 

그런데 답과는 조금 차이가 있었던 부분이라면

<div class="ms-3">
  <img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg" alt="">
</div>

 

div를 추가해서 img를 따로 묶어주었다는 것!

 

그리고 main 부분의 수정에서도

<p class="lead mb-4">
                    노래를 들으면 생각나는 누군가가 있으신가요?
                </p>
                <p class="lead mb-4">
                    당신의 감성이 담긴 인생곡 플레이리스트<br>
                    멜로디쉐어에서 소중한 사람과 함께하세요.
                </p>

나는 두 개로 나누었지만

정답에서는 하나로 묶여있었다는 점

 

<p>
    <br>
        노래를 들으면 생각나는 누군가가 있으신가요?
    <br>
    <br>
        당신의 감성이 담긴 인생곡 플레이리스트
    <br>
        멜로디쉐어에서 소중한 사람과 함께하세요.
</p>

아마 이렇게?

 

최종 결과물에서는 차이가 없어보였는데

실제 웹사이트였다면 문제가 생겼을까...?