기본 css적용

css를 적용하는 방법은 여러가지있다.

라이브러리를 사용해도 되지만 이번에는 css파일을 만들어 js파일에 적용시켜보았다.

//css파일
.expense-date {
  display: flex;
  flex-direction: column;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid #ececec;
  background-color: #2a2a2a;
  color: white;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
}

.expense-date__month {
  font-size: 0.75rem;
  font-weight: bold;
}

.expense-date__year {
  font-size: 0.75rem;
}

.expense-date__day {
  font-size: 1.5rem;
  font-weight: bold;
}

//js 파일
import React from 'react';
import './ExpenseDate.css';

// 지출 내역의 날짜 관리
function ExpenseDate(props) {
  const month = props.date.toLocaleString('ko-KR', { month: 'long' });
  const year = props.date.getFullYear();
  const day = props.date.toLocaleString('ko-KR', { day: '2-digit' });
  return (
    <div className='expense-date'>
      <div className='expense-date__month'>{month}</div>
      <div className='expense-date__year'>{year}</div>
      <div className='expense-date__day'>{day}</div>
    </div>
  );
}

export default ExpenseDate;

css 파일을 만들어 코드를 작성후에 js파일에서 import를 해준다.

이런식으로 선택자를 설정해준 후 적용 시키면 스타일이 입혀지게된다.

 

이렇게 스타일링하면 파일을 따로 만들어야 한다는 번거로움이 있지만 컴포넌트가 복잡해지지 않아서 좋다.