7.26 friday

KIMMZN · Jul 26, 2024 · 9e2ef29 · 9e2ef29
1 parent edefad4
commit 9e2ef29
Show file tree

Hide file tree

Showing 43 changed files with 531 additions and 2 deletions.
diff --git a/JS/ch07.Dom/31.ToDo.html b/JS/ch07.Dom/31.ToDo.html
@@ -53,7 +53,7 @@
             };
 
             const removeTodo = key => {
-                const item = document.querySelector(`[data-key="${key}"]`);
+                const item = document.querySelector(`[data-key="${key}"]`); //<div id="div0"> // $(`#div${key}`)
                 todoList.removeChild(item);
             };
 

diff --git a/Libraries/01.여러가지.html b/Libraries/01.여러가지.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>여러가지 라이브러리;</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script
+      src="https://kit.fontawesome.com/fdb840a8cc.js"
+      crossorigin="anonymous"
+    ></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script>
+        $(document).ready(() => {
+            $('#date').on('change', () => {
+                $('#result').text($('#date').val());
+            }) 
+        })
+    </script>
+     <style>
+    * { font-family: 'Noto Sans KR', sans-serif; }
+    a { text-decoration: none; color: inherit; }
+
+  </style>
+</head>
+<body>
+    <div class="container-fluid p-4 bg-primary text-white text-center fixed-top">
+        <h1>여러가지 라이브러리 섞어 쓰기</h1>
+        <p>Bootstrap, 한글 폰트, 아이콘(fontawesome), jQuery</p>
+    </div>
+
+    <div class="container" style="margin-top: 200px;">
+        <div class="row">
+            <div class="col-4"></div>
+            <div class="col-4">
+                <a href="#"><i class="fa-solid fa-calendar-days"></i> 데이트 타입</a><br>
+                <input type="date" class="form-control" id="date">
+                <br>
+                <a href="#"><i class="fa-regular fa-clock"></i> 데이트타임 타입</a><br>
+                <input type="datetime-local" class="form-control">
+                <br>
+                <a href="#"><i class="fa-solid fa-file"></i> 파일 타입</a><br>
+                <input type="file" class="form-control"><br>
+                <input type="file" class="form-control" multiple>
+                <hr>
+                <p id="result"></p>
+
+            </div>
+            <div class="col-4"></div>
+        </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/Libraries/11.chart.html b/Libraries/11.chart.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>차트.js</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script
+      src="https://kit.fontawesome.com/fdb840a8cc.js"
+      crossorigin="anonymous"></script>
+      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script>
+        $(document).ready(() => {
+            $('#date').on('change', () => {
+                $('#result').text($('#date').val());
+            }) 
+        })
+    </script>
+    <script>
+        window.onload = () => {
+            const ctx = document.getElementById('myChart');
+
+            new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: ['뻘갱', '파랑', 'Yellow', 'Green', 'Purple', 'Orange'],
+                    datasets: [{
+                        label: '# 투표 결과',
+                        data: [12, 19, 3, 5, 2, 3],
+                        borderWidth: 3
+                        }]
+                    },
+                options: {
+                    scales: {
+                         y: {
+                            beginAtZero: true
+                         }
+                    }
+                }
+                });
+            }
+    </script>
+     <style>
+    * { font-family: 'Noto Sans KR', sans-serif; }
+    a { text-decoration: none; color: inherit; }
+
+  </style>
+</head>
+<body>
+    <div class="container-fluid p-4 bg-primary text-white text-center fixed-top">
+        <h1>Chart.js</h1>
+        <p>Get started</p>
+    </div>
+
+    <div class="container" style="margin-top: 200px;">
+        <div class="row">
+            <div class="col-2"></div>
+            <div class="col-8">
+                <canvas id="myChart" width="100%"></canvas>
+
+
+
+
+            </div>
+            <div class="col-2"></div>
+        </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/Libraries/12.Line chart.html b/Libraries/12.Line chart.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>차트.js</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script
+      src="https://kit.fontawesome.com/fdb840a8cc.js"
+      crossorigin="anonymous"></script>
+      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script>
+        $(document).ready(() => {
+            $('#date').on('change', () => {
+                $('#result').text($('#date').val());
+            }) 
+        })
+    </script>
+    <script>
+        window.onload = () => {
+            const ctx = document.getElementById('myChart');
+            let xValues = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
+            let yValues = [3, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];
+
+            new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: xValues,
+                    datasets: [{
+                        fill: false,
+                        lineTension: 0.5,
+                        backgroundColor: 'rgba(0, 0, 255, 1.0)',
+                        borderColor: 'rgba(0, 0, 255, 0.1)',
+                        data: yValues
+                        }]
+                    },
+                options: {
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                         }
+                    },
+                    plugins: {
+                        legend: {display: false},
+                        title: {
+                            display: true,
+                            text: '선 그래프',
+                            padding: {top: 10, bottom: 20},
+                            font: {size: 20}
+                        }
+                    }
+                }
+                });
+            }
+    </script>
+     <style>
+    * { font-family: 'Noto Sans KR', sans-serif; }
+    a { text-decoration: none; color: inherit; }
+
+  </style>
+</head>
+<body>
+    <div class="container-fluid p-4 bg-primary text-white text-center fixed-top">
+        <h1>Chart.js</h1>
+        <p>선 그래프(Line chart)</p>
+    </div>
+
+    <div class="container" style="margin-top: 200px;">
+        <div class="row">
+            <div class="col-2"></div>
+            <div class="col-8">
+                <canvas id="myChart" width="100%"></canvas>
+
+
+
+
+            </div>
+            <div class="col-2"></div>
+        </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/Libraries/13.산점도.html b/Libraries/13.산점도.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chart.js</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://kit.fontawesome.com/fdb840a8cc.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        * { font-family: 'Noto Sans KR', sans-serif; }
+        a { text-decoration: none; color: inherit; }
+    </style>
+    <script>
+        window.onload = () => {
+            const ctx = document.getElementById('myChart');
+            let myData = [];
+            for (let i = 0; i < 100; i++) {
+                let xVal = Math.random() * 120 + 40;
+                let yVal = Math.random() * 10 + 6;
+                myData.push({x: xVal, y: yVal});
+            }
+
+            new Chart(ctx, {
+                type: 'scatter',
+                data: {
+                    datasets: [{
+                        label: '무작위 데이터',
+                        pointRadius: 3,
+                        pointBackgroundColor: 'rgb(100,100,245)',
+                        data: myData
+                    }]
+                },
+                options: {
+                    scales: {
+                        xAxes: [{ticks: {min: 40, max: 160}}],
+                        yAxes: [{ticks: {min: 6, max: 16}}]
+                    },
+                    plugins: {
+                        legend: {display: true},
+                        title: {
+                            display: true,
+                            text: '내가 만든 산점도',
+                            padding: {top: 10, bottom: 20},
+                            font: {size: 20}
+                        }
+                    }
+                }
+            });
+        }
+    </script>
+</head>
+<body>
+    <div class="container-fluid p-4 bg-primary text-white text-center fixed-top">
+		<h1>Chart.js</h1>
+        <p>산점도(Scatter plot)</p>
+	</div>
+
+    <div class="container" style="margin-top: 200px;">
+        <div class="row">
+            <div class="col-2"></div>
+            <div class="col-8">
+                <canvas id="myChart" width="100%"></canvas>
+            </div>
+            <div class="col-2"></div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Libraries/31.에디터 필요성.html b/Libraries/31.에디터 필요성.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>에디터의 필요성;</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script
+      src="https://kit.fontawesome.com/fdb840a8cc.js"
+      crossorigin="anonymous"
+    ></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script>
+        $(document).ready(() => {
+            $('#date').on('change', () => {
+                $('#result').text($('#date').val());
+            }) 
+        })
+    </script>
+     <style>
+    * { font-family: 'Noto Sans KR', sans-serif; }
+    a { text-decoration: none; color: inherit; }
+
+  </style>
+  <script>
+    function show() {
+        let content = $('#content').val();
+        let changedContent = '';
+        for (let i = 0; i < content.length; i++) {
+            if (content.charAt(i) === '\n')
+                changedContent += '<br>';
+            else
+                changedContent += content.charAt(i);
+        }        
+        $('#result').html(changedContent);
+        $('#update').val(content);
+        $('#readonly').val(content);
+    }
+  </script>
+</head>
+<body>
+    <div class="container-fluid p-4 bg-primary text-white text-center fixed-top">
+        <h1>에디터의 필요성</h1>
+        <p>textarea의 한계;</p>
+    </div>
+
+    <div class="container" style="margin-top: 200px;">
+        <div class="row">
+            <div class="col-3"></div>
+            <div class="col-6">
+               <p>글 입력</p>
+               <textarea id="content" rows="5" class="form-control"></textarea>
+               <button class="btn btn-primary mx-auto mt-3" onclick="show()">확인</button>
+                <hr>
+                <p>글 읽기</p>
+                <p id="result"></p>
+                <hr>
+                <p>글 수정</p>
+                <textarea id="update" rows="5" class="form-control"></textarea>
+                <hr>
+                <p>readonly 글 읽기</p>
+                <textarea id="readonly" rows="5" class="form-control" readonly></textarea>
+
+            </div>
+            <div class="col-3"></div>
+        </div>
+
+    </div>
+
+</body>
+</html>