Strength & Honor

반응형 헤더 만들기 (2)

---

그런데 지금 내 웹에서는 보이지 않지만 본인이 따라서 해 보면 좌우 및 상하에 여백이 있는 것을 볼 수 있다.
전체적으로 margin 을 없애기 위해서 body 에 margin 을 0 으로 설정하였다.

navbar 의 메뉴들이 기본적으로 list 태그로 되어 있기에 항목앞에 각각 점이 표시가 되어 있는데 이를 없애기 위해서 list-style 을 none 으로 지정하였다.

또한 리스트 형식으로 세로로 정렬되어 있는것을 가로로 정렬하기 위해 display 를 flex 로 지정 해 주었다.
리스트에 있는 항목들은 나중에 마우스로 가르켰을때 선택이 되는 것을 가시적으로 쉽게 보이기 위해 색깔을 넣어줄 것인데 어느정도 형태가 보여야 하기에 공백을 넣어주고자 padding 값을 주었다.

이를 위해 리스트 항목들에 hover 속성을 넣어주었고 마우스로 가르켰을때 너무 사각형으로 나타내어지는 것을 보기좋게 하기 위해서 모서리에 라운드 효과를 넣어주고자 border-radius 값을 주었다.

navbar__icons 에 있는 항목들도 마찬가지이다.

자~~ 오늘은 여기까지 이다.

          
  .navbar {

      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: rgb(9, 108, 173);
      padding: 0px 12px;
  }

  a {
      text-decoration: none;
      color: white;

  }

  body {
      margin: 0;
  }

  .navbar__logo {
      font-size: 18px;

  }

  .navbar__logo i {
      color: yellow;

  }

  .navbar__menu {
      display: flex;
      list-style: none;
      padding-left: 0;
      padding-top: 15px;

  }

  .navbar__menu li {
      padding: 8px 12px;

  }

  .navbar__menu li:hover {
      background-color: #838346;
      border-radius: 4px;

  }

  .navbar__icons {
      list-style: none;
      color: white;
      display: flex;
      padding: 0;
      padding-top: 15px;

  }

  .navbar__icons li {
      padding: 8px 12px;

  }

  .navbar__tooggleBtn {
      position: absolute;
      right: 32px;
      font-size: 24px;
      color: #109e73;
      display: none;

  }
      

---