우리FISA - Frontend Toy Project

Frontend-1st-Resume

👻 팀 소개

홍찬의	황순범	정성윤	이규한
팀장 프로젝트 관리	팀원 CSS	팀원 HTML	팀원 HTML

---

Git Pages

Live Demo

🎨 UI 스타일 가이드

Figma의 ConcreteDesign System 참고

• LayOut Grids 📏

Layout Class	Setting
컨테이너	너비 100% / 마진 32px / 최대 1920px / 최소 1080px
분할 컨테이너	너비 100% / 디스플레이 플렉스 / 갭 16px
콘텐츠 컨테이너	너비 100% / 높이 핏 콘텐트 / 마진 16px
카드 컨테이너	너비 100% / 최대 360px / 마진 16px

• Typography 📝 - Tailwind 적용

  
  • Tailwind의 FontSize로 style 적용

• Font Color 🖍️ - 우리은행 CI 색상 사용

  
  • 제목 1 : BLACK (000000)
    
  • 제목 2 : WOORI LIGHT BLUE (20C4F4)
    
  • 제목 3 : WOORI DEEP BLUE (0067AC)
    
  • 제목 4 : BLACK (000000)

• Line Design 〰️

  .line {
  width: 100%; /* 너비를 부모 요소의 너비에 맞게 설정 */
  height: 1px; /* 높이를 1px로 설정 */
  background: #e0e0e0; /* 배경색을 회색으로 설정 */
  margin: 16px 0; /* 상하 margin을 16px로 설정 */
  }

• Image Size 🖼️

  • 이미지 1 - 너비 : 10%, 비율 3:4 고정, cover 이미지
  • 이미지 2 - 글꼴에 맞춘 가변형 크기, 줄 높이에 따른 rem 단위
  • 이미지 3 : 카드 크기의 60% x 100%

• Punctuation Mark ⚫️

  

  • 문장기호1 특수문자 사용

• Class Name Rule 📌

  • 제목 1 : text_xl
  • 제목 2 : text_l
  • 제목 3 : text_m
  • 제목 4 : text_s
  • 이미지 1 : img_profile
  • 이미지 2 : img_tech
  • 이미지 3 : img_card
  • background : img_background
  • 레이아웃 : container
  • 카드 : container_card
  • 컨텐츠 별 : container_content

• Branch Name Rule 🪵

  • main
  • dev
  • feature/{작업단위}

• Commit Rule 🔃

  • Gitmoji 사용 연습하기
  • 작업 내용 요약

🤖 Prototype

• Resume Main Page

  

• Project Page

  

Lighthouse

개선 전

개선 후