개인 금융 대시보드 인터페이스

? 중급 개인금융 대시보드 프로젝트 설명

이 프로젝트는 HTML 및 CSS를 사용하여 실제 인터페이스의 구조화, 스타일링 및 향상에 대한 실용적인 소개를 제공합니다. 보다 복잡한 웹 애플리케이션을 위한 기반을 제공하고 학습자가 JavaScript와 반응형 디자인 개념

을 통합할 수 있도록 준비합니다.

프로젝트를 주요 개념, 섹션, 사용된 기술로 분류해 보겠습니다.

---

?️ 프로젝트 개요

목적:

개인 금융 대시보드는 계좌 잔액, 최근 거래, 예산 개요 등 금융 데이터를 표시하도록 설계되었습니다. 이 프로젝트는 학습자가 Flexbox 및 Grid와 같은 고급 CSS 기술을 사용하여 구조화되고 스타일이 지정된 인터페이스를 만드는 방법을 이해하는 데 도움이 됩니다.

주요 구성요소:

1. 사이드바 탐색
2. 메인 콘텐츠 영역 (개요 카드 및 거래 표)
3. 머리글과 바닥글

---

? HTML 분석(index.html)

? 1. HTML 구조

페이지는 다양한 의미 섹션으로 구분됩니다.

• 사이드바(
  ): 탐색 링크가 포함되어 있습니다.
• 주요 콘텐츠 (
• 헤더(
  ): 페이지 제목과 프로필 아이콘을 표시합니다.
• 바닥글(): 저작권 정보가 포함되어 있습니다.

도입된 개념:

1. 의미론적 HTML:

   • 탐색, 머리글, 섹션, 바닥글: 더 나은 가독성과 SEO 이점을 제공합니다.

2. 목록 탐색:

   • 순서가 지정되지 않은 목록의 경우
   • 클릭 가능한 링크에 대한 태그입니다.

3. 스타일링 수업:

   • 요소에는 사이드바, 기본 콘텐츠, 프로필 아이콘과 같은 클래스가 할당되어 CSS에서 스타일을 지정할 수 있습니다.

---

? CSS 분석(styles.css)

? 1. 일반 초기화

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  color: #333;
}

• 목적: 브라우저 전반에 걸쳐 일관된 스타일을 보장하기 위해 기본 글꼴, 여백, 패딩 및 배경색을 설정합니다.

---

? 2. Flexbox를 사용한 대시보드 레이아웃

.dashboard-container {
  display: flex;
  min-height: 100vh;
}

• 설명:
  • display: flex: 메인 컨테이너를 플렉스 컨테이너로 만들어 사이드바와 메인 콘텐츠를 나란히 배치할 수 있습니다.
  • min-height: 100vh: 대시보드가 ​​뷰포트의 전체 높이를 차지하도록 합니다.

---

? 3. 사이드바 스타일링

.sidebar {
  background-color: #2a3f54;
  color: white;
  padding: 20px;
  width: 250px;
}

.sidebar a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.sidebar a:hover {
  color: #1abc9c;
}

• 주요 개념:
  • 배경색: 사이드바의 어두운 테마를 설정합니다.
  • 링크: 부드러운 색상 변경을 위해 전환을 사용하여 호버 효과로 스타일을 지정했습니다.

---

? 4. 주요 내용 및 헤더

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.profile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

• 헤더용 Flexbox:

  • justify-content: space-between: 제목을 왼쪽에, 프로필 아이콘을 오른쪽에 배치합니다.
  • align-items: center: 항목을 수직으로 정렬합니다.

• 둥근 이미지:

  • border-radius: 50%는 프로필 아이콘을 원형으로 만듭니다.

---

? 5. 개요 카드

.overview-cards {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.card {
  background-color: #1abc9c;
  color: white;
  padding: 20px;
  border-radius: 10px;
  flex: 1;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

• Flexbox 레이아웃:

  • 디스플레이: flex는 카드를 수평으로 정렬합니다.
  • gap: 20px는 카드 사이에 간격을 만듭니다.
  • flex: 1은 카드가 고르게 분포되도록 합니다.

• 스타일링 기법:

  • 배경색으로 시각적 매력을 더해줍니다.
  • 박스 섀도우는 카드에 깊이를 더해줍니다.

---

? 6. 거래 테이블

.transactions table {
  width: 100%;
  border-collapse: collapse;
}

.transactions th, .transactions td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.transactions th {
  background-color: #2a3f54;
  color: white;
}

• 테이블 스타일링:
  • border-collapse: 축소는 표 테두리 사이의 간격을 제거합니다.
  • 셀의 일관된 패딩 및 테두리.
  • 대조를 위해 어두운 배경으로 머리글 행(번째) 스타일을 지정했습니다.

---

? 학습된 개념

1. 시맨틱 HTML:
   
   가독성과 구조가 향상되었습니다.

2. 플렉스박스:
   
   레이아웃 디자인을 단순화하여 반응형 인터페이스를 더 쉽게 만들 수 있습니다.

3. 탐색 메뉴:
   
   링크를 사용하여 사이드바를 구성하고 스타일을 지정하는 방법

4. 카드 및 패널:
   
   시각적으로 매력적이고 재사용 가능한 구성 요소를 만듭니다.

5. 테이블:
   
   구조화된 방식으로 데이터 형식을 지정합니다.

6. 호버 효과 및 전환:
   
   탐색 링크에 상호작용성을 추가합니다.

GitHub에서 프로젝트 보기