React 기초 (6) : CSS 곁들이기

src 파일에 존재하는 두 js에는 컴포넌트가 정의되어 있고

컴포넌트는 HTML을 반환합니다.

따라서 HTML을 css를 통해 꾸며줄 수 있습니다.

 

아래와 같이 있다면

App.js
Movie.js

아래와 같이 생성한 후에

App.css
Movie.css

적용하고자 하는 각 js에 import해주면 됩니다.

import "./App.css"
import "./Movie.css"

 

---

적용 예는 아래와 같습니다.

import React from "react";
import PropTypes from "prop-types";
import "./Movie.css";

function Movie({ title, summary, poster, year, genres }) {
  return (
    <div class="movie">
      <div class="movie__movie-title">{title}</div>
      <div class="movie__movie-year">{year}</div>
      <ul class="movie__movie-genres">
        {genres.map((tomato, index) => (
          <li key={index} class="movie__movie-genres-name">
            {tomato}
          </li>
        ))}
      </ul>
      <img
        src={poster}
        alt={title}
        title={title}
        class="movie__movie-poster"
      ></img>
      <p class="movie__movie-summary">{summary}</p>
    </div>
  );
}

Movie.propTypes = {
  id: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  poster: PropTypes.string.isRequired,
  year: PropTypes.number.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string)
};

export default Movie;

 

body {
  background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  flex-wrap: wrap;
}

.movie {
  color: white;
  padding: 10px 15px;
  overflow: hidden;
  background-color: rgb(41, 65, 83);
  border: 2px solid black;
  border-radius: 15px;
  width: 500px;
  margin-bottom: 30px;
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin-right: 15px;
  font-weight: 400;
  font-size: 20px;
}

.movie__movie-year {
  font-size: 15px;
  font-weight: 400;
}
.movie p {
  font-weight: 400;
  font-size: 15px;
}

 

---

 

그러나 styled-components로 인해 이와 같은 CSS는 사용 빈도가 급격하게 줄어들기 시작했습니다. styled-componenets를 배웁시다