헤드라인 만들기

헤드라인을 표시할 컴포넌트 만들기

<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>

 

bootstrap의 container를 이용하여 가운데로 내용을 모아주는 방법

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

Containers

bootstrap에서는 class에 container를 추가하는 것으로 간단하게 내용을 가운데로 모아줄 수 있다.

 

Home.vue  파일에 Headline.vue파일을 연결

<template>
  <Headline />
</template>

<script>
import Headline from '~/components/Headline.vue'

export default {
  components: {
    Headline
  }
}
</script>

 

브라우저 확인