민병수 / Voicoding

Go to a project
Toggle navigation Toggle navigation pinning
민병수
909e95d2 1 parent ce227947

How to use Voicoding ?

Inline Side-by-side
Showing 3 changed files with 90 additions and 34 deletions
...@@ -111,6 +111,7 @@ a{ ...@@ -111,6 +111,7 @@ a{
111 align-items:center; 111 align-items:center;
112 text-align:center; 112 text-align:center;
113 font-family: 'Noto Sans KR'; 113 font-family: 'Noto Sans KR';
114 + color:var(--text-color);
114 } 115 }
115 .overall_usage{ 116 .overall_usage{
116 display:none; 117 display:none;
......
...@@ -20,14 +20,14 @@ ...@@ -20,14 +20,14 @@
20 <i class="fas fa-microphone-alt"></i> 20 <i class="fas fa-microphone-alt"></i>
21 </div> 21 </div>
22 <ul class="menu_bar_content"> 22 <ul class="menu_bar_content">
23 - <a class="basic" href="#"><li>How to use</li></a> 23 + <a class="basic" id = "use" href="#"><li>How to use</li></a>
24 - <a class="basic" href="#"><li>Assertion Variables</li></a> 24 + <a class="basic" id = "Variables" href="#"><li>Assertion Variables</li></a>
25 - <a class="basic" href="#"><li>Assertion Parameters</li></a> 25 + <a class="basic" id = "Parameters" href="#"><li>Assertion Parameters</li></a>
26 - <a class="basic" href="#"><li>Basic Func usage</li></a> 26 + <a class="basic" id = "Basic" href="#"><li>Basic Func usage</li></a>
27 - <a class="basic" href="#"><li>Loop statements</li></a> 27 + <a class="basic" id = "Loop" href="#"><li>Loop statements</li></a>
28 - <a class="basic" href="#"><li>IF statements</li></a> 28 + <a class="basic" id = "IF" href="#"><li>IF statements</li></a>
29 - <a class="basic" href="#"><li>User Define Func usage</li></a> 29 + <a class="basic" id = "User" href="#"><li>User Define Func usage</li></a>
30 - <a class="basic" href="#"><li>Bool logic</li></a> 30 + <a class="basic" id = "Bool" href="#"><li>Bool logic</li></a>
31 </ul> 31 </ul>
32 <ul class="menu_bar_icons"> 32 <ul class="menu_bar_icons">
33 <a class="basic" href="Voico_Menu.html" style ="font-size: 17px;"><li><i class="fas fa-home"></i></li></a> 33 <a class="basic" href="Voico_Menu.html" style ="font-size: 17px;"><li><i class="fas fa-home"></i></li></a>
...@@ -41,25 +41,72 @@ ...@@ -41,25 +41,72 @@
41 <h2>먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.<br> 41 <h2>먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.<br>
42 영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.<br></h2> 42 영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.<br></h2>
43 43
44 - <p>Basic Func usage에는 Python의 내장함수인 input, split, print, len, sum, min, max 그리고 수식에 대한 사용법이 적혀 있습니다.<br> 이 중, input과 split, 그리고 수식을 제외한 나머지 함수를 사용할 때에는 Assertion Parameters를 참고해 사용해주셔야 합니다.<br> 44 + <p><p style="font-size: 25px; display: inline; color:#ba2d65;">Basic Func usage</p>에는 Python의 내장함수인 input, print, len, sum, min, max 그리고 수식에 대한 사용법이 적혀 있습니다.<br> 이 중, input과 수식을 제외한 나머지 함수를 사용할 때에는 <p style="font-size: 20px; display: inline; color:#ba2d65;">Assertion Parameters</p>를 참고해 사용해주셔야 합니다.<br>
45 45
46 - Assertion Variables에는 변수 선언의 사용법이 적혀있습니다. <br>변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.<br> 46 + <p style="font-size: 25px; display: inline; color:#ba2d65;">Assertion Variables</p>에는 변수 선언의 사용법이 적혀있습니다. <br>변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.<br>
47 47
48 - Loop statements에는 반복문(for, while)의 사용법이 적혀있습니다. <br>타겟 변수를 말씀하실 때에는 Assertion Parameters를 참고해 사용해주세요.<br> 48 + <p style="font-size: 25px; display: inline; color:#ba2d65;">Loop statements</p>에는 반복문(for, while)의 사용법이 적혀있습니다. <br>타겟 변수를 말씀하실 때에는 <p style="font-size: 20px; display: inline; color:#ba2d65;">Assertion Parameters</p>를 참고해 사용해주세요.<br>
49 49
50 - IF statements에는 조건문(if, elif, else)의 사용법이 적혀있습니다. <br>조건문의 조건식을 사용하시는 방법은 Bool logic 을 참고해 사용해주세요.<br> 50 + <p style="font-size: 25px; display: inline; color:#ba2d65;">IF statements</p>에는 조건문(if, elif, else)의 사용법이 적혀있습니다. <br>조건문의 조건식을 사용하시는 방법은 <p style="font-size: 20px; display: inline; color:#ba2d65;">Bool logic</p> 을 참고해 사용해주세요.<br>
51 51
52 - User Define Func usage에는 사용자 정의 함수, def에 대한 사용법이 적혀있습니다. <br>함수에 사용되는 파라미터를 선언하실 때에는 Assertion Parameters를 참고해주세요.<br> 52 + <p style="font-size: 25px; display: inline; color:#ba2d65;">User Define Func usage</p>에는 사용자 정의 함수, def에 대한 사용법이 적혀있습니다. <br>함수에 사용되는 파라미터를 선언하실 때에는 <p style="font-size: 20px; display: inline; color:#ba2d65;">Assertion Parameters</p>를 참고해주세요.<br>
53 53
54 - Assertion Parameters에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.<br> 54 + <p style="font-size: 25px; display: inline; color:#ba2d65;">Assertion Parameters</p>에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.<br>
55 55
56 - Bool logic에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.</p> 56 + <p style="font-size: 25px; display: inline; color:#ba2d65;">Bool logic</p>에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.</p>
57 + </div>
58 + <div class="variables">
59 + <h1>Assertion variables 사용 방법<br></h1>
60 + <p>변수 선언에는 몇 가지의 큰 틀이 존재합니다.<br>
61 + 1. 변수 선언 문자<br>
62 + 변수 선언 문자를 하는 것은 a = 'Hello World' 와 같은 경우를 의미합니다. [변수 선언 문자 a = Hello World]와 같이 읽어주시면 됩니다.<br>
63 + 2. 변수 선언 숫자<br>
64 + 변수 선언 숫자를 하는 것은 a = 4 와 같은 경우를 의미합니다. [변수 선언 숫자 a = 4]와 같이 읽어주시면 됩니다. <br>
65 + 3. 변수 선언 리스트<br>
66 + 변수 선언 리스트를 하는 것은 a = [], a = [1, 2, 3] 과 같은 경우를 의미합니다. [변수 선언 리스트 a = 빈리스트 , 변수 선언 리스트 a = 1, 2, 3]와 같이 읽어주시면 됩니다.<br>
67 + 4. 변수 선언 함수<br>
68 + 변수 선언 함수를 하는 것은 a=sum(), a=len() 과 같은 내장함수를 사용하거나 사용자 정의 함수를 사용하는 경우를 의미합니다. [변수 선언 함수 a=, 기본 함수 사용 sum // 변수 선언 함수 a=, 기본 함수 사용 len] 과 같이 읽어주시면 됩니다.<br>
69 + </p>
70 + </div>
71 + <div class="parameter">
72 + <h1>Assertion Parameters 사용 방법<br></h1>
73 + <p>파라미터 선언은 대다수의 함수 선언, 내장함수 사용, 반복문 사용에 있어서 꼭 사용해야 하니 숙지해주세요.<br>
74 + 파라미터 선언을 하는 방법은 다음과 같습니다.<br>
75 + 만약, 파라미터로 a b c 를 선언하고 싶다면, [파라미터 선언 a, b, c]라고 읽어주시면 해당하는 곳에 파라미터로써 입력됩니다.
76 +
77 + </p>
78 + </div>
79 + <div class="basic_func">
80 + <h1>Basic Func 사용 방법<br></h1>
81 + <p>Basic Func에는 파이썬의 내장 함수들이 들어있습니다.<br>
82 + 대체적으로 같은 틀을 가지고 있으니 방법을 숙지해주세요.<br>
83 + input의 경우, [변수 선언 함수 a =, 기본 함수 사용 input] --> a = input(); 와 같이 출력됩니다.<br>
84 + print의 경우, [기본 함수 사용 print, 파라미터 선언 a] --> print(a); 와 같이 출력됩니다.<br>
85 + sum, max, min, len의 경우 [기본 함수 사용 sum, 파라미터 선언 a] --> sum(a); 와 같이 출력됩니다.<br>
86 +
87 + </p>
88 + </div>
89 + <div class="for">
90 + <h1>Loop statements 사용 방법<br></h1>
91 + <p>Loop statements는 반복문을 사용하는 방법입니다.<br>
92 + 반복문에는 for, while이 해당됩니다.<br>
93 + for의 경우 범위가 숫자일 경우엔, [반복문 선언 for a in range, 파라미터 선언 x] --> for a in range(x): 와 같이 출력됩니다.<br>
94 + 만약 범위에 숫자를 넣는 것이 아닌, 리스트를 넣는다면 [반복문 선언 for a in, 파라미터 선언 x ] --> for a in x: 와 같이 출력됩니다.<br>
95 + while의 경우, [반복문 선언 while, 논리 식 선언 ] --> while(논리 식): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<br>
96 +
97 +
98 + </p>
99 + </div>
100 + <div class="if">
101 + <h1>IF statements 사용 방법<br></h1>
102 + <p>
103 + IF statements에는 조건식을 사용하는 방법이 들어있습니다.<br>
104 + 조건식에는 if, elif, else가 포함되며 이를 사용하시려면<br>
105 + if의 경우, [조건문 사용 if, 논리 식 선언 ] --> if(논리 식 선언): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<br>
106 + elif의 경우, [조건문 사용 else if, 논리 식 선언 ] --> elif(논리 식 선언): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<br>
107 + else의 경우, [조건문 사용 else, 논리 식 선언 ] --> else(논리 식 선언): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<br>
108 + </p>
57 </div> 109 </div>
58 - <div class="variables"></div>
59 - <div class="parameter"></div>
60 - <div class="basic_func"></div>
61 - <div class="for"></div>
62 - <div class="if"></div>
63 <div class="def"></div> 110 <div class="def"></div>
64 <div class="bool"></div> 111 <div class="bool"></div>
65 </div> 112 </div>
......
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');
4 const content1 = document.querySelector('.overall_usage'); 12 const content1 = document.querySelector('.overall_usage');
5 -const content2 = document.querySelector('.basic_func'); 13 +const content2 = document.querySelector('.variables');
6 -const content3 = document.querySelector('.variables'); 14 +const content3 = document.querySelector('.parameter');
7 -const content4 = document.querySelector('.for'); 15 +const content4 = document.querySelector('.basic_func');
8 -const content5 = document.querySelector('.if'); 16 +const content5 = document.querySelector('.for');
9 -const content6 = document.querySelector('.def'); 17 +const content6 = document.querySelector('.if');
10 -const content7 = document.querySelector('.parameter'); 18 +const content7 = document.querySelector('.def');
11 const content8 = document.querySelector('.bool'); 19 const content8 = document.querySelector('.bool');
12 20
13 21
...@@ -16,27 +24,27 @@ toggleBtn.addEventListener('click', () => { ...@@ -16,27 +24,27 @@ toggleBtn.addEventListener('click', () => {
16 icons.classList.toggle('active'); 24 icons.classList.toggle('active');
17 }) 25 })
18 26
19 -menu.addEventListener('click', () =>{ 27 +x1.addEventListener('click', () =>{
20 content1.classList.toggle('active'); 28 content1.classList.toggle('active');
21 }) 29 })
22 -menu.addEventListener('click', () =>{ 30 +x2.addEventListener('click', () =>{
23 content2.classList.toggle('active'); 31 content2.classList.toggle('active');
24 }) 32 })
25 -menu.addEventListener('click', () =>{ 33 +x3.addEventListener('click', () =>{
26 content3.classList.toggle('active'); 34 content3.classList.toggle('active');
27 }) 35 })
28 -menu.addEventListener('click', () =>{ 36 +x4.addEventListener('click', () =>{
29 content4.classList.toggle('active'); 37 content4.classList.toggle('active');
30 }) 38 })
31 -menu.addEventListener('click', () =>{ 39 +x5.addEventListener('click', () =>{
32 content5.classList.toggle('active'); 40 content5.classList.toggle('active');
33 }) 41 })
34 -menu.addEventListener('click', () =>{ 42 +x6.addEventListener('click', () =>{
35 content6.classList.toggle('active'); 43 content6.classList.toggle('active');
36 }) 44 })
37 -menu.addEventListener('click', () =>{ 45 +x7.addEventListener('click', () =>{
38 content7.classList.toggle('active'); 46 content7.classList.toggle('active');
39 }) 47 })
40 -menu.addEventListener('click', () =>{ 48 +x8.addEventListener('click', () =>{
41 content8.classList.toggle('active'); 49 content8.classList.toggle('active');
42 }) 50 })
......