민병수 / 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 369 additions and 16 deletions
1.
2.
3.
\ No newline at end of file
Voicoding을 사용하시려면 몇 가지 주의사항이 있습니다.
먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.
영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.
Baisc Func usage에는 Python의 내장함수인 input, split, print, len, sum, min, max 그리고 수식에 대한 사용법이 적혀 있습니다. 이 중, input과 split, 그리고 수식을 제외한 나머지 함수를 사용할 때에는 Assertion Parameters를 참고해 사용해주셔야 합니다.
Assertion Variables에는 변수 선언의 사용법이 적혀있습니다. 변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.
Loop statements에는 반복문(for, while)의 사용법이 적혀있습니다. 타겟 변수를 말씀하실 때에는 Assertion Parameters를 참고해 사용해주세요.
IF statements에는 조건문(if, elif, else)의 사용법이 적혀있습니다. 조건문의 조건식을 사용하시는 방법은 Bool logic 을 참고해 사용해주세요.
User Define Func usage에는 사용자 정의 함수, def에 대한 사용법이 적혀있습니다. 함수에 사용되는 파라미터를 선언하실 때에는 Assertion Parameters를 참고해주세요.
Assertion Parameters에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.
Bool logic에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.
\ No newline at end of file
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manual</title>
</head>
<body>
</body>
</html>
\ No newline at end of file
:root{
--text-color:#fffde7;
--background-color:#ff94c2;
--accent-color:#ba2d65;
--output-color:#ff7043;
--output-accent-color:#c63f17;
}
body{
margin : 0;
font-family: 'Source Sans Pro';
}
a{
text-decoration:none;
color:var(--text-color);
}
.voi_menu{
display:flex;
justify-content:space-between;
align-items:center;
background-color:var(--background-color);
padding: 8px 12px;
}
.menu_bar_content li:hover{
background-color:var(--accent-color);
border-radius: 4px;
color:var(--text-color);
}
.menu_bar_icons li:hover{
background-color:var(--accent-color);
border-radius: 4px;
color:var(--text-color);
}
.menu_bar_logo{
font-size: 20px;
}
.menu_bar_logo i{
color:var(--accent-color);
}
.basic:hover{
color:var(--text-color);
}
.menu_bar_content{
display:flex;
list-style: none;
padding-left: 0;
}
.menu_bar_content li{
padding: 8px 12px;
}
.menu_bar_icons{
list-style: none;
display: flex;
padding-left:0;
}
.menu_bar_icons li{
padding: 8px 12px;
}
.menu_toggle{
color:var(--text-color);
display: none;
position: absolute;
right:32px;
font-size: 24px;
}
.menu_toggle:hover{
color:var(--text-color);
}
@media screen and (max-width: 500px) {
.voi_menu{
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.menu_bar_content{
display:none;
flex-direction:column;
align-items:center;
width: 100%;
}
.menu_bar_content li{
width: 100%;
text-align: center;
}
.menu_bar_icons{
display:none;
justify-content: center;
width: 100%;
}
.menu_toggle{
display: block;
color:var(--text-color);
}
.menu_bar_content.active,
.menu_bar_icons.active{
display:flex;
}
}
.basic{
color:var(--text-color);
font-size:13px;
font-weight: bold;
font-family: 'Noto Sans KR';
}
.content{
margin:100px 20px 20px 20px;
display:block;
background-color:var(--background-color);
align-items:center;
text-align:center;
font-family: 'Noto Sans KR';
color:var(--text-color);
}
.Accent{
font-size:20px;
font-weight: bold;
font-family: 'Noto Sans KR';
}
.overall_usage{
display:none;
align-items:flex-start;
flex-direction: row;
flex-wrap: nowrap;
}
.basic_func{
display:none;
}
.variables{
display:none;
}
.for{
display:none;
}
.if{
display:none;
}
.def{
display:none;
}
.parameter{
display:none;
}
.bool{
display:none;
}
.overall_usage.active,
.basic_func.active,
.variables.active,
.for.active,
.if.active,
.def.active,
.parameter.active,
.bool.active{
display:block;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manual</title>
<link href="Voico_Manual.css" rel="stylesheet" type="text/css">
<script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
<script src="menu.js" defer></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&family=Raleway:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<nav class="voi_menu">
<div class="menu_bar_logo">
<i class="fas fa-microphone-alt"></i>
</div>
<ul class="menu_bar_content">
<a class="basic" id = "use" href="#"><li>How to use</li></a>
<a class="basic" id = "Variables" href="#"><li>Assertion Variables</li></a>
<a class="basic" id = "Parameters" href="#"><li>Assertion Parameters</li></a>
<a class="basic" id = "Basic" href="#"><li>Basic Func usage</li></a>
<a class="basic" id = "Loop" href="#"><li>Loop statements</li></a>
<a class="basic" id = "IF" href="#"><li>IF statements</li></a>
<a class="basic" id = "User" href="#"><li>User Define Func usage</li></a>
<a class="basic" id = "Bool" href="#"><li>Bool logic</li></a>
</ul>
<ul class="menu_bar_icons">
<a class="basic" href="Voico_Menu.html" style ="font-size: 17px;"><li><i class="fas fa-home"></i></li></a>
</ul>
<a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
</nav>
<div class="content">
<div class="overall_usage">
<h1>Voicoding을 사용하시려면 몇 가지 주의사항이 있습니다.<br></h1>
<h2>먼저, 모든 선언 혹은 사용에는 조금의 텀을 주시고 말씀해주세요.<br>
영어를 사용하게 되는 부분에는 자신이 영어 원어민이 된 것처럼 말씀해주세요.<br></h2>
<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>
<p style="font-size: 25px; display: inline; color:#ba2d65;">Assertion Variables</p>에는 변수 선언의 사용법이 적혀있습니다. <br>변수 선언을 하는 방식에는 문자, 숫자, 리스트, 함수의 방법이 있습니다.<br>
<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>
<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>
<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>
<p style="font-size: 25px; display: inline; color:#ba2d65;">Assertion Parameters</p>에는 함수 혹은 문장에서 변수가 호출될 때 쓰이는 Parameter의 사용법이 적혀있습니다.<br>
<p style="font-size: 25px; display: inline; color:#ba2d65;">Bool logic</p>에는 부울 논리식, 조건문의 조건식을 사용하는 방법이 적혀있습니다.</p>
</div>
<div class="variables">
<h1>Assertion variables 사용 방법<br></h1>
<p>변수 선언에는 몇 가지의 큰 틀이 존재합니다.<br>
<p class="Accent">1. 변수 선언 문자</p><br>
변수 선언 문자를 하는 것은 a = 'Hello World' 와 같은 경우를 의미합니다. [변수 선언 문자 a = Hello World] --> a = 'Hello World'와 같이 출력됩니다.<br>
<p class="Accent">2. 변수 선언 숫자</p><br>
변수 선언 숫자를 하는 것은 a = 4 와 같은 경우를 의미합니다. [변수 선언 숫자 a = 4] --> a = 4 와 같이 출력됩니다. <br>
<p class="Accent">3. 변수 선언 리스트</p><br> (
변수 선언 리스트를 하는 것은 a = [], a = [1, 2, 3] 과 같은 경우를 의미합니다. [변수 선언 리스트 a = 빈리스트 , 변수 선언 리스트 a = 1, 2, 3] --> a = [], a = [1, 2, 3]와 같이 출력됩니다.<br>
<p class="Accent">4. 변수 선언 함수</p><br>
변수 선언 함수를 하는 것은 a=sum(), a=len() 과 같은 내장함수를 사용하거나 사용자 정의 함수를 사용하는 경우를 의미합니다. [변수 선언 함수 a=, 기본 함수 사용 sum, 파라미터 선언 c] --> a = sum(c) 과 같이 출력됩니다.<br><p style="font-size: 20px; display: inline; color:#ba2d65;">(파라미터 선언은 Assertion Parameters를 참고해주세요.)</p><br>
</p>
</div>
<div class="parameter">
<h1>Assertion Parameters 사용 방법<br></h1>
<p>파라미터 선언은 대다수의 함수 선언, 내장함수 사용, 반복문 사용에 있어서 꼭 사용해야 하니 숙지해주세요.<br>
파라미터 선언을 하는 방법은 다음과 같습니다.<br>
만약, 파라미터로 a b c 를 선언하고 싶다면, [파라미터 선언 a, b, c]라고 읽어주시면 해당하는 곳에 파라미터로써 입력됩니다.
</p>
</div>
<div class="basic_func">
<h1>Basic Func 사용 방법<br></h1>
<p>Basic Func에는 파이썬의 내장 함수들이 들어있습니다.<br>
대체적으로 같은 틀을 가지고 있으니 방법을 숙지해주세요.<br>
<p class="Accent">input의 경우</p>, [변수 선언 함수 a =, 기본 함수 사용 input] --> a = input(); 와 같이 출력됩니다.<br>
<p class="Accent">print의 경우</p>, [기본 함수 사용 print, 파라미터 선언 a] --> print(a); 와 같이 출력됩니다.<br>
<p class="Accent">sum, max, min, len의 경우</p> [기본 함수 사용 sum, 파라미터 선언 a] --> sum(a); 와 같이 출력됩니다.<br>
<p style="font-size: 20px; display: inline; color:#ba2d65;">(파라미터 선언은 Assertion Parameters를 참고해주세요.)</p><br>
<p style="font-size: 20px; display: inline; color:#ba2d65;">(변수 선언은 Assertion Variables를 참고해주세요.)</p>
</p>
</div>
<div class="for">
<h1>Loop statements 사용 방법<br></h1>
<p>Loop statements는 반복문을 사용하는 방법입니다.<br>
반복문에는 for, while이 해당됩니다.<br>
<p class="Accent">for의 경우</p> 범위가 숫자일 경우엔, [반복문 선언 for a in range, 파라미터 선언 x] --> for a in range(x): 와 같이 출력됩니다.<br>
만약 범위에 숫자를 넣는 것이 아닌, 리스트를 넣는다면 [반복문 선언 for a in, 파라미터 선언 x ] --> for a in x: 와 같이 출력됩니다.<br>
<p class="Accent">while의 경우</p> [반복문 선언 while, 논리 식 선언 ] --> while(논리 식): 와 같이 출력됩니다. <br>
<p style="font-size: 20px; display: inline; color:#ba2d65;">(파라미터 선언은 Assertion Parameters를 참고해주세요.)</p><br>
<p style="font-size: 20px; display: inline; color:#ba2d65;">(논리 식 선언 방법은 Bool logic을 참고해주세요.)</p>
</p>
</div>
<div class="if">
<h1>IF statements 사용 방법<br></h1>
<p>
IF statements에는 조건식을 사용하는 방법이 들어있습니다.<br>
조건식에는 if, elif, else가 포함되며 이를 사용하시려면<br>
<p class="Accent">if의 경우</p> [조건문 사용 if, 논리 식 선언 ] --> if(논리 식 선언): 와 같이 출력됩니다. <br>
<p class="Accent">elif의 경우</p> [조건문 사용 else if, 논리 식 선언 ] --> elif(논리 식 선언): 와 같이 출력됩니다. <br>
<p class="Accent">else의 경우</p> [조건문 사용 else, 논리 식 선언 ] --> else(논리 식 선언): 와 같이 출력됩니다. <br><p style="font-size: 20px; display: inline; color:#ba2d65;">(논리 식 선언 방법은 Bool logic을 참고해주세요.)</p><br>
</p>
</div>
<div class="def">
<h1>User Define Func Usage 사용 방법</h1>
<p>
User Define Func Usage에는 사용자가 함수를 정의하는 방법에 대해 설명되어 있습니다.<br>
원하시는 함수명을 입력하시면 해당 함수가 정의됩니다.<br>
예를 들자면, [함수 선언 aaa, 파라미터 선언 c] --> def aaa(c): 와 같이 출력됩니다.<br> <p style="font-size: 20px; display: inline; color:#ba2d65;">(파라미터 선언 방법은 Assertion Parameters를 참고해주세요.)</p><br>
</p>
</div>
<div class="bool">
<h1>Bool logic 사용 방법<br></h1>
<p>
Bool logic에는 논리 식을 사용하는 방법에 대해 설명되어 있습니다.<br>
총 5가지의 논리식 선언이 가능하며, 가능한 논리식은 다음과 같습니다.<br>
<p class="Accent"> 1: A는 B 와 같다</p> --> [논리식 선언 A는 B와 같다] --> A = B <br>
<p class="Accent"> 2: A는 B 보다 크다</p> --> [논리식 선언 A는 B보다 크다] --> A > B<br>
<p class="Accent"> 3: A는 B 보다 크거나 같다</p> --> [논리식 선언 A는 B보다 크거나 같다] --> A >= B<br>
<p class="Accent"> 4: A는 B 보다 작거나 같다</p> --> [논리식 선언 A는 B보다 작거나 같다] --> A <= B<br>
<p class="Accent"> 5: A는 B 보다 작다</p> --> [논리식 선언 A는 B보다 작다] --> A < B<br>
</p>
</div>
</div>
</body>
</html>
\ No newline at end of file
const toggleBtn = document.querySelector('.menu_toggle');
const menu = document.querySelector('.menu_bar_content');
const icons = document.querySelector('.menu_bar_icons');
const x1 = document.querySelector('#use');
const x2 = document.querySelector('#Variables');
const x3 = document.querySelector('#Parameters');
const x4 = document.querySelector('#Basic');
const x5 = document.querySelector('#Loop');
const x6 = document.querySelector('#IF');
const x7 = document.querySelector('#User');
const x8 = document.querySelector('#Bool');
const content1 = document.querySelector('.overall_usage');
const content2 = document.querySelector('.variables');
const content3 = document.querySelector('.parameter');
const content4 = document.querySelector('.basic_func');
const content5 = document.querySelector('.for');
const content6 = document.querySelector('.if');
const content7 = document.querySelector('.def');
const content8 = document.querySelector('.bool');
let temp = document.querySelector('.menu_bar_logo');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
})
\ No newline at end of file
})
x1.addEventListener('click', () =>{
temp.classList.toggle('active');
content1.classList.toggle('active');
temp = content1;
})
x2.addEventListener('click', () =>{
temp.classList.toggle('active');
content2.classList.toggle('active');
temp = content2;
})
x3.addEventListener('click', () =>{
temp.classList.toggle('active');
content3.classList.toggle('active');
temp = content3;
})
x4.addEventListener('click', () =>{
temp.classList.toggle('active');
content4.classList.toggle('active');
temp = content4;
})
x5.addEventListener('click', () =>{
temp.classList.toggle('active');
content5.classList.toggle('active');
temp = content5;
})
x6.addEventListener('click', () =>{
temp.classList.toggle('active');
content6.classList.toggle('active');
temp = content6;
})
x7.addEventListener('click', () =>{
temp.classList.toggle('active');
content7.classList.toggle('active');
temp = content7;
})
x8.addEventListener('click', () =>{
temp.classList.toggle('active');
content8.classList.toggle('active');
temp = content8;
})
......