[React]GitHub Pages + React로 나만의 포트폴리오 만들기 - 2. Archiving, Skills, Project, Contact 컴포넌트 생성 및 기본 CSS 작성 + 글씨체 변경

1. 컴포넌트 생성

ArchivingDetail.js

import React from "react";

import Card from "../components/Card";
import "../Details_css/ArchivingDetail.css";

const Archiving = () => {
  return (
    <div className="archiving">
      <h1 className="archiving-title">
        <a name="Archiving">Archiving</a>
      </h1>
      <div className="card-wrapper">
        <Card className="github-card">
          <h2 className="github-title">GitHub</h2>
          <a href="https://github.com/SeungjaeLee00">
            github.com/SeungajaeLee00
          </a>
          <p>작업한 소스를 업로드해 둔 저장소입니다.</p>
        </Card>
        <Card className="blog-card">
          <h2 className="blog-title">Blog</h2>
          <a href="https://jaejae-sosp.tistory.com">JAEJAE imojeomo</a>
          <p>공부 기록, 프로젝트 진행 과정을 기록해둔 블로그입니다.</p>
        </Card>
      </div>
    </div>
  );
};

export default ArchivingDetail;

ArchivingDetail.css

.archiving {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
}

.archiving-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.card-wrapper {
  display: flex;
  flex-direction: row; /* 기본적으로 가로 정렬 */
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap; /* 줄 바꿈 없이 가로로 정렬 */
}

/* 기본 스타일 */
.github-card,
.blog-card {
  width: 100%;
  max-width: 400px; /* 기본 카드 너비 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  margin: 10px;
  white-space: nowrap;
}

- 그 외의 Skills, Project, Contact 컴포넌트 구성 동일

 

2. 글씨체 적용

1) 눈누 사이트 활용

https://noonnu.cc

눈누

2) 원하는 폰트 다운받고 src 폴더 내 넣어주기

index.css

...
@font-face {
  font-family: "Pretendard";
  src: url("./fonts/Pretendard-Regular.ttf") format("woff2");
}
...

App.css

.App {
  ...
  font-family: "KimjungchulMyungjo-Regular";
}

 

3. 결과 🎉