[노마드코더/ReactJS로 영화 웹 서비스 만들기]4.4 Styles Timelapse & 4.5 Cutting the summary

 

4.4 Styles Timelapse

<App.css>

* {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    background-color: #eff3f7;
    height: 100%;
  }

  html,
  body,
  #potato,
  .container {
    height: 100%;
    display: flex;
    justify-content: center;
  }

  .loader {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight:300;
  }

  .movies {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 50px;
    padding-top: 70px;
    width: 80%;
  }

• <Movie.css>
• .movies .movie { width: 45%; background-color: white; margin-bottom: 70px; display: flex; align-items: flex-start; justify-content: space-between; font-weight: 300; padding: 20px; border-radius: 5px; color: #adaeb9; box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025); } .movie img { position: relative; top: -50px; max-width: 150px; width:100%; margin-right: 30px; box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025); } .movie .movie__title, .movie .movie__year { margin: 0; font-weight: 300; } .movie .movie__title { margin-bottom: 5px; font-size: 24px; color: #2c2c2c; } .movie .movie__genres { list-style: none; padding: 0; margin: 0; display: flex; margin: 5px 0px; } .movie__genres li, .movie .movie__year { margin-right: 10px; font-size: 14px; }

4.5 Cutting the summary

summary 동일한 길이로 자르기

• <p className="movie_summary">{summary.slice(0,140)}...</p>