24.07.08 day20 Flexbox vs Grid, 포트폴리오 배경화면

 Flexbox vs Grid

https://moonmisae-cdpt.tistory.com/272

Flexbox와 Grid

---

포트폴리오 배경화면

맛깔난 배경화면을 찾다가 좋은걸 보게 되었다. 전체화면에 수많은 별이 움직이고 있었는데 배경이 맘에 들어서 vue방식으로 수정해줬다.

 

화면 자체를 모든 컴포넌트에 적용시켜야 하기 때문에 app.vue에 작성해 전역으로 코드를 적용시켰다.

< html >

<template>
  <div id="app">
    <svg class="sky"></svg>
    <router-view></router-view>
  </div>
</template>

id가 app인 div안에 두 태그가 있는데, 별을 생성할 svg 태그와 라우터로 컴포넌트를 가져올 태그이다.

svg태그에 코드를 작성했다.

 

< script >

<script>
export default {
  name: "App",
  mounted() {
    this.makeStars();
    window.addEventListener("resize", this.makeStars);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.makeStars);
  },
  methods: {
    makeStars() {
      const $sky = this.$el.querySelector(".sky");

      // 브라우저 가장 큰 크기
      const maxSize = Math.max(window.innerWidth, window.innerHeight);

      // 랜덤한 X 위치 값
      const getRandomX = () => Math.random() * maxSize;

      // 랜덤한 Y 위치 값
      const getRandomY = () => Math.random() * maxSize;

      // 랜덤한 크기 (circle는 반지름이 크기)
      const randomRadius = () => Math.random() * 0.7 + 0.6;

      // 임의의 값
      const _size = Math.floor(maxSize / 2);

      const htmlDummy = new Array(_size)
        .fill()
        .map(() => {
          return `<circle class='star'
            cx=${getRandomX()}
            cy=${getRandomY()}
            r=${randomRadius()}
            className="star" />`;
        })
        .join("");

      $sky.innerHTML = htmlDummy;
    },
  },
};
</script>

먼저 컴포넌트가 렌더링된 후에 이벤트가 발생할 수 있게 vue의 라이프 사이클 훅 중 하나인 mounted로 감싸준다.

그리고 컴포넌트가 언마운트 되기 전에 실행되는 beforeUnmount 훅을 작성해서 이벤트를 제거해준다.

methods안에 별을 생성하는 함수를 작성

작성된 코드는 브라우저 창 크기에 따라 동적으로 별을 생성하고, 창 크기가 변경될 때마다 별을 다시 생성한다.

 

< style >

<style>
#app {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #111, #0e0f19);
  font-family: "WantedSans";
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

#app::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

@font-face {
  font-family: "WantedSans";
  src: url("assets/fonts/EF_watermelonSalad\(ttf\).ttf") format("truetype");
  font-weight: 400;
}

.sky {
  width: 100vw;
  height: 100vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: moveStar 240s linear infinite;
}

/* 별 */
.sky .star {
  fill: #fff;
  stroke: none;
  stroke-width: 0;
}

/* 별 이동효과 */
@keyframes moveStar {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>

먼저 전체 배경을 위해 id가 app인 div에 100vw, 100vh를 주어 화면 전체를 덮게 하고 좌측부터 검은색에서 진한 남색까지 진행되는 그라데이션을 추가

이 후 별을 그릴 화면인 .sky에 moveStar라는 애니메이션을 설정해주는데, 중앙지점에 시작해서 360도로 한바퀴 돌아가는 애니메이션을 무한으로 설정해준다.

 

움짤을 넣고싶은데 데스크탑은 아직 윈도우 10이라 11로 업데이트를 하면 올릴 예정