+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/signup.html b/html/signup.html
similarity index 100%
rename from signup.html
rename to html/signup.html
From c82ee36da46c41cd5e81b2fdd482b3f0ca22ecb3 Mon Sep 17 00:00:00 2001
From: kimhansol2 <119918073+kimhansol2@users.noreply.github.com>
Date: Sat, 29 Mar 2025 21:13:07 +0900
Subject: [PATCH 16/39] 'feat:css_main'
---
css/main.css | 216 ++++++++++++++++++++++++++++++
find_ID.HTML => html/find_ID.HTML | 0
find_pw.HTML => html/find_pw.HTML | 0
html/main.HTML | 92 ++++++++-----
4 files changed, 272 insertions(+), 36 deletions(-)
create mode 100644 css/main.css
rename find_ID.HTML => html/find_ID.HTML (100%)
rename find_pw.HTML => html/find_pw.HTML (100%)
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..25c893a
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,216 @@
+/* 전체 페이지 스타일 */
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f4;
+}
+
+/* 네비게이션 바 스타일 */
+header {
+ background-color: #333;
+ padding: 10px 0;
+}
+
+nav ul {
+ list-style: none;
+ display: flex;
+ justify-content: center;
+ padding: 0;
+ margin: 0;
+}
+
+nav ul li {
+ margin: 0 15px;
+}
+
+nav ul li a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+nav ul li a:hover {
+ text-decoration: underline;
+}
+
+/* 메인 컨테이너 - 왼쪽 열과 오른쪽 열로 구성 */
+main {
+ display: grid;
+ grid-template-columns: 2fr 1fr; /* 왼쪽 열: 2, 오른쪽 열: 1 */
+ grid-template-rows: auto auto; /* 왼쪽 열은 두 행 (메인 그래프, 하단 패널) */
+ gap: 20px;
+ padding: 20px;
+ align-items: stretch;
+}
+
+/* 메인 그래프 (왼쪽 열 상단) */
+.coin-graph {
+ grid-column: 1;
+ grid-row: 1;
+ background: white;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+/* 코인 목록 (오른쪽 열 전체 높이 차지) */
+.coin-list {
+ grid-column: 2;
+ grid-row: 1 / span 2;
+ background: white;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ height: 100%;
+ overflow-y: auto;
+}
+
+.coin-list table {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 8px;
+}
+
+.coin-list th,
+.coin-list td {
+ border: 1px solid #ddd;
+ padding: 12px;
+ text-align: center;
+}
+
+.coin-list th {
+ background-color: #333;
+ color: white;
+ font-size: 16px;
+}
+
+.coin-list td {
+ background-color: #fff;
+ font-size: 14px;
+}
+
+/* 왼쪽 열 하단 영역을 묶는 컨테이너 */
+.bottom-panel {
+ grid-column: 1;
+ grid-row: 2;
+ display: grid;
+ grid-template-columns: 1fr 1fr; /* 미니 그래프와 보유자산을 나란히 배치 */
+ gap: 20px;
+}
+
+/* 미니 그래프 및 코인 데이터 영역 */
+.coin-details {
+ background: white;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+/* 보유자산 및 거래 패널 */
+.trade-panel {
+ background: white;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+/* 보유자산 및 거래 내부 스타일 */
+.trade-buttons {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 15px;
+}
+
+.trade-buttons button {
+ flex: 1;
+ margin: 0 5px;
+ padding: 10px;
+ border: none;
+ background-color: #007bff;
+ color: white;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.trade-buttons button:hover {
+ background-color: #0056b3;
+}
+
+/* 입력 필드 스타일 */
+.input-group {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
+
+.input-group label {
+ flex: 1;
+ text-align: left;
+}
+
+.input-group input {
+ flex: 2;
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+.adjust-buttons {
+ display: flex;
+ gap: 5px;
+}
+
+.adjust-buttons button {
+ padding: 5px 10px;
+ border: none;
+ background-color: #28a745;
+ color: white;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.adjust-buttons button:hover {
+ background-color: #218838;
+}
+
+/* 퍼센트 버튼 */
+.percentage-buttons {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
+
+.percentage-buttons button {
+ flex: 1;
+ margin: 0 5px;
+ padding: 8px;
+ border: none;
+ background-color: #ffc107;
+ color: black;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.percentage-buttons button:hover {
+ background-color: #e0a800;
+}
+
+/* 매수/매도 버튼 */
+.trade-action {
+ width: 100%;
+ padding: 12px;
+ border: none;
+ background-color: #dc3545;
+ color: white;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.trade-action:hover {
+ background-color: #c82333;
+}
diff --git a/find_ID.HTML b/html/find_ID.HTML
similarity index 100%
rename from find_ID.HTML
rename to html/find_ID.HTML
diff --git a/find_pw.HTML b/html/find_pw.HTML
similarity index 100%
rename from find_pw.HTML
rename to html/find_pw.HTML
diff --git a/html/main.HTML b/html/main.HTML
index 89dc1dd..28c7d1f 100644
--- a/html/main.HTML
+++ b/html/main.HTML
@@ -4,8 +4,7 @@
코인 거래 메인페이지
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
미니 그래프
+
+
+
+
고가: 0
+
저가: 0
+
거래량: 0
+
거래대금: 0
+
-