민병수 / Voicoding

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

Merge branch 'Manual'

Inline Side-by-side
Showing 5 changed files with 368 additions and 15 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
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 + <link href="Voico_Manual.css" rel="stylesheet" type="text/css">
9 + <script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
10 + <script src="menu.js" defer></script>
11 + <link rel="preconnect" href="https://fonts.gstatic.com">
12 + <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
13 + <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap" rel="stylesheet">
14 + <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&family=Raleway:wght@200&display=swap" rel="stylesheet">
15 + <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
16 +</head>
17 +<body>
18 + <nav class="voi_menu">
19 + <div class="menu_bar_logo">
20 + <i class="fas fa-microphone-alt"></i>
21 + </div>
22 + <ul class="menu_bar_content">
23 + <a class="basic" id = "use" href="#"><li>How to use</li></a>
24 + <a class="basic" id = "Variables" href="#"><li>Assertion Variables</li></a>
25 + <a class="basic" id = "Parameters" href="#"><li>Assertion Parameters</li></a>
26 + <a class="basic" id = "Basic" href="#"><li>Basic Func usage</li></a>
27 + <a class="basic" id = "Loop" href="#"><li>Loop statements</li></a>
28 + <a class="basic" id = "IF" href="#"><li>IF statements</li></a>
29 + <a class="basic" id = "User" href="#"><li>User Define Func usage</li></a>
30 + <a class="basic" id = "Bool" href="#"><li>Bool logic</li></a>
31 + </ul>
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>
34 + </ul>
35 + <a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
36 + </nav>
37 + <div class="content">
38 + <div class="overall_usage">
39 + <h1>Voicoding을 사용하시려면 몇 가지 주의사항이 있습니다.<br></h1>
40 +
41 + <h2>먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.<br>
42 + 영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.<br></h2>
43 +
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 +
46 + <p style="font-size: 25px; display: inline; color:#ba2d65;">Assertion Variables</p>에는 변수 선언의 사용법이 적혀있습니다. <br>변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.<br>
47 +
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 +
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 +
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 +
54 + <p style="font-size: 25px; display: inline; color:#ba2d65;">Assertion Parameters</p>에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.<br>
55 +
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 + <p class="Accent">1. 변수 선언 문자</p><br>
62 + 변수 선언 문자를 하는 것은 a = 'Hello World' 와 같은 경우를 의미합니다. [변수 선언 문자 a = Hello World] --> a = 'Hello World'와 같이 출력됩니다.<br>
63 + <p class="Accent">2. 변수 선언 숫자</p><br>
64 + 변수 선언 숫자를 하는 것은 a = 4 와 같은 경우를 의미합니다. [변수 선언 숫자 a = 4] --> a = 4 와 같이 출력됩니다. <br>
65 + <p class="Accent">3. 변수 선언 리스트</p><br> (
66 + 변수 선언 리스트를 하는 것은 a = [], a = [1, 2, 3] 과 같은 경우를 의미합니다. [변수 선언 리스트 a = 빈리스트 , 변수 선언 리스트 a = 1, 2, 3] --> a = [], a = [1, 2, 3]와 같이 출력됩니다.<br>
67 + <p class="Accent">4. 변수 선언 함수</p><br>
68 + 변수 선언 함수를 하는 것은 a=sum(), a=len() 과 같은 내장함수를 사용하거나 사용자 정의 함수를 사용하는 경우를 의미합니다. [변수 선언 함수 a=, 기본 함수 사용 sum, 파라미터 선언 c] --> a = sum(c) 과 같이 출력됩니다.<br><p style="font-size: 20px; display: inline; color:#ba2d65;">(파라미터 선언은 Assertion Parameters를 참고해주세요.)</p><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 + <p class="Accent">input의 경우</p>, [변수 선언 함수 a =, 기본 함수 사용 input] --> a = input(); 와 같이 출력됩니다.<br>
84 + <p class="Accent">print의 경우</p>, [기본 함수 사용 print, 파라미터 선언 a] --> print(a); 와 같이 출력됩니다.<br>
85 + <p class="Accent">sum, max, min, len의 경우</p> [기본 함수 사용 sum, 파라미터 선언 a] --> sum(a); 와 같이 출력됩니다.<br>
86 + <p style="font-size: 20px; display: inline; color:#ba2d65;">(파라미터 선언은 Assertion Parameters를 참고해주세요.)</p><br>
87 + <p style="font-size: 20px; display: inline; color:#ba2d65;">(변수 선언은 Assertion Variables를 참고해주세요.)</p>
88 +
89 + </p>
90 + </div>
91 + <div class="for">
92 + <h1>Loop statements 사용 방법<br></h1>
93 + <p>Loop statements는 반복문을 사용하는 방법입니다.<br>
94 + 반복문에는 for, while이 해당됩니다.<br>
95 + <p class="Accent">for의 경우</p> 범위가 숫자일 경우엔, [반복문 선언 for a in range, 파라미터 선언 x] --> for a in range(x): 와 같이 출력됩니다.<br>
96 + 만약 범위에 숫자를 넣는 것이 아닌, 리스트를 넣는다면 [반복문 선언 for a in, 파라미터 선언 x ] --> for a in x: 와 같이 출력됩니다.<br>
97 + <p class="Accent">while의 경우</p> [반복문 선언 while, 논리 식 선언 ] --> while(논리 식): 와 같이 출력됩니다. <br>
98 + <p style="font-size: 20px; display: inline; color:#ba2d65;">(파라미터 선언은 Assertion Parameters를 참고해주세요.)</p><br>
99 + <p style="font-size: 20px; display: inline; color:#ba2d65;">(논리 식 선언 방법은 Bool logic을 참고해주세요.)</p>
100 +
101 + </p>
102 + </div>
103 + <div class="if">
104 + <h1>IF statements 사용 방법<br></h1>
105 + <p>
106 + IF statements에는 조건식을 사용하는 방법이 들어있습니다.<br>
107 + 조건식에는 if, elif, else가 포함되며 이를 사용하시려면<br>
108 + <p class="Accent">if의 경우</p> [조건문 사용 if, 논리 식 선언 ] --> if(논리 식 선언): 와 같이 출력됩니다. <br>
109 + <p class="Accent">elif의 경우</p> [조건문 사용 else if, 논리 식 선언 ] --> elif(논리 식 선언): 와 같이 출력됩니다. <br>
110 + <p class="Accent">else의 경우</p> [조건문 사용 else, 논리 식 선언 ] --> else(논리 식 선언): 와 같이 출력됩니다. <br><p style="font-size: 20px; display: inline; color:#ba2d65;">(논리 식 선언 방법은 Bool logic을 참고해주세요.)</p><br>
111 + </p>
112 + </div>
113 + <div class="def">
114 + <h1>User Define Func Usage 사용 방법</h1>
115 + <p>
116 + User Define Func Usage에는 사용자가 함수를 정의하는 방법에 대해 설명되어 있습니다.<br>
117 + 원하시는 함수명을 입력하시면 해당 함수가 정의됩니다.<br>
118 + 예를 들자면, [함수 선언 aaa, 파라미터 선언 c] --> def aaa(c): 와 같이 출력됩니다.<br> <p style="font-size: 20px; display: inline; color:#ba2d65;">(파라미터 선언 방법은 Assertion Parameters를 참고해주세요.)</p><br>
119 + </p>
120 + </div>
121 + <div class="bool">
122 + <h1>Bool logic 사용 방법<br></h1>
123 + <p>
124 + Bool logic에는 논리 식을 사용하는 방법에 대해 설명되어 있습니다.<br>
125 + 총 5가지의 논리식 선언이 가능하며, 가능한 논리식은 다음과 같습니다.<br>
126 + <p class="Accent"> 1: A는 B 와 같다</p> --> [논리식 선언 A는 B와 같다] --> A = B <br>
127 + <p class="Accent"> 2: A는 B 보다 크다</p> --> [논리식 선언 A는 B보다 크다] --> A > B<br>
128 + <p class="Accent"> 3: A는 B 보다 크거나 같다</p> --> [논리식 선언 A는 B보다 크거나 같다] --> A >= B<br>
129 + <p class="Accent"> 4: A는 B 보다 작거나 같다</p> --> [논리식 선언 A는 B보다 작거나 같다] --> A <= B<br>
130 + <p class="Accent"> 5: A는 B 보다 작다</p> --> [논리식 선언 A는 B보다 작다] --> A < B<br>
131 + </p>
132 + </div>
133 + </div>
134 +</body>
135 +</html>
...\ No newline at end of file ...\ No newline at end of file
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 }) 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 +})
......