프로젝트: 이력서

07. Contact.jsx — EmailJS로 이메일 전송 이번 단계에서 할 일 Contact 폼에서 입력한 내용을 실제 이메일로 전송한다. EmailJS — 백엔드 서버 없이 프론트엔드에서 바로 이메일을 보내주는 서비스이다. 피그마 디자인 분석 │ ─── contacts ──────────────────────────────── │ │ │ │ Name │ │ ┌────────────────────────────────────────┐ │ │ │ Value │ │ 높이: 40px │ └────────────────────────────────────────┘ │ │ │ … 더 읽기

01. App.jsx — 전체 레이아웃 조립 이번 단계에서 할 일 만들 컴포넌트들을 App.jsx 에 미리 배치합니다. 지금은 빈 껍데기만 만들고, 다음 단계에서 하나씩 채워나갑니다. App.jsx 역할 App.jsx ├── <Nav /> ← 네비게이션 ├── <Hero /> ← 히어로 섹션 ├── <main> │ ├── <AboutMe /> ← 소개 │ ├── <Projects /> ← 프로젝트 │ └── <Contact … 더 읽기

02. index.css — 기본 스타일 설정 이번 단계에서 할 일 모든 컴포넌트에 공통으로 적용되는 기본 스타일을 작성합니다. 왜 초기화가 필요한가요? 브라우저(Chrome, Firefox, Edge 등)마다 기본 스타일이 조금씩 다릅니다. 예를 들어 <h1> 태그의 기본 크기나 여백이 브라우저마다 다를 수 있습니다. 이 프로젝트는 reset-css 라이브러리로 초기화를 합니다. npm install 시 이미 설치되어 있으며, @import 로 불러옵니다. npm … 더 읽기

09. 완성 및 오류 정리 최종 파일 목록 src/ ├── main.jsx ✅ 라우터 연결 ├── router.js ✅ 라우터 설정 ├── App.jsx ✅ 01단계 ├── index.css ✅ 각 단계에서 추가 └── components/ ├── SectionTitle.jsx ✅ 05단계 ├── Nav.jsx ✅ 03단계 ├── Hero.jsx ✅ 04단계 ├── AboutMe.jsx ✅ 05단계 ├── Projects.jsx ✅ 06단계 ├── Contact.jsx ✅ 07단계 … 더 읽기

05. AboutMe.jsx — 소개 섹션 이번 단계에서 할 일 학력, 자격사항, 인적사항을 보여주는 소개 섹션을 만듭니다. 재사용 컴포넌트를 만드는 방법을 배웁니다. 피그마 디자인 분석 │ ─── ABOUT ME ──────────────────────────────────── │ │ 끈기와 열정으로 성장하는 오성의입니다. │ │ │ │ ┌──────────────────────┬──────────────────────┐ │ │ │ 학력 및 교육사항 │ 인적사항 │ │ │ │ 22.10-22.10 | 수료 … 더 읽기

1. 피그마(Figam Design) 피그마 디자인 파일을 Make로 전송한다. 2. 메이크(Figam Make) AI 크레딧: stater 플랜의 경우 매달 500크레딧 생성 일일한도 150 크레딧 소진 비용은 코드의 복잡도에 따라 다름 2.1. 생성하기 Make보기 피그마 디자인 파일의 프레임에서 우클릭하여 Make로 전송 선택 아래의 프롬프트 입력 후 메시지 전송 아래 요구사항에 맞게 구현해 [요구사항] React 순수한 css 외부파일(tailwind css … 더 읽기

04. Hero.jsx — 히어로 섹션 이번 단계에서 할 일 페이지 상단의 인상적인 소개 영역(히어로 섹션)을 만듭니다. 피그마 디자인 분석 ┌──────────────────────────────────────────────────┐ │ │ │ Title ← 폰트 72px, 색상 #0c0c0d │ │ Subtitle ← 폰트 32px, 색상 #0c0c0d │ │ │ │ [Github] [Resume] │ │ ↑ 밝은버튼 ↑ 어두운버튼 │ │ #e3e3e3 #2c2c2c (흰 텍스트) … 더 읽기

06. Projects.jsx — 프로젝트 섹션 이번 단계에서 할 일 프로젝트 목록을 데이터 배열로 관리하고, map으로 화면에 출력하는 방법을 배웁니다. 피그마 디자인 분석 │ ─── Projects ──────────────────────────────────── │ │ │ │ ┌──────────────────────┬───────────────────────┐ │ │ │ ● Project 01 │ │ │ │ │ │ │ │ │ │ 동대문구청 │ 이미지 영역 │ │ │ │ … 더 읽기

08. Footer.jsx — 하단 푸터 이번 단계에서 할 일 SNS 아이콘 링크와 저작권 정보가 담긴 푸터를 만듭니다. 피그마 디자인 분석 ┌──────────────────────────────────────────────────┐ │ │ │ Thanks X IG YT LI │ │ │ │ copyright All right │ │ │ └──────────────────────────────────────────────────┘ 높이: 324px 요소 값 "Thanks" 폰트 20px, #1e1e1e SNS 아이콘 크기 24px × 24px 아이콘 … 더 읽기

03. Nav.jsx — 네비게이션 바 이번 단계에서 할 일 상단 네비게이션 바를 만듭니다. 클릭한 메뉴가 회색 pill 배경으로 바뀌는 기능도 구현합니다. 피그마 디자인 분석 ┌──────────────────────────────────────────────────┐ │ [로고] ┌──────┐ │ │ │ Home │ AboutMe Projects │ 높이: 99px │ └──────┘ │ └──────────────────────────────────────────────────┘ 요소 값 전체 높이 99px 배경색 #ffffff 활성 메뉴 배경 #f5f5f5, 둥근 pill … 더 읽기