Manual Complete

@@ -113,6 +113,11 @@ a{
     font-family: 'Noto Sans KR';
     font-family: 'Noto Sans KR';
     color:var(--text-color);
     color:var(--text-color);
 }
 }
+.Accent{
+    font-size:20px;
+    font-weight: bold;
+    font-family: 'Noto Sans KR';
+}
 .overall_usage{
 .overall_usage{
     display:none;
     display:none;
     align-items:flex-start;
     align-items:flex-start;

@@ -58,14 +58,14 @@
         <div class="variables">
         <div class="variables">
             <h1>Assertion variables 사용 방법<br></h1>
             <h1>Assertion variables 사용 방법<br></h1>
             <p>변수 선언에는 몇 가지의 큰 틀이 존재합니다.<br>
             <p>변수 선언에는 몇 가지의 큰 틀이 존재합니다.<br>
-                1. 변수 선언 문자<br>
-                변수 선언 문자를 하는 것은 a = 'Hello World' 와 같은 경우를 의미합니다. [변수 선언 문자 a = Hello World]와 같이 읽어주시면 됩니다.<br>
-                2. 변수 선언 숫자<br>
-                변수 선언 숫자를 하는 것은 a = 4 와 같은 경우를 의미합니다. [변수 선언 숫자 a = 4]와 같이 읽어주시면 됩니다. <br>
-                3. 변수 선언 리스트<br> 
-                변수 선언 리스트를 하는 것은 a = [], a = [1, 2, 3] 과 같은 경우를 의미합니다. [변수 선언 리스트 a = 빈리스트 , 변수 선언 리스트 a = 1, 2, 3]와 같이 읽어주시면 됩니다.<br>
-                4. 변수 선언 함수<br>
-                변수 선언 함수를 하는 것은 a=sum(), a=len() 과 같은 내장함수를 사용하거나 사용자 정의 함수를 사용하는 경우를 의미합니다. [변수 선언 함수 a=, 기본 함수 사용 sum // 변수 선언 함수 a=, 기본 함수 사용 len] 과 같이 읽어주시면 됩니다.<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>
             </p>
         </div>
         </div>
         <div class="parameter">
         <div class="parameter">
@@ -80,9 +80,11 @@
             <h1>Basic Func 사용 방법<br></h1>
             <h1>Basic Func 사용 방법<br></h1>
             <p>Basic Func에는 파이썬의 내장 함수들이 들어있습니다.<br>
             <p>Basic Func에는 파이썬의 내장 함수들이 들어있습니다.<br>
                 대체적으로 같은 틀을 가지고 있으니 방법을 숙지해주세요.<br>
                 대체적으로 같은 틀을 가지고 있으니 방법을 숙지해주세요.<br>
-                input의 경우, [변수 선언 함수 a =, 기본 함수 사용 input] --> a = input(); 와 같이 출력됩니다.<br>
-                print의 경우, [기본 함수 사용 print, 파라미터 선언 a] --> print(a); 와 같이 출력됩니다.<br>
-                sum, max, min, len의 경우 [기본 함수 사용 sum, 파라미터 선언 a] --> sum(a); 와 같이 출력됩니다.<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>
             </p>
         </div>
         </div>
@@ -90,10 +92,11 @@
             <h1>Loop statements 사용 방법<br></h1>
             <h1>Loop statements 사용 방법<br></h1>
             <p>Loop statements는 반복문을 사용하는 방법입니다.<br>
             <p>Loop statements는 반복문을 사용하는 방법입니다.<br>
             반복문에는 for, while이 해당됩니다.<br>
             반복문에는 for, while이 해당됩니다.<br>
-            for의 경우 범위가 숫자일 경우엔, [반복문 선언 for a in range, 파라미터 선언 x] --> for a in range(x): 와 같이 출력됩니다.<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>
             만약 범위에 숫자를 넣는 것이 아닌, 리스트를 넣는다면 [반복문 선언 for a in, 파라미터 선언 x ] --> for a in x: 와 같이 출력됩니다.<br>
-            while의 경우, [반복문 선언 while, 논리 식 선언 ] --> while(논리 식): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<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>
             </p>
         </div>
         </div>
@@ -102,13 +105,31 @@
             <p>
             <p>
                 IF statements에는 조건식을 사용하는 방법이 들어있습니다.<br>
                 IF statements에는 조건식을 사용하는 방법이 들어있습니다.<br>
                 조건식에는 if, elif, else가 포함되며 이를 사용하시려면<br>
                 조건식에는 if, elif, else가 포함되며 이를 사용하시려면<br>
-                if의 경우, [조건문 사용 if, 논리 식 선언 ] --> if(논리 식 선언): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<br>
-                elif의 경우, [조건문 사용 else if, 논리 식 선언 ] --> elif(논리 식 선언): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<br>
-                else의 경우, [조건문 사용 else, 논리 식 선언 ] --> else(논리 식 선언): 와 같이 출력됩니다. (논리 식 선언 방법은 Bool logic을 참고해주세요.)<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>
             </p>
         </div>
         </div>
-        <div class="def"></div>
-        <div class="bool"></div>
     </div>
     </div>
 </body>
 </body>
 </html>
 </html>
\ No newline at end of file

@@ -18,33 +18,49 @@ const content6 = document.querySelector('.if');
 const content7 = document.querySelector('.def');
 const content7 = document.querySelector('.def');
 const content8 = document.querySelector('.bool');
 const content8 = document.querySelector('.bool');
 
 
-
+let temp = document.querySelector('.menu_bar_logo');
 toggleBtn.addEventListener('click', () => {
 toggleBtn.addEventListener('click', () => {
     menu.classList.toggle('active');
     menu.classList.toggle('active');
     icons.classList.toggle('active');
     icons.classList.toggle('active');
 })
 })
 
 
 x1.addEventListener('click', () =>{
 x1.addEventListener('click', () =>{
+    temp.classList.toggle('active');
     content1.classList.toggle('active');
     content1.classList.toggle('active');
+    temp = content1;
 })
 })
 x2.addEventListener('click', () =>{
 x2.addEventListener('click', () =>{
+    temp.classList.toggle('active');
     content2.classList.toggle('active');
     content2.classList.toggle('active');
+    temp = content2;
 })
 })
 x3.addEventListener('click', () =>{
 x3.addEventListener('click', () =>{
+    temp.classList.toggle('active');
     content3.classList.toggle('active');
     content3.classList.toggle('active');
+    temp = content3;
 })
 })
 x4.addEventListener('click', () =>{
 x4.addEventListener('click', () =>{
+    temp.classList.toggle('active');
     content4.classList.toggle('active');
     content4.classList.toggle('active');
+    temp = content4;
 })
 })
 x5.addEventListener('click', () =>{
 x5.addEventListener('click', () =>{
+    temp.classList.toggle('active');
     content5.classList.toggle('active');
     content5.classList.toggle('active');
+    temp = content5;
 })
 })
 x6.addEventListener('click', () =>{
 x6.addEventListener('click', () =>{
+    temp.classList.toggle('active');
     content6.classList.toggle('active');
     content6.classList.toggle('active');
+    temp = content6;
 })
 })
 x7.addEventListener('click', () =>{
 x7.addEventListener('click', () =>{
+    temp.classList.toggle('active');
     content7.classList.toggle('active');
     content7.classList.toggle('active');
+    temp = content7;
 })
 })
 x8.addEventListener('click', () =>{
 x8.addEventListener('click', () =>{
+    temp.classList.toggle('active');
     content8.classList.toggle('active');
     content8.classList.toggle('active');
+    temp = content8;
 })
 })