# 4.4. Styles TimeLapse, #4.5. Cutting the Summary

이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 
다소 불친절한 설명이 있을 수 있음을 미리 알립니다.

• box-sizing : border-box 테두리를 포함한 크기를 지정할 수 있다.
• justify는 메인축 방향으로 정렬
• align은 수직축방향으로 정렬

1. 다음과 같은 상황에서 movie summary를 각 영화마다 같은 크기로 편집할 필요가 있다.
   따라서 Array를 편집하는 방법에 대해 알아보자.

function Movie({ year, title, summary, poster, genres }) {
  return (
    <div className="movie">
      <img src={poster} alt={title} title={title} />
      <div className="movie__data">
        <h3 className="movie__title">{title}</h3>
        <h5 className="movie__year">{year}</h5>
        <ul className="movie__genres">
          {genres.map((genre, index) => (
            <li key={index} className="genres__genre">
              {genre}
            </li>
          ))}
        </ul>
        <p className="movie__summary">{summary.slice(0, 180)}...</p>
      </div>
    </div>
  );
}

• array.slice(start, end) 를 사용하면 start, end 인덱스에 해당하는 문자열을 잘라준다.
• 결과는 다음과 같다.