⭐ Award.tsx 코드 구현 및 의미

• 수상 내용 칸만 상세히 살펴볼 것이다.

1. 수상 내역

div

• border-t: 이 <div>의 위쪽에만 1px 테두리를 만든다.

• border-gray-700/50: 테두리 색상을 어두운 회색으로 지정한다.
  => /50: 이 색상의 불투명도를 50%로 설정한다.

• pt-6: 이 <div>의 안쪽에, 위쪽 테두리와 내용물 사이에 1.5rem(24px)의 여백을 준다.

h4

• <h4>는 <h3>(카드 제목)보다 한 단계 낮은 소제목을 의미한다.

• text-xl: 텍스트 크기를 1.25rem(20px)로 설정한다.

• font-bold: font-weight: 700. 텍스트를 굵게 만든다.

• text-white: 텍스트 색상을 흰색으로 설정한다.

p (기관)

• text-indigo-300: 텍스트 색상을 밝은 남색(indigo) 계열로 설정한다.

• font-semibold: font-weight: 600. 텍스트 굵기를 세미볼드로 설정한다.

• my-1: margin-top: 0.25rem (4px)과 margin-bottom: 0.25rem (4px)을 동시에 설정한다.

p (날짜)

• text-gray-400: 텍스트 색상을 회색으로 설정한다.

p (내용)

• text-gray-300: 텍스트 색상을 밝은 회색으로 설정한다.
• mt-2: 위쪽에 0.5rem (8px)의 여백을 준다.

---

🩷 결과

• 화면