mdj1412 commited on
Commit
e9359a3
β€’
1 Parent(s): 2a479da

delete unnecessary files

Browse files
static/css/chartStyle.css DELETED
@@ -1,132 +0,0 @@
1
- /* id : "#" */
2
- .myChart-container {
3
- /* μ†μ„±μ˜ μš”μ†Œ λ„ˆλΉ„λ₯Ό 지정 */
4
- width: 60vw;
5
-
6
- /* μ†μ„±μ˜ μš”μ†Œμ˜ 높이λ₯Ό 지정 */
7
- height: 30vh;
8
-
9
- /*
10
- [ margin νƒœκ·Έ ]
11
- margin-top (상단 μ—¬λ°±)
12
- margin-right (였λ₯Έμͺ½ μ—¬λ°±)
13
- margin-bottom (μ•„λž˜ μ—¬λ°±)
14
- margin-left (μ™Όμͺ½ μ—¬λ°±)
15
-
16
- 지정값은 px, cm, %둜 지정할 수 μžˆλ‹€.
17
- μŒμˆ˜κ°’λ„ 지정 κ°€λŠ₯(ex. -10px)
18
-
19
- * 4λ©΄ ν•œκΊΌλ²ˆμ— margin μ§€μ •ν•˜κΈ°
20
- ex) margin: 5px 7px 3px 0px;
21
- (μœ„, 였λ₯Έμͺ½, μ•„λž˜, μ™Όμͺ½)
22
- * 4면이 λͺ¨λ‘ 같을 λ•Œ margin μ§€μ •ν•˜κΈ°
23
- ex) margin: 5px;
24
- * μœ„, 였λ₯Έμͺ½&μ™Όμͺ½, μ•„λž˜ margin μ§€μ •ν•˜κΈ°
25
- ex) margin: 5px 10px 0px;
26
- * μœ„&μ•„λž˜, 였λ₯Έμͺ½&μ™Όμͺ½ margin μ§€μ •ν•˜κΈ°
27
- ex) margin: 5px 10px;
28
- * margin μžλ™ μ§€μ •ν•˜κΈ°
29
- ex) margin: auto 0;
30
- (μœ„μ•„λž˜ 값이 μžλ™, μ’Œμš°κ°€ 0px)
31
- ex) margin-left: auto;
32
-
33
- */
34
- margin: 40px auto;
35
- padding-bottom: 13%;
36
- }
37
-
38
-
39
- .table {
40
- /*
41
- [ align-items νƒœκ·Έ ]
42
- flex-box μš”μ†Œμ˜ 수직 λ°©ν–₯ μ •λ ¬ 방식을 μ„€μ •
43
- ex. flex-start, flex-end, center
44
- */
45
- align-items: center;
46
-
47
- /*
48
- [ justify-content νƒœκ·Έ ]
49
- flex-box μš”μ†Œμ˜ μˆ˜ν‰ λ°©ν–₯ μ •λ ¬ 방식을 μ„€μ •
50
- ex. flex-start, flex-end, center
51
- */
52
- justify-content: center;
53
-
54
-
55
- /*
56
- [ margin νƒœκ·Έ ]
57
- margin-top (상단 μ—¬λ°±)
58
- margin-right (였λ₯Έμͺ½ μ—¬λ°±)
59
- margin-bottom (μ•„λž˜ μ—¬λ°±)
60
- margin-left (μ™Όμͺ½ μ—¬λ°±)
61
-
62
- 지정값은 px, cm, %둜 지정할 수 μžˆλ‹€.
63
- μŒμˆ˜κ°’λ„ 지정 κ°€λŠ₯(ex. -10px)
64
-
65
- * 4λ©΄ ν•œκΊΌλ²ˆμ— margin μ§€μ •ν•˜κΈ°
66
- ex) margin: 5px 7px 3px 0px;
67
- (μœ„, 였λ₯Έμͺ½, μ•„λž˜, μ™Όμͺ½)
68
- * 4면이 λͺ¨λ‘ 같을 λ•Œ margin μ§€μ •ν•˜κΈ°
69
- ex) margin: 5px;
70
- * μœ„, 였λ₯Έμͺ½&μ™Όμͺ½, μ•„λž˜ margin μ§€μ •ν•˜κΈ°
71
- ex) margin: 5px 10px 0px;
72
- * μœ„&μ•„λž˜, 였λ₯Έμͺ½&μ™Όμͺ½ margin μ§€μ •ν•˜κΈ°
73
- ex) margin: 5px 10px;
74
- * margin μžλ™ μ§€μ •ν•˜κΈ°
75
- ex) margin: auto 0;
76
- (μœ„μ•„λž˜ 값이 μžλ™, μ’Œμš°κ°€ 0px)
77
- ex) margin-left: auto;
78
-
79
- */
80
- margin: 20px auto;
81
-
82
-
83
- /*
84
- [ text-align νƒœκ·Έ ]
85
- ν…μŠ€νŠΈμ˜ μ •λ ¬ λ°©ν–₯을 μ„€μ •
86
-
87
- left: μ™Όμͺ½ μ •λ ¬
88
- right: 였λ₯Έμͺ½ μ •λ ¬
89
- center: 쀑앙 μ •λ ¬
90
- justify: μ–‘μͺ½ μ •λ ¬ (μžλ™ μ€„λ°”κΏˆμ‹œ 였λ₯Έμͺ½ 경계선 λΆ€λΆ„ 정리)
91
- */
92
- text-align: center;
93
-
94
-
95
- padding-top: 50px;
96
- }
97
-
98
-
99
- .table .title-width {
100
- width: 10px;
101
- text-align: center;
102
- }
103
-
104
-
105
- .table .table-title {
106
- font-size: 50px;
107
- }
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
- /* h1, h2 νƒœκ·Έ λΆ€λΆ„ */
121
- .gohome, .goticker {
122
- text-decoration: none;
123
- }
124
-
125
-
126
-
127
- .table .news-table .news.diff.up {
128
- color: #ed2a61;
129
- }
130
- .table .news-table .news.diff.down {
131
- color: #3c6ffa;
132
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
static/css/news.css DELETED
@@ -1,216 +0,0 @@
1
- /* ner κ΄€λ ¨ */
2
-
3
- .ner-box {
4
- width: calc(92%); /* μ†μ„±μ˜ μš”μ†Œ λ„ˆλΉ„λ₯Ό 지정 */
5
- height: 500px; /* μ†μ„±μ˜ μš”μ†Œμ˜ 높이λ₯Ό 지정 */
6
-
7
-
8
- /*
9
- [ align-items νƒœκ·Έ ]
10
- flex-box μš”μ†Œμ˜ 수직 λ°©ν–₯ μ •λ ¬ 방식을 μ„€μ •
11
- ex. flex-start, flex-end, center
12
- */
13
- align-items: center;
14
-
15
- /*
16
- [ justify-content νƒœκ·Έ ]
17
- flex-box μš”μ†Œμ˜ μˆ˜ν‰ λ°©ν–₯ μ •λ ¬ 방식을 μ„€μ •
18
- ex. flex-start, flex-end, center
19
- */
20
- justify-content: center;
21
-
22
- /*
23
- [ text-align νƒœκ·Έ ]
24
- ν…μŠ€νŠΈμ˜ μ •λ ¬ λ°©ν–₯을 μ„€μ •
25
-
26
- left: μ™Όμͺ½ μ •λ ¬
27
- right: 였λ₯Έμͺ½ μ •λ ¬
28
- center: 쀑앙 μ •λ ¬
29
- justify: μ–‘μͺ½ μ •λ ¬ (μžλ™ μ€„λ°”κΏˆμ‹œ 였λ₯Έμͺ½ 경계선 λΆ€λΆ„ 정리)
30
- */
31
- text-align: center;
32
-
33
-
34
- /*
35
- [ margin νƒœκ·Έ ]
36
- margin-top (상단 μ—¬λ°±)
37
- margin-right (였λ₯Έμͺ½ μ—¬λ°±)
38
- margin-bottom (μ•„λž˜ μ—¬λ°±)
39
- margin-left (μ™Όμͺ½ μ—¬λ°±)
40
-
41
- 지정값은 px, cm, %둜 지정할 수 μžˆλ‹€.
42
- μŒμˆ˜κ°’λ„ 지정 κ°€λŠ₯(ex. -10px)
43
-
44
- * 4λ©΄ ν•œκΊΌλ²ˆμ— margin μ§€μ •ν•˜κΈ°
45
- ex) margin: 5px 7px 3px 0px;
46
- (μœ„, 였λ₯Έμͺ½, μ•„λž˜, μ™Όμͺ½)
47
- * 4면이 λͺ¨λ‘ 같을 λ•Œ margin μ§€μ •ν•˜κΈ°
48
- ex) margin: 5px;
49
- * μœ„, 였λ₯Έμͺ½&μ™Όμͺ½, μ•„λž˜ margin μ§€μ •ν•˜κΈ°
50
- ex) margin: 5px 10px 0px;
51
- * μœ„&μ•„λž˜, 였λ₯Έμͺ½&μ™Όμͺ½ margin μ§€μ •ν•˜κΈ°
52
- ex) margin: 5px 10px;
53
- * margin μžλ™ μ§€μ •ν•˜κΈ°
54
- ex) margin: auto 0;
55
- (μœ„μ•„λž˜ 값이 μžλ™, μ’Œμš°κ°€ 0px)
56
- ex) margin-left: auto;
57
-
58
- */
59
- margin: 1rem;
60
-
61
-
62
- min-height: 1.2rem;
63
- border: 0.5px solid grey;
64
- padding: 0.5rem 1rem;
65
- }
66
-
67
-
68
-
69
- /* NER label_ */
70
- .entities .entity_person {
71
- background-color: #aa9cfc;
72
- }
73
-
74
- .entities .entity_org {
75
- background-color: #7aecec;
76
- }
77
-
78
- .entities .entity_fac {
79
- background-color: #9cc9cc;
80
- }
81
-
82
- .entities .entity_gpe {
83
- background-color: #feca74;
84
- }
85
-
86
- .entities .entity_product {
87
- background-color: #bfeeb7;
88
- }
89
-
90
- .entities .none {
91
- background-color: transparent;
92
- }
93
-
94
- /* 마우슀 μ˜¬λ Έμ„ λ•Œ, 보이게 ν•˜λŠ” 것 */
95
- .entities .show-label {
96
- display: none;
97
- }
98
-
99
- .entities .entity_person:hover .show-label,
100
- .entities .entity_org:hover .show-label,
101
- .entities .entity_fac:hover .show-label,
102
- .entities .entity_gpe:hover .show-label,
103
- .entities .entity_product:hover .show-label {
104
- display: block;
105
- }
106
-
107
-
108
-
109
-
110
-
111
- /* Model κ΄€λ ¨ */
112
-
113
- /* id : "#" */
114
- #model {
115
- /*
116
- [ text-align νƒœκ·Έ ]
117
- ν…μŠ€νŠΈμ˜ μ •λ ¬ λ°©ν–₯을 μ„€μ •
118
-
119
- left: μ™Όμͺ½ μ •λ ¬
120
- right: 였λ₯Έμͺ½ μ •λ ¬
121
- center: 쀑앙 μ •λ ¬
122
- justify: μ–‘μͺ½ μ •λ ¬ (μžλ™ μ€„λ°”κΏˆμ‹œ 였λ₯Έμͺ½ 경계선 λΆ€λΆ„ 정리)
123
- */
124
- text-align: center;
125
- }
126
-
127
- /* id : "#" */
128
- #text-input {
129
- width: calc(100% / 2); /* μ†μ„±μ˜ μš”μ†Œ λ„ˆλΉ„ */
130
- height: 78px; /* μ†μ„±μ˜ μš”μ†Œμ˜ 높이λ₯Ό 지정 */
131
- word-break: break-all;
132
- }
133
-
134
-
135
- .text-output {
136
- width: calc(100% * (2/3)); /* μ†μ„±μ˜ μš”μ†Œ λ„ˆλΉ„ */
137
- min-height: 10rem;
138
-
139
-
140
-
141
- /*
142
- [ margin νƒœκ·Έ ]
143
- margin-top (상단 μ—¬λ°±)
144
- margin-right (였λ₯Έμͺ½ μ—¬λ°±)
145
- margin-bottom (μ•„λž˜ μ—¬λ°±)
146
- margin-left (μ™Όμͺ½ μ—¬λ°±)
147
-
148
- 지정값은 px, cm, %둜 지정할 수 μžˆλ‹€.
149
- μŒμˆ˜κ°’λ„ 지정 κ°€λŠ₯(ex. -10px)
150
-
151
- * 4λ©΄ ν•œκΊΌλ²ˆμ— margin μ§€μ •ν•˜κΈ°
152
- ex) margin: 5px 7px 3px 0px;
153
- (μœ„, 였λ₯Έμͺ½, μ•„λž˜, μ™Όμͺ½)
154
- * 4면이 λͺ¨λ‘ 같을 λ•Œ margin μ§€μ •ν•˜κΈ°
155
- ex) margin: 5px;
156
- * μœ„, 였λ₯Έμͺ½&μ™Όμͺ½, μ•„λž˜ margin μ§€μ •ν•˜κΈ°
157
- ex) margin: 5px 10px 0px;
158
- * μœ„&μ•„λž˜, 였λ₯Έμͺ½&μ™Όμͺ½ margin μ§€μ •ν•˜κΈ°
159
- ex) margin: 5px 10px;
160
- * margin μžλ™ μ§€μ •ν•˜κΈ°
161
- ex) margin: auto 0;
162
- (μœ„μ•„λž˜ 값이 μžλ™, μ’Œμš°κ°€ 0px)
163
- ex) margin-left: auto;
164
-
165
- */
166
- margin: 20px auto;
167
-
168
- /*
169
- [ border νƒœκ·Έ ]
170
- ν•΄λ‹Ή νƒœκ·Έμ˜ ν…Œλ‘λ¦¬λ₯Ό μ„€μ •
171
- width - style - color
172
- border-width - border-style - border-color
173
-
174
- border-width : ν…Œλ‘λ¦¬μ˜ λ‘κ»˜λ‘œ, 주둜 px λ‹¨μœ„λ₯Ό μ‚¬μš©
175
- border-style : ν…Œλ‘λ¦¬μ˜ μŠ€νƒ€μΌλ‘œ μ‹€μ„ , 점선, 이쀑선 λ“±μ˜ μ˜΅μ…˜μ΄ 쑴재
176
- border-color : ν…Œλ‘λ¦¬μ˜ μƒ‰μƒμœΌλ‘œ, 값은 color μ†μ„±μ˜ 포맷을 μ‚¬μš©
177
- */
178
- border: 0.5px solid grey;
179
-
180
- /*
181
- [ padding νƒœκ·Έ ]
182
- 지정값은 px, cm, %둜 지정할 수 μžˆλ‹€.
183
- margin은 μŒμˆ˜κ°’μ΄ 지정 κ°€λŠ₯ν•˜μ§€λ§Œ padding은 μŒμˆ˜κ°’ 지정이 μ•ˆλœλ‹€.
184
-
185
- padding νƒœκ·Έμ™€ λΉ„μŠ·ν•œ νƒœκ·Έ
186
- : padding-top, padding-right, padding-bottom, padding-left
187
-
188
- * 4λ©΄ ν•œκΊΌλ²ˆμ— padding μ§€μ •ν•˜κΈ°
189
- ex) padding: 5px, 7px, 3px, 0px;
190
- (μœ„, 였λ₯ΈοΏ½οΏ½οΏ½, μ•„λž˜, μ™Όμͺ½)
191
- * 4λ©΄ λͺ¨λ‘ 같을 λ•Œ padding μ§€μ •ν•˜κΈ°
192
- ex) padding: 5px;
193
- * μœ„, 였λ₯Έμͺ½&μ™Όμͺ½, μ•„λž˜ padding μ§€μ •ν•˜κΈ°
194
- ex) padding: 5px 10px 0px;
195
- * μœ„&μ•„λž˜, 였λ₯Έμͺ½&μ™Όμͺ½ padding μ§€μ •ν•˜κΈ°
196
- ex) padding: 5px, 10px;
197
-
198
- */
199
- padding: 0.5rem 1rem;
200
- }
201
-
202
-
203
-
204
-
205
-
206
-
207
-
208
-
209
-
210
-
211
-
212
-
213
- /* h1, h2 νƒœκ·Έ λΆ€λΆ„ */
214
- .gohome, .goticker {
215
- text-decoration: none;
216
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
static/js/chartIndex.js DELETED
@@ -1,169 +0,0 @@
1
-
2
- // jQuery
3
- // $(document).ready(function() { });
4
- $(function() {
5
- chartInit();
6
- });
7
-
8
-
9
-
10
- function chartInit() {
11
- // Ticker 이름 κ°€μ Έμ˜€κΈ°
12
- // ν•΄λ‹Ή class의 text κ°€μ Έμ˜€κΈ°
13
- let ticker = document.querySelector('.tickerName').textContent;
14
- // console.log(ticker.indexOf(' '));
15
- idx = ticker.indexOf(' ');
16
- ticker = ticker.substring(0, idx);
17
-
18
-
19
- // Javascript -> Flask (Python) -> Javascript
20
- chart_data = sendAjax_sync("/chart", {"ticker": ticker}, "json", handle_one_return);
21
- console.log(chart_data);
22
- console.log(Object.keys(chart_data.Close));
23
-
24
-
25
- // xμΆ•κ³Ό data μ„€μ •
26
- // data: [{'x': date, 'o': open, 'h': high, 'l': low, 'c': close}, { }, { }, ... ]
27
- data = [];
28
- key_list = Object.keys(chart_data.Close);
29
- for (var i=key_list.length-15; i<key_list.length; i++) {
30
- key = key_list[i];
31
- const [year, month, day] = key.split("-");
32
- const x = new Date(parseInt(year), parseInt(month), parseInt(day), 9, 0, 0, 0).getTime();
33
- data.push({'x': x, 'o': chart_data.Open[key].toFixed(2), 'h': chart_data.High[key].toFixed(2), 'l': chart_data.Low[key].toFixed(2), 'c': chart_data.Close[key].toFixed(2)})
34
- }
35
- console.log("data : ", data);
36
-
37
-
38
-
39
-
40
- // Javascript chart.js candlestick
41
- let mychart = document.getElementById('myChart');
42
- new Chart(mychart, {
43
- type: 'candlestick',
44
- data: {
45
- datasets: [{
46
- label: 'CHRT - '.concat(ticker),
47
- data: data
48
- }]
49
- }
50
- });
51
-
52
-
53
-
54
-
55
-
56
- //////////////////////////////////////////////////////////////////
57
-
58
- // Javascriptλ₯Ό μ΄μš©ν•΄ HTML에 λ™μ μœΌλ‘œ νƒœκ·Έ μΆ”κ°€
59
-
60
- // a νƒœκ·Έ onclick 적용
61
- const goTicker = document.querySelector('.goticker');
62
- let goTickerURL = '/'.concat(ticker)
63
- goTicker.setAttribute('href', goTickerURL);
64
-
65
- //////////////////////////////////////////////////////////////////
66
-
67
-
68
-
69
-
70
-
71
- //////////////////////////////////////////////////////////////////
72
-
73
- // table title ν‘œμ‹œ
74
- // ν•΄λ‹Ή class의 text 집어넣기
75
- const table_title = document.querySelector('.table-title');
76
- $('.table .table-title').text(ticker.concat(' News'));
77
-
78
-
79
-
80
-
81
- // Javascript -> Flask (Python) -> Javascript
82
- news = sendAjax_sync(url="/news", data={"ticker": ticker}, dataType="json", handle=handle_one_return);
83
-
84
- news_table = document.querySelector('.table .news-table');
85
- // console.log(news_table.innerHTML);
86
-
87
-
88
- // console.log(news);
89
- // console.log(Object.keys(news)); // key λ°°μ—΄ λ§Œλ“€κΈ°
90
- // console.log(typeof Object.keys(news));
91
-
92
-
93
-
94
-
95
- /*
96
- [ λ‚ μ§œ μ •λ ¬ ]
97
- "news"μ—μ„œ index에 λŒ€ν•΄μ„œ 정렬을 ν•˜κ³  reduce() ν•¨μˆ˜λ₯Ό 적용.
98
-
99
- reduce() : λ°°μ—΄μ˜ 각 μš”μ†Œμ— λŒ€ν•΄ 주어진 reducer ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜κ³ , ν•˜λ‚˜μ˜ 결과값을 λ°˜ν™˜
100
- */
101
- sorted_news = {}
102
- sorted_news = Object.keys(news).sort(function (a, b) {
103
- if (a < b) { return 1; }
104
- else if (a > b) { return -1; }
105
- else { return 0; }
106
- }).reduce((sorted_news, key) => {
107
- sorted_news[key] = news[key];
108
- return sorted_news;
109
- }, {});
110
- // console.log(sorted_news);
111
-
112
- var key_list = Object.keys(chart_data.Open);
113
- var open_list = Object.values(chart_data.Open);
114
- var close_list = Object.values(chart_data.Close);
115
-
116
- for (var i=0; i<key_list.length; i++) {
117
- const [year, month, day] = key_list[i].split("-");
118
- key_list[i] = year + '.' + month + '.' + day;
119
- }
120
- console.log(key_list);
121
-
122
- // List μ•ˆμ˜ valueλ₯Ό 뽑을 λ•Œ, (Python) => for item in list:
123
- Object.keys(sorted_news).forEach(key => {
124
- var idx = key_list.indexOf(String(key));
125
-
126
- if (idx != -1) { var diff = ((open_list[idx]-close_list[idx-1])/(open_list[idx]) * 100.0).toFixed(2); }
127
- else { var diff = '.'; }
128
-
129
- if (diff == '.') {
130
- var diff_html = '<th class="news diff">' + diff + '</th>';
131
- }
132
- else if (diff > 0) {
133
- var diff_html = '<th class="news diff up">+' + diff + ' %</th>';
134
- }
135
- else {
136
- var diff_html = '<th class="news diff down">' + diff + ' %</th>';
137
- }
138
- var html = '<tr align="center" bgcolor="white"><th>+</th><th>' + key + '</th>' + diff_html + '<td style="text-align: left;">';
139
-
140
- for (var i = 0; i < sorted_news[key].length; i++) {
141
- var title = sorted_news[key][i].substring(0, sorted_news[key][i].length-4);
142
- var sendTitle = title; // Javascript -> Python 보내기 μœ„ν•œ title
143
-
144
-
145
- // titleμ—μ„œ & ν‘œμ‹œκ°€ μžˆμ„ 수 있음.
146
- // Title μ—μ„œ '&'둜 ν‘œμ‹œλ˜μ–΄ μžˆλŠ”λ° λ”°λ‘œ ꡬ별해야 λœλ‹€.
147
- // andSymbolInTitle μ—μ„œ κ°€μ Έμ˜¨ '&' μœ„μΉ˜ indexλ₯Ό titleκ³Ό 합쳐쀀닀.
148
- andSymbolInTitle = [];
149
- let idx = 0;
150
- // title = "asdf&asdf&AS&DF&&";
151
- // sendTitle = title;
152
-
153
- while (true) {
154
- idx = sendTitle.indexOf('&', idx);
155
- if (idx == -1) { break; }
156
- sendTitle = sendTitle.substring(0, idx) + sendTitle.substring(idx+1, sendTitle.length);
157
- // console.log(sendTitle);
158
- andSymbolInTitle.push(idx + andSymbolInTitle.length);
159
- }
160
-
161
- var link = String('"/info?ticker='.concat(ticker, '&date=', key, '&title=', sendTitle, '&andSymbolInTitle=', andSymbolInTitle, '"'));
162
- // console.log(link);
163
- html = html + '<a href=' + link + '>' + title + '</a><br>';
164
- }
165
- html = html + '</td>';
166
-
167
- news_table.innerHTML = news_table.innerHTML + html;
168
- });
169
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
static/js/index.js CHANGED
@@ -102,10 +102,10 @@ function nasdaq_table_init() {
102
  stocks.innerHTML = stocks.innerHTML + '<div class="stock industry">' + output.industry[i] + '</div>';
103
 
104
  // Add ticker's chart link
105
- execution_function = String('"javascript:chartInit(\''.concat(output.ticker[i], '\');"'));
106
  stock = document.querySelectorAll('.stock.ticker')[i];
107
  stock.innerHTML = '';
108
- stock.innerHTML = stock.innerHTML + '<a href='.concat(execution_function, '>') + output.ticker[i] + '</a>';
109
  }
110
  }
111
 
@@ -149,9 +149,6 @@ function chartInit(ticker) {
149
  const x = new Date(parseInt(year), parseInt(month), parseInt(day), 9, 0, 0, 0).getTime();
150
  data.push({'x': x, 'o': chart_data.Open[key].toFixed(2), 'h': chart_data.High[key].toFixed(2), 'l': chart_data.Low[key].toFixed(2), 'c': chart_data.Close[key].toFixed(2)})
151
  }
152
- // console.log("data : ", data);
153
-
154
-
155
 
156
 
157
  // Javascript chart.js candlestick
@@ -165,8 +162,7 @@ function chartInit(ticker) {
165
  }]
