5. Vue.js+Node.js 웹페이지 만들기

08 Dec 2021

Reading time ~2 minutes

5. vue.js 웹페이지 만들기

웹페이지 디자인 갈아엎기

제목_없는_아트워크_7

기존의 디자인이 마음에 들지 않아 컬러와 배치를 바꿔볼 생각이다.
자바스크립트로 글자가 위로 올라오는 애니메이션도 추가해본다.
메뉴 바는 vue.js에서 제공하는 방식으로 진행해본다.

색상

#494e5f 배경색

#ffe7d4 글자색

#fefefa 흰색

기본 화면 구현

Untitled

기본적인 이름과 링크는 구현했다.
상단의 아이콘들은 추후 변경해주도록 한다.

메뉴바 구현

왼쪽에 들어갈 메뉴 바는 vue.js에서 제공하는 방식으로 구현할 예정이다.

Animated Navbar using CSS, Vue and Vue Router

역시나 뭔가 잘 안된다.
그대로 코딩해도 아무것도 나타나지 않았다.

vue+tailwind+sidebar

시간을 너무 많이 잡아먹어 이미 구현되어있는 훌륭한 코드를 사용하기로 했다.

[side nav bar by Hananxx

Navigations, Pages](https://tailwindcomponents.com/component/side-nav-bar)

이곳에서 제공하는 코드를 사용해보도록 한다.
물론, 웹사이트의 전체적인 구성과 맞도록 커스터마이즈를 해야 한다.

결과

Untitled 1

이전보다는 깔끔해진 것 같다.
메뉴 갯수를 줄이고 간격을 조정한 뒤, 애니메이션 작업을 할 예정이다.

타이핑 애니메이션

원래 글자가 위로 올라오는 애니메이션을 할 예정이었지만, 타이핑 애니메이션이 눈에 띄어서 대체하기로 하였다.

<div class="py-40 mx-20">
  <div class=" flex items-stretch ">
    <div class="wrapper">
      <div id="static-txt" class="text-white px-2 mr-10 flex">I'M</div>
      <ul id="dynamic-txts" class="text-yellow-500 ">
        <li><span>Lajancia</span></li>
        <li><span>Developer</span></li>
        <li><span>Writer</span></li>
        <li><span>Illustrator</span></li>
      </ul>
    </div>
  </div>

  <style>
    .wrapper {
      display: flex;
    }
    .wrapper #static-txt {
      font-size: 120px;
    }
    .wrapper #dynamic-txts {
      line-height: 180px;
      height: 180px;
      overflow: hidden;
    }

    #dynamic-txts li {
      list-style: none;
      position: relative;
      font-size: 120px;
      font-weight: 500;
      top: 0;
      position: relative;
      animation: slide 12s steps(4) infinite;
    }

    @keyframes slide {
      100% {
        top: -720px;
      }
    }

    #dynamic-txts li::after {
      content: "";
      position: absolute;
      left: 0;
      height: 100%;
      background-color: #151515;
      width: 100%;
      border-left: 2px solid white;
      animation: typing 3s steps(10) infinite;
    }

    @keyframes typing {
      40%,
      60% {
        left: calc(100% + 30px);
      }
      100% {
        left: 0;
      }
    }
  </style>
</div>

tailwindcss로 하기에는 몇가지 제약 사항이 있었기에 css도 병행하여 사용한다.
문제는 이러한 식으로 개발이 되면 기존에 추가했던 몇가지 텍스트가 가려져버리는 문제가 있다. 이부분은 추후에 해결하도록 한다.

결과

https://user-images.githubusercontent.com/50996139/145754436-ddf68c56-5bdd-4af1-aba1-5a3f92dc515f.mov

추가사항

이제 메뉴의 컨텐츠들을 세부적으로 수정해야 한다.
기존의 github blog를 가장 위에 둔다.
blender 오브젝트를 볼 수 있도록 해본다.
이력서 등록
로그인? 은 일단 데이터베이스 구축을 스터디하는 김에 함께 만들어보자.