프로젝트/영화 검색 (Vue)

Vue 프로젝트 Header - Logo 및 Google Fonts

IT Blue 2021. 7. 31. 01:07

 

Header - Logo 및 Google Fonts

 

 

폰트 로 제작된 로고

 

Header - Logo 및 Google Fonts 순서

 

1. google font 에서 사용할 폰트 가져오기

2. /index.html 연결

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack project!</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  
  <!-- 연결한 부분-->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  
  <!-- google font body 스타일 정의 -->
  <style>
    body {
      line-height: 1.4;
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>

 

3. /src/components/Logo.vue 생성

<template>
  <RouterLink
    to="/"
    class="logo">
    <span>OMDbAPI</span>.COM
  </RouterLink>
</template>
<style lang="scss" scoped>
@import "~/scss/main";

.logo {
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  color: $black;
  text-decoration: none;
  &:hover {
    color: $black;
  }
  span {
    color: $primary;
  }
}
</style>

 

4. 생성한 Logo 컴포넌트를 Header.vue에서 출력

<template>
  <header>
  	<!-- 연결한 부분 -->
    <Logo />
    
    <div class="nav nav-pills">
      ... 생략
    </div>
  </header>
</template>
<script>
import Logo from '~/components/Logo'

export default {
  components: {
    Logo
  },
  data() {
    ... 생략
  }
}
</script>
<style lang="scss" scoped>
header {
  height: 70px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  .logo {
    margin-right: 40px;
  }
}
</style>

 

결과

 

 

참고

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com