민병수 / Voicoding

Go to a project
Toggle navigation Toggle navigation pinning
민병수
f5c30d35 2 parents ed3a7596 dd2f69ff

Merge branch 'Manual'

Expand all
Inline Side-by-side
Showing 5 changed files with 234 additions and 16 deletions
1 -1.
2 -2.
3 -3.
...\ No newline at end of file ...\ No newline at end of file
1 +Voicoding을 사용하시려면 몇 가지 주의사항이 있습니다.
2 +
3 +먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.
4 +영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.
5 +
6 +Baisc Func usage에는 Python의 내장함수인 input, split, print, len, sum, min, max 그리고 수식에 대한 사용법이 적혀 있습니다. 이 중, input과 split, 그리고 수식을 제외한 나머지 함수를 사용할 때에는 Assertion Parameters를 참고해 사용해주셔야 합니다.
7 +
8 +Assertion Variables에는 변수 선언의 사용법이 적혀있습니다. 변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.
9 +
10 +Loop statements에는 반복문(for, while)의 사용법이 적혀있습니다. 타겟 변수를 말씀하실 때에는 Assertion Parameters를 참고해 사용해주세요.
11 +
12 +IF statements에는 조건문(if, elif, else)의 사용법이 적혀있습니다. 조건문의 조건식을 사용하시는 방법은 Bool logic 을 참고해 사용해주세요.
13 +
14 +User Define Func usage에는 사용자 정의 함수, def에 대한 사용법이 적혀있습니다. 함수에 사용되는 파라미터를 선언하실 때에는 Assertion Parameters를 참고해주세요.
15 +
16 +Assertion Parameters에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.
17 +
18 +Bool logic에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.
...\ No newline at end of file ...\ No newline at end of file
......
1 -<!DOCTYPE html>
2 -<html lang="en">
3 -<head>
4 - <meta charset="UTF-8">
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 - <title>Manual</title>
8 -</head>
9 -<body>
10 -
11 -</body>
12 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 +:root{
2 + --text-color:#fffde7;
3 + --background-color:#ff94c2;
4 + --accent-color:#ba2d65;
5 + --output-color:#ff7043;
6 + --output-accent-color:#c63f17;
7 +}
8 +
9 +body{
10 + margin : 0;
11 + font-family: 'Source Sans Pro';
12 +}
13 +a{
14 + text-decoration:none;
15 + color:var(--text-color);
16 +
17 +}
18 +.voi_menu{
19 + display:flex;
20 + justify-content:space-between;
21 + align-items:center;
22 + background-color:var(--background-color);
23 + padding: 8px 12px;
24 +}
25 +.menu_bar_content li:hover{
26 + background-color:var(--accent-color);
27 + border-radius: 4px;
28 + color:var(--text-color);
29 +}
30 +.menu_bar_icons li:hover{
31 + background-color:var(--accent-color);
32 + border-radius: 4px;
33 + color:var(--text-color);
34 +}
35 +.menu_bar_logo{
36 + font-size: 20px;
37 +
38 +}
39 +.menu_bar_logo i{
40 + color:var(--accent-color);
41 +}
42 +.basic:hover{
43 + color:var(--text-color);
44 +}
45 +.menu_bar_content{
46 + display:flex;
47 + list-style: none;
48 + padding-left: 0;
49 +}
50 +.menu_bar_content li{
51 + padding: 8px 12px;
52 +}
53 +.menu_bar_icons{
54 + list-style: none;
55 + display: flex;
56 + padding-left:0;
57 +}
58 +.menu_bar_icons li{
59 + padding: 8px 12px;
60 +}
61 +.menu_toggle{
62 + color:var(--text-color);
63 + display: none;
64 + position: absolute;
65 + right:32px;
66 + font-size: 24px;
67 +}
68 +.menu_toggle:hover{
69 + color:var(--text-color);
70 +}
71 +@media screen and (max-width: 500px) {
72 + .voi_menu{
73 + flex-direction: column;
74 + align-items: flex-start;
75 + padding: 8px 24px;
76 + }
77 + .menu_bar_content{
78 + display:none;
79 + flex-direction:column;
80 + align-items:center;
81 + width: 100%;
82 + }
83 + .menu_bar_content li{
84 + width: 100%;
85 + text-align: center;
86 + }
87 + .menu_bar_icons{
88 + display:none;
89 + justify-content: center;
90 + width: 100%;
91 + }
92 + .menu_toggle{
93 + display: block;
94 + color:var(--text-color);
95 + }
96 + .menu_bar_content.active,
97 + .menu_bar_icons.active{
98 + display:flex;
99 + }
100 +}
101 +.basic{
102 + color:var(--text-color);
103 + font-size:13px;
104 + font-weight: bold;
105 + font-family: 'Noto Sans KR';
106 +}
107 +.content{
108 + margin:100px 20px 20px 20px;
109 + display:block;
110 + background-color:var(--background-color);
111 + align-items:center;
112 + text-align:center;
113 + font-family: 'Noto Sans KR';
114 + color:var(--text-color);
115 +}
116 +.Accent{
117 + font-size:20px;
118 + font-weight: bold;
119 + font-family: 'Noto Sans KR';
120 +}
121 +.overall_usage{
122 + display:none;
123 + align-items:flex-start;
124 + flex-direction: row;
125 + flex-wrap: nowrap;
126 +}
127 +.basic_func{
128 + display:none;
129 +}
130 +.variables{
131 + display:none;
132 +}
133 +.for{
134 + display:none;
135 +}
136 +.if{
137 + display:none;
138 +}
139 +.def{
140 + display:none;
141 +}
142 +.parameter{
143 + display:none;
144 +}
145 +.bool{
146 + display:none;
147 +}
148 +.overall_usage.active,
149 +.basic_func.active,
150 +.variables.active,
151 +.for.active,
152 +.if.active,
153 +.def.active,
154 +.parameter.active,
155 +.bool.active{
156 + display:block;
157 +}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 const toggleBtn = document.querySelector('.menu_toggle'); 1 const toggleBtn = document.querySelector('.menu_toggle');
2 const menu = document.querySelector('.menu_bar_content'); 2 const menu = document.querySelector('.menu_bar_content');
3 const icons = document.querySelector('.menu_bar_icons'); 3 const icons = document.querySelector('.menu_bar_icons');
4 +const x1 = document.querySelector('#use');
5 +const x2 = document.querySelector('#Variables');
6 +const x3 = document.querySelector('#Parameters');
7 +const x4 = document.querySelector('#Basic');
8 +const x5 = document.querySelector('#Loop');
9 +const x6 = document.querySelector('#IF');
10 +const x7 = document.querySelector('#User');
11 +const x8 = document.querySelector('#Bool');
12 +const content1 = document.querySelector('.overall_usage');
13 +const content2 = document.querySelector('.variables');
14 +const content3 = document.querySelector('.parameter');
15 +const content4 = document.querySelector('.basic_func');
16 +const content5 = document.querySelector('.for');
17 +const content6 = document.querySelector('.if');
18 +const content7 = document.querySelector('.def');
19 +const content8 = document.querySelector('.bool');
4 20
21 +let temp = document.querySelector('.menu_bar_logo');
5 toggleBtn.addEventListener('click', () => { 22 toggleBtn.addEventListener('click', () => {
6 menu.classList.toggle('active'); 23 menu.classList.toggle('active');
7 icons.classList.toggle('active'); 24 icons.classList.toggle('active');
8 -})
...\ No newline at end of file ...\ No newline at end of file
25 +})
26 +
27 +x1.addEventListener('click', () =>{
28 + temp.classList.toggle('active');
29 + content1.classList.toggle('active');
30 + temp = content1;
31 +})
32 +x2.addEventListener('click', () =>{
33 + temp.classList.toggle('active');
34 + content2.classList.toggle('active');
35 + temp = content2;
36 +})
37 +x3.addEventListener('click', () =>{
38 + temp.classList.toggle('active');
39 + content3.classList.toggle('active');
40 + temp = content3;
41 +})
42 +x4.addEventListener('click', () =>{
43 + temp.classList.toggle('active');
44 + content4.classList.toggle('active');
45 + temp = content4;
46 +})
47 +x5.addEventListener('click', () =>{
48 + temp.classList.toggle('active');
49 + content5.classList.toggle('active');
50 + temp = content5;
51 +})
52 +x6.addEventListener('click', () =>{
53 + temp.classList.toggle('active');
54 + content6.classList.toggle('active');
55 + temp = content6;
56 +})
57 +x7.addEventListener('click', () =>{
58 + temp.classList.toggle('active');
59 + content7.classList.toggle('active');
60 + temp = content7;
61 +})
62 +x8.addEventListener('click', () =>{
63 + temp.classList.toggle('active');
64 + content8.classList.toggle('active');
65 + temp = content8;
66 +})
......