166
  }
167
  });
168
-
169
-
170
 
171
 
172
 
@@ -244,7 +240,9 @@ function chartInit(ticker) {
244
  var date_idx_in_key_list = key_list.indexOf(String(key));
245
  // console.log(key, key_list, date_idx_in_key_list);
246
 
247
- if (date_idx_in_key_list != -1) { var diff = ((open_list[date_idx_in_key_list]-close_list[date_idx_in_key_list-1])/(open_list[date_idx_in_key_list]) * 100.0).toFixed(2); }
 
 
248
  else { var diff = '.'; }
249
 
250
  if (diff == '.') {
@@ -256,7 +254,7 @@ function chartInit(ticker) {
256
  else {
257
  var diff_html = '<th class="news diff down">' + diff + ' %</th>';
258
  }
259
- var html = `<tr align="center" bgcolor="white"><th>+</th><th>${key}</th>${diff_html}<td style="text-align: left;">`;
260
 
261
  for (var i = 0; i < sorted_news[key].length; i++) {
262
  var title = sorted_news[key][i].substring(0, sorted_news[key][i].length-4);
@@ -280,13 +278,11 @@ function chartInit(ticker) {
280
  }
281
 
282
 
283
- var link = String(`/info_and_newsNER?ticker=${ticker}&date=${key}&title=${sendTitle}&andSymbolInTitle=${andSymbolInTitle}`);
284
- // console.log(link);
285
  linkList.push(link);
286
 
287
- var execution_function = String(`javascript:getData(linkList[${link_list_idx}]);`);
288
- // console.log("execution_function : ", execution_function);
289
- html = html + '<a href="' + execution_function + '">' + title + '</a><br>';
290
  link_list_idx = link_list_idx + 1;
291
  }
292
  html = html + '</td>';
@@ -356,7 +352,7 @@ function newsInit(ticker, date, title, url, ents) {
356
 
357
 
358
  // a νƒœκ·Έ onclick 적용
359
- var execution_function = `javascript:chartInit('${ticker}')`;
360
  const goTicker = document.querySelector('#news-container .goticker');
361
  console.log(goTicker);
362
  goTicker.setAttribute('href', execution_function);
@@ -448,7 +444,7 @@ function newsInit(ticker, date, title, url, ents) {
448
  // "await"λŠ” "async" ν•¨μˆ˜ μ•ˆμ—μ„œλ§Œ λ™μž‘ν•œλ‹€.
449
  // "await" ν‚€μ›Œλ“œλ₯Ό λ§Œλ‚˜λ©΄ Promiseκ°€ 처리될 λ•ŒκΉŒμ§€ κΈ°λ‹€λ¦°λ‹€.
450
  // Promiseκ°€ 처리되길 κΈ°λ‹€λ¦¬λŠ” λ™μ•ˆμ—” 엔진이 λ‹€λ₯ΈμΌ(λ‹€λ₯Έ 슀크립트λ₯Ό μ‹€ν–‰, 이벀트 처리 λ“±)을 ν•  수 있기 λ•Œλ¬Έμ—, CPU λ¦¬μ†ŒμŠ€κ°€ λ‚­λΉ„λ˜μ§€ μ•ŠλŠ”λ‹€.
451
- const inferResponse = await fetch(`newsQuestions?ticker=${ticker}&date=${date}&title=${sendTitle}&andSymbolInTitle=${andSymbolInTitle}&questions=${text}`); // Javascript -> Flask(python)
452
 
453
  // console.log("inferResponse : ", inferResponse);
454
 
 
102
  stocks.innerHTML = stocks.innerHTML + '<div class="stock industry">' + output.industry[i] + '</div>';
103
 
104
  // Add ticker's chart link
105
+ execution_function = `javascript:chartInit('${ output.ticker[i] }')`;
106
  stock = document.querySelectorAll('.stock.ticker')[i];
107
  stock.innerHTML = '';
108
+ stock.innerHTML = stock.innerHTML + `<a href=${ execution_function }>${ output.ticker[i] }</a>`;
109
  }
110
  }
111
 
 
149
  const x = new Date(parseInt(year), parseInt(month), parseInt(day), 9, 0, 0, 0).getTime();
150
  data.push({'x': x, 'o': chart_data.Open[key].toFixed(2), 'h': chart_data.High[key].toFixed(2), 'l': chart_data.Low[key].toFixed(2), 'c': chart_data.Close[key].toFixed(2)})
151
  }
 
 
 
152
 
153
 
154
  // Javascript chart.js candlestick
 
162
  }]
