Vue 프로젝트 Headline

 

Vue 프로젝트 Headline

 

 

Vue 프로젝트 Headline 순서

 

1. /src/components/Headline.vue 생성

<template>
  <div class="container">
    <h1>
      <span>OMDb API</span><br />
      THE OPEN<br />
      MOVIE DATABASE
    </h1>

    <p>
      The OMDb API is a RESTful web service to obtain movie information, all content and images on the site are contributed and maintained by our users.<br />
      If you find this service useful, please consider making a one-time donation or become a patron.
    </p>
  </div>
</template>

<style lang="scss" scoped>
@import "~/scss/main";

.container {
  padding-top: 40px;
}
h1 {
  line-height: 1;
  font-family: "Oswald", sans-serif;
  font-size: 80px;
  span {
    color: $primary;
  }
}
p {
  margin: 30px 0;
  color: $gray-600;
}
</style>

 

2. /src/routes/Home.vue 연결

<template>
  <Headline />
</template>

<script>
import Headline from '~/components/Headline'
export default {
  components: {
    Headline
  }
}
</script>

 

결과

---

 

참고

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

Containers