[영화 검색 사이트] Header, Logo, Headline

https://v3.router.vuejs.org/kr/api/#to

API 레퍼런스 | Vue Router

router-link

to

<!-- 리터럴 string -->
<router-link to="home">Home</router-link>
<!-- 이렇게 렌더링 됩니다. -->
<a href="home">Home</a>

active-class

default: router-link-active

https://getbootstrap.com/docs/5.3/components/navs-tabs/

Navs and tabs

// HeaderMenu.vue
<template>
  <header>
    <div class="nav nav-pills">
      <div
        v-for="nav in navigations"
        :key="nav.name"
        class="nav-item">
        <RouterLink
          :to="nav.href"
          active-class="active"
          class="nav-link">
          {{ nav.name }}
        </RouterLink>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      navigations: [
        {
          name: 'Search',
          href: '/'
        },
        {
          name: 'Movie',
          href: '/movie'
        },
        {
          name: 'About',
          href: '/about'
        }
      ]
    }
  }
}
</script>

---

logo

// LogoVue.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>

---

 

headline

.container 사용

 

https://getbootstrap.com/docs/5.3/layout/containers/

Containers