163
  }
164
  });
165
+ //////////////////////////////////////////////////////////////////
 
166
 
167
 
168
 
 
240
  var date_idx_in_key_list = key_list.indexOf(String(key));
241
  // console.log(key, key_list, date_idx_in_key_list);
242
 
243
+ if (date_idx_in_key_list != -1) {
244
+ var diff = ((open_list[date_idx_in_key_list]-close_list[date_idx_in_key_list-1])/(open_list[date_idx_in_key_list]) * 100.0).toFixed(2);
245
+ }
246
  else { var diff = '.'; }
247
 
248
  if (diff == '.') {
 
254
  else {
255
  var diff_html = '<th class="news diff down">' + diff + ' %</th>';
256
  }
257
+ var html = `<tr align="center" bgcolor="white"><th>+</th><th>${ key }</th>${ diff_html }<td style="text-align: left;">`;
258
 
259
  for (var i = 0; i < sorted_news[key].length; i++) {
260
  var title = sorted_news[key][i].substring(0, sorted_news[key][i].length-4);
 
278
  }
279
 
280
 
281
+ var link = String(`/info_and_newsNER?ticker=${ ticker }&date=${ key }&title=${ sendTitle }&andSymbolInTitle=${ andSymbolInTitle }`);
 
282
  linkList.push(link);
283
 
284
+ var execution_function = String(`javascript:getData(linkList[${ link_list_idx }]);`);
285
+ html = html + `<a href="${ execution_function }">${ title }</a><br>`;
 
286
  link_list_idx = link_list_idx + 1;
287
  }
