<CSS> 반응형 웹 디자인 - 메뉴바 (1)

- 반응형 웹 디자인

CSS의 미디어 쿼리를 이용하여 반응형 웹을 만들어보았다. 그 중에서도 많은 웹 사이트들에서 흔히 볼 수 있는, 화면 크기 변경 시 메뉴바의 디자인이 달라지는 부분을 구현해보았다.

 

처음엔 JS를 통해 이벤트로 구현해야하나 잠시 고민했는데, 이벤트가 아니라 브라우저의 크기를 가져와서 JS로도 할 수는 있다는 걸 배웠다. 하지만 미디어 쿼리가 보다 보편적인 방법이고, 미디어 쿼리 기능의 목적 자체가 이번에 구현하려는 반응형 웹에 맞는 것이어서 미디어 쿼리로 구현하였다.

 

 

1) 기본 화면 구성

기본 화면의 디자인은 다음과 같다. 가장 왼편에 브랜드 로고가 있고, 중앙에 메뉴가 inline으로 나열되어있으며, 가장 오른편에는 SNS 로고가 위치하고 있다.

 

 

2) 웹 브라우저의 가로 너비가 지정한 크기에 다다랐을 경우

중앙의 메뉴는 사라지도록 하고, 가장 오른편의 SNS 로고는 메뉴 바(햄버거)로 대체한다.

 

코드는 아래와 같다.

 

HTML

<header>
  <section class="hbody">
    <article class="nav">
    <div class="title"><a href="./index.html">BRAND</a></div>
    <ul id="menu">
      <li><a href="./index.html">Home</a></li>
      <li>Notice</li>
      <li>Contact</li>
    </ul>
    <i class="fab fa-twitter-square"></i>
    <i class="fas fa-bars"></i>
    </article>
  </section>
</header>

 

CSS

- 공통 적용

기본 화면 디자인이라고 생각하면 된다.

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

.hbody {
  background-color: black;
  width: 100%;
  height: 100px;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  color: white;
}

.title {
  font-size: 2em;
}

.title > a {
  color: white;
}

 

- 웹 브라우저 가로의 최소 너비가 625px일 때(625px 이상일 때)

625px가 일종의 중단점(break point)이다. 625px를 기준으로, 625px 이상일 때는 중앙 메뉴바를 원하는 위치로 고정시키고(#menu), SNS 아이콘 역시 가장 우측에(.fab), 그리고 메뉴 바(햄버거)는 display 속성에 none 값을 주어 숨기도록 한다(.fas).

@media screen and (min-width: 625px) {

  #menu {
    display: flex;
  }

  #menu > li {
    padding: 20px 30px;
    font-size: 20px;
  }

  li > a {
    color: white;
  }

  .fab {
    font-size: 35px;
    color: #1DA1F2;
  }

  .fas {
    display: none;
  }
}

 

- 웹 브라우저 가로의 최대 너비가 625px일 때(625px 이하일 때)

nav에 padding 값을 수정하여 위치를 조절한다. 중앙에 위치한 메뉴는 display 속성에 none 값을 줌으로써 숨겨둔다. SNS 로고 역시 마찬가지로 수정한다. 그리고 625px 이상일 때 숨겨두었던 메뉴 바(햄버거)는 display 속성 값을 따로 설정하지 않았으므로 나타날 것이고, 크기만 수정해준다.

@media screen and (max-width: 625px) {

  .nav {
    padding: 30px 40px;
  }

  #menu {
    display: none;
  }

  .fab {
    display : none;
  }

  .fas {
    font-size: 2em;
  }
}