반응형 웹페이지 축소 - 모바일 사이즈 display: none

@media screen and (max-width: 768px) {
  .wrapper {
    min-width: 200px;
  }
  .navbar li {
    display: none;
  }
}

이걸로 수정.

  .navbar li {
    display: none;
  }

이걸 쓰고 그냥 깔끔하게 처리했다.

이걸 쓰지 않았을 경우,

이렇게 지저분하게 남음.

폰트 줄이면 폰트가 작아서 안보임

 

<nav class="menu-bar">
          <ul class="navbar">
            <li><a href="#" class="link">MENU</a></li>
            <li><a href="#" class="link">STORE</a></li>
            <li><a href="#" class="link">WHAT'S NEW</a></li>
            <li><a href="#" class="link">STORY</a></li>
          </ul>

          <div class="icons">
            <img
              src="banner/search.png"
              alt="돋보기 아이콘"
              class="search-icon"
            />
            <img src="banner/Menu.png" alt="메뉴 아이콘" class="menu-icon" />
          </div>
        </nav>

html 을 이렇게 짜 놔서

li  를 숨기는 쪽으로 했다.