Flex Layout을 이용한 프로젝트 - Navigation

본 포스팅은 💻 유데미 Advanced CSS and Sass강좌 를 공부하면서 정리한 내용입니다.

Navigation HTML 작성

index.html에 nav 부분을 다음과 같이 작성해준다.

<nav class="sidebar">
  <ul class="side-nav">
    <li class="side-nav__item">
      <a href="#" class="side-nav__link">
        <svg class="side-nav__icon">
          <use xlink:href="img/sprite.svg#icon-home"></use>
        </svg>
        <span>Hotel</span>
      </a>
    </li>
    <li class="side-nav__item">
      <a href="#" class="side-nav__link">
        <svg class="side-nav__icon">
          <use xlink:href="img/sprite.svg#icon-aircraft-take-off"></use>
        </svg>
        <span>Flight</span>
      </a>
    </li>
    <li class="side-nav__item">
      <a href="#" class="side-nav__link">
        <svg class="side-nav__icon">
          <use xlink:href="img/sprite.svg#icon-key"></use>
        </svg>
        <span>Car rental</span>
      </a>
    </li>
    <li class="side-nav__item">
      <a href="#" class="side-nav__link">
        <svg class="side-nav__icon">
          <use xlink:href="img/sprite.svg#icon-map"></use>
        </svg>
        <span>Tours</span>
      </a>
    </li>
  </ul>

  <div class="legal">&copy; 2017 by trillo. All rights reserved.</div>
</nav>

크게 구조를 표현해보면 다음과 같다.

sidebar(nav)

• side-nav(ul)
  • side-nav__item(li)
    • side-nav__link(a)
      • side-nav__icon(svg)
      • span(span)
  • side-nav__item(li)
    • side-nav__link(a)
      • side-nav__icon(svg)
      • span(span)
• legal(div)

Navigation 디자인

1단계. 기본구조

////////////////////////////////////////////////
// SIDE NAVIGATION
.side-nav {
  &__item {
  }

  &__link {
  }

  &__icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

////////////////////////////////////////////////
// LEGAL Text
.legal {
  font-size: 1.2rem;
  text-align: center;
  padding: 2.5rem;
  color: $color-grey-light-4;
}

근데 높이가 안 맞으니까 _layout.scss 파일에 .hotel-view에서 height를 늘려주도록 하자.

.hotel-view {
  (...생략) 
  height: 80rem;
}

2단계. sidebar 배치

_layout.scss 파일에서 sidebar에 flex를 적용해서 side-nav와 legal 배치를 잡아주자. space-between하니까 원하는대로 배치가 되었다.

.sidebar {
  (...생략) 
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

3단계. side-nav 디자인

.side-nav {
  font-size: 1.4rem;
  list-style: none;
  margin-top: 3.5rem;

  &__item {
  }
  
  // 링크 가상클래스
  &__link:link,
  &__link:visited {
    color: $color-grey-light-1;
    text-decoration: none; // 밑줄 제거
    text-transform: uppercase; 
    // 🚨 a 태그는 기본적으로 inline이기 때문에 padding을 적용하려면 display를 block으로 해야한다. 
    // https://poiemaweb.com/css3-display#12-inline-%EB%A0%88%EB%B2%A8-%EC%9A%94%EC%86%8C
    display: block; 
    padding: 1.5rem 3rem;
  }

  &__icon {
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 2rem;
    fill: currentColor;
  }
}

추가적으로 지금 보면 아이콘하고 span하고 살짝 align가 맞지 않는다. 이 역시 flex layout으로 해결 가능하다.

&__link:link,
&__link:visited {
   (...생략...)
    display: flex;
    align-items: center;
}

4단계. 가상요소 추가

사이드바 메뉴에다가 마우스를 올리면 애니메이션 효과를 줘보려고 한다.

  &__item {
    position: relative;
    
    // ✅ 자주 사용되는 문법가운데 하나.
    // __item 중에서 마지막 놈만 제외하고 적용하라는 뜻이다.
    &:not(:last-child) {
      margin-bottom: 0.5rem;
    }
  }
  
  // ::befor 가상요소 적용. &__item 앞에 ::before라는 가상 요소가 생기고 이 요소에 적용된 
  // css가 사이드바 옆에 3px만큼 나타내주는 것이다. (아래 그림 참고)
  &__item::before {
    content: ""; // 필수 속성
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background-color: $color-primary;
  }

5단계. 애니메이션 효과

  &__item::before {
    (생략)
    transform: scaleY(0);
    // transition: property duration [function] [delay]
    // transform은 0.2초, width는 0.4초 지속시간, 0.2초 딜레이를 가진다. 
    // 이는 먼저 세로축으로 쫙 펴춘다음 가로축으로 쫙 펴출려는 동작을 위해..
    transition: transform 0.2s, width 0.4s 0.2s;
  }

  &__item:hover::before {
    transform: scaleY(1);
    width: 100%;
  }

음.. 근데 나는 처음에는 slow로 하고 싶고 나중에는 accelerate으로 하고 싶다면? 🤔 그런거 만들어주는 좋은 사이트가 있다. 💻 참고

괜찮은 모형을 만들었다면 이렇게 수정해줄 수 있다.

transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s;

마지막으로 a 태그 글자는 보여야 하니까 z-index를 적용해준다. z-index 프로퍼티에 큰 숫자값을 지정할수록 화면 전면에 출력된다. 다만 🚨 주의할 점은 positon 프로퍼티가 static 이외인 요소에만 적용된다.

&__link:link,
&__link:visited {
    position: relative;
    z-index: 10;
}

6단계. 방문중인 카테고리 표시

방문중인 카테고리 표시를 위해 카테고리 하나에 --active 추가해주자. 원래는 동적으로 처리해야하지만 여기서는 어쩔 수 없이...

<li class="side-nav__item side-nav__item--active">

그런 다음 --active가 적용된 요소는 hover와 동일하게 지정해주면 된다.

 &__item:hover::before,
 &__item--active::before {
    transform: scaleY(1);
    width: 100%;
  }

아래는 HOTEL 카테고리에 방문중인 것을 가정하고 출력한 결과이다.