288
  html = html + '</td>';
 
352
 
353
 
354
  // a νƒœκ·Έ onclick 적용
355
+ var execution_function = `javascript:chartInit('${ ticker }')`;
356
  const goTicker = document.querySelector('#news-container .goticker');
357
  console.log(goTicker);
358
  goTicker.setAttribute('href', execution_function);
 
444
  // "await"λŠ” "async" ν•¨μˆ˜ μ•ˆμ—μ„œλ§Œ λ™μž‘ν•œλ‹€.
445
  // "await" ν‚€μ›Œλ“œλ₯Ό λ§Œλ‚˜λ©΄ Promiseκ°€ 처리될 λ•ŒκΉŒμ§€ κΈ°λ‹€λ¦°λ‹€.
446
  // Promiseκ°€ 처리되길 κΈ°λ‹€λ¦¬λŠ” λ™μ•ˆμ—” 엔진이 λ‹€λ₯ΈμΌ(λ‹€λ₯Έ 슀크립트λ₯Ό μ‹€ν–‰, 이벀트 처리 λ“±)을 ν•  수 있기 λ•Œλ¬Έμ—, CPU λ¦¬μ†ŒμŠ€κ°€ λ‚­λΉ„λ˜μ§€ μ•ŠλŠ”λ‹€.
