한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

Headline

OMDb API라는 페이지에서 실제로 영화의 검색된 정보를 API로 요청해서 결과를 응답 받아 처리를 할텐데, 그 때 사용할 사이트로 이동을 해서 headline에 출력할 텍스트를 복사해 적용해보도록 하겠습니다.

OMDb API - The Open Movie Database

1. 프로젝트에 적용하기

1-1. src>components>Headline.vue

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

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

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

1-2. src>routes>Home.vue

<template>
  <Headline />
</template>

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

1-3. 적용확인하기

그런데 화면을 축소하면 전부 왼쪽에 붙어서 출력되는 것을 확인할 수 있습니다.

스타벅스 예제에서는 inner라는 클래스를 만들어 제어를 했지만, 부트스트립에서 제공하는 container라는 개념을 사용해보도록 하겠습니다.

2. Bootstrap - containers

getbootstrap.com

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>

3.여백추가하기

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

  .container {
    padding-top: 40px;
  }