13th-Frontend-Assignment/src/App.css at cea2eb41e6ab61a4b493e3b53a772789cca5be3d · Kim-kiseong/13th-Frontend-Assignment · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* 전체 배경 레이아웃 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Pretendard", sans-serif; /*프로젝트 전체 폰트 적용*/
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
}

.app-layout {
  width: 1549px;
  height: 944px;

  box-sizing: border-box;
  display: flex;

  padding: 80px 464px 526px 445px;
  background-color: #F5F5F5;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

/* 중앙 정렬 컨테이너 */
.todo-container {
  width: 640px; /* 가로 너비*/
  height: 338px;

  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

/* 타이틀 스타일 */
.todo-header {
  margin-bottom: 5px;
}

.header-title {
  font-size: 24px;
  font-weight: 700;
  color: #1F2937;
  font-family: "Pretendard", sans-serif;
  text-align: left;
  margin: 0 0 24px 0;
  line-height: 36px; /* 150% */
}

/* 리스트 간격 */
.todo-list {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 카드 사이 Gap */
}

/* 개별 카드 디자인 */
.todo-card {
  background-color: #ffffff;
  padding: 16px;
  border-radius: 12px; /* border-radius 값 */
  border: 1px solid #e0e0e0; /* 테두리 추가 */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10);/* Shadow 값 */
  transition: transform 0.2s ease;

  display: flex;
  justify-content: flex-start;
  text-align: left;
}


.card-text {
  font-size: 14px;
  color: #1F2937;
  margin: 0;
  font-weight: 400;
}


/* 체크된 텍스트의 스타일 (취소선과 흐린 색상) */
.done-text {
  text-decoration: line-through;
  color: #9CA3AF; /* 시안과 비슷한 흐린 회색 */
}

/* 체크박스와 텍스트를 가로로 예쁘게 배치하기 위해 추가 (필요시) */
.todo-card {
  display: flex;
  align-items: center; /* 세로 중앙 정렬 */
  gap: 12px; /* 체크박스와 글자 사이 간격 */
  /*  기존 테두리, 배경색 등 스타일 유지 */
}


/* 빈 상태 (Empty State) */
.empty-state {
  background-color: #ffffff;
  width: 100%;
  min-height: 233px;
  display: flex;
  flex-direction: column;
  align-items: center;     /* 가로 중앙 정렬 */
  justify-content: center; /* 세로 중앙 정렬 */
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
  gap: 16px; /* 아이콘과 글씨 사이 간격 */
}

/* 클립보드 아이콘 */
.empty-icon {
  font-size: 48px;
}

/* '아직 할 일이 없어요' 텍스트 스타일 */
.empty-text {
  font-size: 14px;
  font-style: normal;
  color: #6B7280;
  margin: 0;
  line-height : 21px;
  text-align: center;

}