영화 아이템 - 기본 출력, 텍스트 말줄임와 배경 흐림

영화 아이템 - 기본 출력

<style lang="scss" scoped>
.container {
  .movies {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>

MovieList.vue의 MovieItem부분을 movies로 감싸주고 스타일을 줍니다.

 

<template>
  <div
    :style="{backgroundImage: `url(${movie.Poster})`}"
    class="movie">
    <div class="info">
      <div class="year">
        {{ movie.Year }}
      </div>
      <div class="title">
        {{ movie.Title }}
      </div>
    </div>
  </div>
</template>

MovieItem.vue의 template부분입니다.

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

.movie {
  $width: 200px;
  width: $width;
  height: $width * 3 / 2;
  margin: 10px;
  border-radius: 4px;
  background-color: $gray-400;
  background-size: cover;
  overflow: hidden;
  position: relative;
  .info {
    background-color: rgba($black, .3);
    width: 100%;
    padding: 14px;
    font-size: 14px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
</style>

MovieItem.vue의 style부분입니다.

여기까지 기본적으로 출력하는 용도입니다.

영화 소개하는 부분의 길이도 일치하지 않고 기타 스타일도 예쁘게 나오지 않았습니다.

스타일을 좀 더 깔끔하게 나오게 추가 작업이 필요합니다.

 

영화 아이템 - 텍스트 말줄임 표시와 배경 흐림 처리

movie클래스에 마우스 올리면 border생길 수 있게 :hover::after를 추가했습니다.

 

배경 흐림 처리는 오른쪽에 backdrop-filter 속성을 사용할 수 있습니다. firefox브라우저에서 작동 안 됩니다.

더 자세한 내용은 문서를 참조해서 사용하면 됩니다.  backdrop-filter 속성 문서

 

텍스트 말줄임 표시는 text-overflow 속성이 제어하고 있지만 white-space와 overflow과 함께 묶어서 사용해야 됩니다.

더 자세한 내용은 문서를 참조해서 사용하면 됩니다.

text-overflow 속성 문서

white-space 속성 문서