447
+ const inferResponse = await fetch(`newsQuestions?ticker=${ ticker }&date=${ date }&title=${ sendTitle }&andSymbolInTitle=${ andSymbolInTitle }&questions=${ text }`); // Javascript -> Flask(python)
448
 
449
  // console.log("inferResponse : ", inferResponse);
450
 
static/js/news.js DELETED
@@ -1,182 +0,0 @@
1
- // jQuery
2
- // $(document).ready(function() { });
3
- $(function() {
4
- console.log("Start News's Title !");
5
- newsInit();
6
- });
7
-
8
-
9
-
10
-
11
-
12
- function newsInit() {
13
- // Ticker 이름 κ°€μ Έμ˜€κΈ°
14
- // ν•΄λ‹Ή class의 text κ°€μ Έμ˜€κΈ°
15
- let ticker = document.querySelector('.goticker .tickerName').textContent;
16
- let date = document.querySelector('.titleDate').textContent;
17
- let title = document.querySelector('.titleName').textContent;
18
- let url = document.querySelector('.NewsURL').textContent;
19
-
20
- ticker = ticker;
21
- date = date.substring(6, date.length);
22
- title = title.substring(7, title.length);
23
- url = url.substring(5, url.length);
24
-
25
- console.log(ticker);
26
- console.log(date);
27
- console.log(title);
28
- console.log(url);
29
-
30
-
31
- //////////////////////////////////////////////////////////////////////
32
-
33
- // Javascriptλ₯Ό μ΄μš©ν•΄ HTML에 λ™μ μœΌλ‘œ νƒœκ·Έ μΆ”κ°€
34
-
35
-
36
-
37
- // a νƒœκ·Έ onclick 적용
38
- const goticker = document.querySelector('.goticker');
39
- let stockURL = '/'.concat(ticker);
40
- goticker.setAttribute('href', stockURL);
41
-
42
-
43
- // a νƒœκ·Έμ— URL 적용
44
- const addURL = document.querySelector('.NewsURL .input-News-URL');
45
- addURL.setAttribute('href', url);
46
-
47
-
48
- // λͺ¨λΈμ—μ„œ 질문 μ˜ˆμ‹œ Ticker에 μ•Œλ§žκ²Œ μž‘μ„±ν•˜κΈ°
49
- const example_value = document.querySelector('#model .text-form #text-input');
50
- example = "Why did " + ticker + "'s stock go down?";
51
- example_value.setAttribute('value', example);
52
-
53
-
54
- //////////////////////////////////////////////////////////////////////
55
- // NER κ΄€λ ¨
56
-
57
- ents = sendAjax_sync('/ner', {'ticker': ticker, 'date': date, 'title': title}, dataType="json", handle=handle_one_return);
58
- // ents = {'text': [], 'start_char': [], 'end_char': [], 'label_': [], 'news': []}
59
- console.log(ents);
60
-
61
- let news = ents['news'];
62
- let numOfNER = ents['text'].length;
63
-
64
-
65
- // λžœλ”λ§ html μš”μ†Œ 생성
66
- news_ner = document.querySelector('.entities');
67
- news_ner.innerHTML = '';
68
-
69
- for (i=0; i<numOfNER-1; i++) {
70
- start_idx = (i == 0) ? 0 : ents['end_char'][i-1];
71
- end_idx = ents['start_char'][i];
72
- last_idx = ents['end_char'][i];
73
-
74
- label = ents['label_'][i];
75
- if (label == 'ORG') { class_name = "entity_org"; }
76
- else if (label == 'PERSON') { class_name = "entity_person"; }
77
- else if (label == 'FAC') { class_name = "entity_fac"; }
78
- else if (label == 'GPE') { class_name = "entity_gpe"; }
79
- else if (label == 'PRODUCT') { class_name = "entity_product"; }
80
- else { console.log("[ Error !!! - New NER label_ ] : ", ents['label_'][i], ents['text'][i]); class_name = "none"; }
81
-
82
- news_ner.innerHTML = news_ner.innerHTML + news.substring(start_idx, end_idx);
83
- news_ner.innerHTML = news_ner.innerHTML + '<mark class=' + class_name
84
- + ' style="line-height: 1;">'
85
- + news.substring(end_idx, last_idx)
86
- + '<span class="show-label" style="font-size: 0.8em; font-weight: bold; line-height: 1; border-radius: 0.35em; vertical-align: middle; margin-left: 0.5rem">'
87
- + label + '</span></mark>';
88
- }
89
- news_ner.innerHTML = news_ner.innerHTML + news.substring(ents['end_char'][numOfNER-1]);
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
- //////////////////////////////////////////////////////////////////////
103
- // λͺ¨λΈ 적용 λ‚΄μš© ( Submit )
104
-
105
- var sendTitle = title; // Javascript -> Python 보내기 μœ„ν•œ title
106
-
107
-
108
- // titleμ—μ„œ & ν‘œμ‹œκ°€ μžˆμ„ 수 있음.
109
- // Title μ—μ„œ '&'둜 ν‘œμ‹œλ˜μ–΄ μžˆλŠ”λ° λ”°λ‘œ ꡬ별해야 λœλ‹€.
110
- // andSymbolInTitle μ—μ„œ κ°€μ Έμ˜¨ '&' μœ„μΉ˜ indexλ₯Ό titleκ³Ό 합쳐쀀닀.
111
- andSymbolInTitle = [];
112
- let idx = 0;
113
- // title = "asdf&asdf&AS&DF&&";
114
- // sendTitle = title;
115
-
116
- while (true) {
117
- idx = sendTitle.indexOf('&', idx);
118
- if (idx == -1) { break; }
119
- sendTitle = sendTitle.substring(0, idx) + sendTitle.substring(idx+1, sendTitle.length);
120
- console.log(sendTitle);
121
- andSymbolInTitle.push(idx + andSymbolInTitle.length);
122
- }
123
-
124
- console.log(andSymbolInTitle);
125
- console.log("Last String", sendTitle);
126
-
127
-
128
-
129
- // function μ•žμ— "async"λ₯Ό 뢙이면 ν•΄λ‹Ή ν•¨μˆ˜λŠ” 항상 ν”„λΌλ―ΈμŠ€λ₯Ό λ°˜ν™˜ν•œλ‹€.
130
- const translateText = async (text) => {
131
- // λͺ©μ  : Flask에 input을 보내주고 output을 λ°›μ•„μ˜€λŠ” κ³Όμ •
132
- console.log("Start translateText async");
133
-
134
- // "await"λŠ” "async" ν•¨μˆ˜ μ•ˆμ—μ„œλ§Œ λ™μž‘ν•œλ‹€.
135
- // "await" ν‚€μ›Œλ“œλ₯Ό λ§Œλ‚˜λ©΄ Promiseκ°€ 처리될 λ•ŒκΉŒμ§€ κΈ°λ‹€λ¦°λ‹€.
136
- // Promiseκ°€ 처리되길 κΈ°λ‹€λ¦¬λŠ” λ™μ•ˆμ—” 엔진이 λ‹€λ₯ΈμΌ(λ‹€λ₯Έ 슀크립트λ₯Ό μ‹€ν–‰, 이벀트 처리 λ“±)을 ν•  수 있기 λ•Œλ¬Έμ—, CPU λ¦¬μ†ŒμŠ€κ°€ λ‚­λΉ„λ˜μ§€ μ•ŠλŠ”λ‹€.
137
- const inferResponse = await fetch(`newsQuestions?ticker=${ticker}&date=${date}&title=${sendTitle}&andSymbolInTitle=${andSymbolInTitle}&questions=${text}`); // Javascript -> Flask(python)
138
-
139
- // console.log("inferResponse : ", inferResponse);
140
-
141
- const inferJson = await inferResponse.json(); // Flask(python) -> Javascript
142
-
143
- // console.log(inferJson);
144
- return inferJson.result['answer'];
145
- };
146
-
147
-
148
- /* λͺ¨λΈ Submit button κ΄€λ ¨ λ‚΄μš© */
149
- // form νƒœκ·Έμ˜ class 이름
150
- const textForm = document.querySelector('.text-form');
151
-
152
-
153
- // addEventListener(type, listener)
154
- // addEventListener(type, listener, options)
155
- // addEventListener(type, listener, useCapture)
156
- textForm.addEventListener('submit', async (event) => {
157
- event.preventDefault();
158
- // console.log(event);
159
-
160
- // html -> javascript : input λ°›μ•„μ™€μ„œ output 보내기
161
- const textInput = document.getElementById('text-input');
162
- console.log("element : ", textInput);
163
- const textParagraph = document.querySelector('.text-output');
164
-
165
- console.log("textInput : ", textInput, textInput.value);
166
- try {
167
- // sendAjax("/inference", {"input_text" : textInput.value}, handleOutput);
168
-
169
- // "await"λŠ” "async" ν•¨μˆ˜ μ•ˆμ—μ„œλ§Œ λ™μž‘ν•œλ‹€.
170
- // "await" ν‚€μ›Œλ“œλ₯Ό λ§Œλ‚˜λ©΄ Promiseκ°€ 처리될 λ•ŒκΉŒμ§€ κΈ°λ‹€λ¦°λ‹€.
171
- // Promiseκ°€ 처리되길 κΈ°λ‹€λ¦¬λŠ” λ™μ•ˆμ—” 엔진이 λ‹€λ₯ΈμΌ(λ‹€λ₯Έ 슀크립트λ₯Ό μ‹€ν–‰, 이벀트 처리 λ“±)을 ν•  수 있기 λ•Œλ¬Έμ—, CPU λ¦¬μ†ŒμŠ€κ°€ λ‚­λΉ„λ˜μ§€ μ•ŠλŠ”λ‹€.
172
- const answer = await translateText(textInput.value); // Flask에 input을 보내주고 output을 λ°›μ•„μ˜€λŠ” κ³Όμ •
173
-
174
- console.log("Answer : ", answer);
175
- textParagraph.textContent = answer;
176
- } catch (err) {
177
- console.error(err);
178
- }
179
- });
180
- }
181
-
182
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/chart.html DELETED
@@ -1,116 +0,0 @@
1
- <!-- html νƒœκ·Έ : HTML둜 μž‘μ„±λ˜μ–΄ μžˆλ‹€λŠ” 것을 μ•Œλ €μ€Œ -->
2
- <!-- html νƒœκ·Έ : html 파일 전체λ₯Ό κ°μ‹ΈλŠ” νƒœκ·Έ -->
3
- <html>
4
- <!-- head νƒœκ·Έ : 머리말에 ν•΄λ‹Ή -->
5
- <!-- head νƒœκ·Έ : cssλ‚˜ javascriptλ₯Ό μ—°κ²°ν•΄μ€Œ -->
6
- <!-- head νƒœκ·Έ : νŒŒλΉ„μ½˜μ΄λ‚˜ λ¬Έμžμ—΄ 인코딩과 같은 λ¬Έμ„œμ˜ λ‹€μ–‘ν•œ 정보λ₯Ό 제곡 -->
7
- <head>
8
-
9
- <!-- link νƒœκ·Έ : 주둜 μ™ΈλΆ€ css νŒŒμΌμ„ μ—°κ²°ν•  λ•Œ μ‚¬μš© -->
10
- <link rel="stylesheet" href="static/css/chartStyle.css" />
11
-
12
-
13
- <!-- jQuery -->
14
- <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
15
- <!-- script νƒœκ·Έ : μ™ΈλΆ€ js νŒŒμΌμ„ μ—°κ²°ν•˜κ±°λ‚˜ javascript μ½”λ“œλ₯Ό μž…λ ₯ν•  λ•Œ μ‚¬μš© -->
16
- <script type="text/javascript" src="static/js/utils.js"></script>
17
- <script type="text/javascript" src="static/js/chartIndex.js"></script>
18
-
19
-
20
-
21
-
22
-
23
- <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script>
24
- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.1/dist/chart.js"></script>
25
- <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script>
26
- <script src="static/js/chartjs-chart-financial.js" type="text/javascript"></script>
27
-
28
- </head>
29
-
30
-
31
-
32
-
33
-
34
- <!-- body νƒœκ·Έ : 본문에 ν•΄λ‹Ήν•˜λŠ” λΆ€λΆ„, μ‹€μ œ λ³΄μ—¬μ§€λŠ” 화면에 ν•΄λ‹Ή -->
35
- <body>
36
- <h1><a class="gohome" href="/">Stock News Summaries AI</a></h1>
37
- <a class="goticker"><h2 class="tickerName">{{embed}}</h2></a>
38
- <h3 class="practice"></h3>
39
-
40
- <div>
41
- <div id="chart-container" width="974" height="486"></div>
42
-
43
- <div class="myChart-container">
44
- <canvas id="myChart"></canvas>
45
- </div>
46
-
47
- </div>
48
-
49
-
50
-
51
-
52
-
53
- <!--
54
- [ 속성 ]
55
-
56
- align : 정렬을 μ§€μ •ν•œλ‹€. (left, center, right)
57
- border : ν…Œλ‘λ¦¬ μ„ μ˜ λ‘κ»˜λ₯Ό μ§€μ •ν•œλ‹€.
58
- bgcolor : 배경색을 μ§€μ •ν•œλ‹€. (색은 "red", "black" 처럼 기쑴의 μ •μ˜λ˜μ–΄μžˆλŠ” 색을 μ‚¬μš©ν•  μˆ˜λ„ 있으며
59
- rgbν˜•μ‹μ˜ #000000 μœΌλ‘œλ„ 색을 지정할 수 μžˆλ‹€.)
60
- bordercolor : ν…Œλ‘λ¦¬ μ„ μ˜ 색을 μ§€μ •ν•œλ‹€. 색을 μ§€μ •ν•˜λŠ” 방법은 bgcolor와 λ™μΌν•˜λ‹€.
61
- cellspacing : μ…€κ°„μ˜ 간격을 μ§€μ •ν•œλ‹€.
62
- width : κ°€λ‘œ 길이λ₯Ό μ§€μ •ν•œλ‹€. (μƒμˆ˜ 값을 μž…λ ₯ν•  μˆ˜λ„, % λ‹¨μœ„λ‘œ μž…λ ₯ν•  수 μžˆλ‹€.
63
- %λ₯Ό μ‚¬μš©ν•  λ•ŒλŠ” μ›ΉλΈŒλΌμš°μ € 크기에 λŒ€ν•œ % 이닀.)
64
- height : μ„Έλ‘œ 길이λ₯Ό μ§€μ •ν•œλ‹€.
65
- rawspan : μ§€μ •ν•œ κ°’λ§ŒνΌ 행을 λ³‘ν•©ν•œλ‹€. (μœ„μ•„λž˜λ‘œ)
66
- colspan : μ§€μ •ν•œ κ°’λ§ŒνΌ 열을 λ³‘ν•©ν•œλ‹€. (쒌우둜)
67
- -->
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
- <!-- table νƒœκ·Έ : ν…Œμ΄λΈ”μ„ λ§Œλ“ λ‹€. -->
76
- <table class="table"
77
-
78
- text-align="center"
79
- align-items="center"
80
- justify-content="center"
81
-
82
- border="1"
83
- width="90%"
84
- height="200"
85
- cellspacing="5">
86
-
87
-
88
- <!-- caption νƒœκ·Έ : ν…Œμ΄λΈ” 이름 ν‘œμ‹œ -->
89
- <caption class="table-title"></caption>
90
-
91
- <!-- ν…Œμ΄λΈ”μ˜ 헀더 μ˜μ—­ 지정 -->
92
- <thread>
93
- <!-- tr νƒœκ·Έ : ν…Œμ΄λΈ”μ  ν–‰(κ°€λ‘œ ν•œμ€„)을 λ§Œλ“ λ‹€. -->
94
- <tr align="center" bgcolor="white">
95
- <!-- td νƒœκ·Έ : ν…Œμ΄λΈ”μ˜ 열을 λ§Œλ“ λ‹€. -->
96
- <td width="5%"></td>
97
-
98
- <!-- th νƒœκ·Έ : ν…Œμ΄λΈ”(ν‘œ)의 ν—€λ“œ λΆ€λΆ„(μžλ™μœΌλ‘œ κ°€μš΄λ° μ •λ ¬, ꡡ게 적용) -->
99
- <th width="10%">Date</th>
100
- <th width="10%">Diff</th>
101
- <th class="title-width">Articles</th>
102
- </tr>
103
- </thread>
104
-
105
- <!-- tbody νƒœκ·Έ : -->
106
- <tbody class="news-table">
107
-
108
- <!-- News: Date, Diff, Title μΆ”κ°€ -->
109
-
110
- </tbody>
111
-
112
- </table>
113
-
114
-
115
- </body>
116
- </html>