네비게이션바 만들기

네비게이션 바는 <nav> </nav> 안에 작업.

navigation은 보통 ul로 나눠지고, 그 안에 많은 li로 구성된다. 

그리고 그 li는 a(anchor)를 가진다. 즉, 아래와 같이 구성되는 게 1번!

 

<nav>

    <ul>

      <li>

        <a href=""></a>

      </li>

    </ul>

 </nav>

 

구글에 cnn을 검색했을 때 아래에 나온 항목들 역시 네비게이션 바이다. 이 역시 ul안의 li로 구성돼있다. 

 

네비게이션바를 만들어주는 단축키

nav 안에 ul이 있고 li 4개와 앵커들로 구성된 코드를 자동으로 만들어준다.

입력시엔 tab키를 활용하면 빠르게 구성요소를 채울 수 있다.

각각의 엘리먼트에는 클래스를 삽입했다. 

  <nav class="nav">

    <ul class="nav__list">

      <li class="nav__btn">

        <a class="nav__link" href="friends.html"><i class="fa fa-user fa-lg"></i></a>

      </li>

      <li class="nav__btn">

        <a class="nav__link" href="#"><i class="fa-regular fa-comment fa-lg"></i></a>

      </li>

      <li class="nav__btn">

        <a class="nav__link" href="#"><i class="fa-solid fa-magnifying-glass fa-lg"></i></i></a>

      </li>

      <li class="nav__btn">

        <a class="nav__link" href="#"><i class="fa-solid fa-ellipsis fa-lg"></i></a>

      </li>

    </ul>

  </nav>

 

일단 오늘은 카카오톡 하단의 메뉴목록인 네비게이션 바의 첫단계를 완성했다.

먼저 list로 구성요소들의 뼈대를 잡고,

그 뒤에 구성요소의 명칭 대신 아이콘 코드를 삽입하여, 그림으로 나타나게 해주었다.

그 후 블록으로 수직 정렬된 리스트들을 일렬로 정렬하기 위해서 display:flex;를 했다.

** 이때 .nav { distplay : flex; } 가 먹히지 않아서 이상했는데. nav가 아니라 nav__list에 flex를 주어야 하는 것이기 때문이었다. 잊지말자 flex를 해야할 요소는 nav 전체가 아니라 nav__list 로 묶인 ul 박스다!

그리고 justify-content: space-between;으로 같은 비율로 나누어서 배치하도록 했다. 

 

그리고 css 를 추가적으로 만진 것은 padding (경계선 안쪽 공간) 

아이콘이 경계선에 딱 붙어있기 때문에 넉넉하게 공간을 주었다. 위아래엔 20px 좌우엔 40px을 주었다.

 

네비게이션 바의 첫단계 완성

 

 

 

강의록

 

- navigation은 ul 안의 li들로 구성. 구글 역시 navigation에 ul의 li 안에 있는 link를 가져오게끔 설정되어있다.

- VSC의 단축키로 navigation에서 하위메뉴까지 한번에 자동 완성 시킬 수 있다.

   nav>ul>li*(필요한개수)>a

   그 후 tab만으로 간편하게 작성이 가능하다.

- 점 3개 짜리 아이콘은 ellipsis라고 한다

- 속성과 class의 이름은 같아도 무방하다

- 메인 styles.css에 다른 요소의 css를 import 할 때, 순서를 지키는 것이 정말 중요하다.