-
Vue 프로젝트 Header - Logo 및 Google Fonts프로젝트/영화 검색 (Vue) 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>결과
참고
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
'프로젝트 > 영화 검색 (Vue)' 카테고리의 다른 글
Vue 프로젝트 Search - 필터 (0) 2021.08.01 Vue 프로젝트 Headline (0) 2021.07.31 Vue 프로젝트 Header - Nav (0) 2021.07.29 Vue 프로젝트 Bootstrap 구성 (0) 2021.07.28 Vue 프로젝트 Router 구성 (0) 2021.07.24