개인 금융 대시보드 인터페이스-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

Barbara Streisand

Dec 22, 2024 am 09:22 AM

Personal Finance Dashboard Interface

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

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

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

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

?️ 프로젝트 개요

목적:

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

주요 구성요소:

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

? HTML 분석(index.html)

? 1. HTML 구조

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

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

도입된 개념:

의미론적 HTML:
- 탐색, 머리글, 섹션, 바닥글: 더 나은 가독성과 SEO 이점을 제공합니다.
목록 탐색:
- 클릭 가능한 링크에 대한 태그입니다.

스타일링 수업:

요소에는 사이드바, 기본 콘텐츠, 프로필 아이콘과 같은 클래스가 할당되어 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;
}

로그인 후 복사