2023NewCNSMember · yoonsun123 · Aug 27, 2023 · Aug 27, 2023 · Aug 27, 2023 · Aug 27, 2023
diff --git a/1303/CNS 과제(1)/CNS 과제(0).fig b/1303/CNS 과제(1)/CNS 과제(0).fig
diff --git a/1303/CNS 과제(1)/Cns.html b/1303/CNS 과제(1)/Cns.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      .login {
+        text-align: center;
+        padding-top: 80px;
+        font-size: x-large;
+      }
+      .top {
+        width: 200%;
+        height: 30px;
+        box-shadow: 0px 3px 5px #c1c1c1;
+      }
+      .lys {
+        margin: auto;
+        margin-top: 150px;
+        width: 300px;
+        height: 400px;
+        background-color: rgb(255, 255, 255);
+        border: 1px solid #c1c1c1;
+        border-radius: 10px;
+      }
+      .id {
+        width: 200px;
+        height: 20px;
+        margin: auto;
+        margin-top: 110px;
+        background-color: white;
+        border: 1px solid #c1c1c1;
+        text-align: left;
+        font-size: 10px;
+        color: #909090;
+        padding-top: 10px;
+        padding-left: 10px;
+      }
+      .pass {
+        width: 200px;
+        height: 20px;
+        margin: auto;
+        margin-top: 30px;
+        background-color: white;
+        border: 1px solid #c1c1c1;
+        text-align: left;
+        font-size: 10px;
+        color: #909090;
+        padding-top: 10px;
+        padding-left: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="top"></div>
+    <div class="mom">
+      <div class="lys">
+        <div class="login">로그인</div>
+        <div class="id">아이디를 입력해주세요.</div>
+        <div class="pass">비밀번호를 입력해주세요.</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/1303/CNS 과제(2)/index.html b/1303/CNS 과제(2)/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>날씨 예보</title>
+    <link rel="stylesheet" type="text/css" href="weathr.css" />
+  </head>
+  <body>
+    <h1>How's the weather?</h1>
+    <p>대구광역시 달성군 구지면</p>
+    <p class="conTent"></p>
+    <table>
+      <tr>
+        <th>n일 후</th>
+        <th>최고/최저(℃)</th>
+        <th>강수량 오전/오후(%)</th>
+      </tr>
+      <tr>
+        <td class="days"></td>
+        <td class="outPut"></td>
+        <td class="output"></td>
+      </tr>
+    </table>
+    <p class="outPut"></p>
+    <p class="output"></p>
+
+    <script
+      src="https://code.jquery.com/jquery-3.7.0.min.js"
+      integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
+      crossorigin="anonymous"
+    ></script>
+    <script src="./weathr.js"></script>
+  </body>
+</html>
diff --git a/1303/CNS 과제(2)/weathr.css b/1303/CNS 과제(2)/weathr.css
@@ -0,0 +1,58 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  display: flex;
+  margin-top: 100px;
+  /* justify-content: center; */
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(rgb(47, 150, 163), rgb(48, 62, 143));
+  font-family: sans-serif;
+  color: white;
+}
+
+.conTent {
+  margin: 60px;
+  font-size: 80px;
+}
+
+.outPut {
+  font-size: 20px;
+  text-align: center;
+}
+
+.output {
+  font-size: 20px;
+  text-align: center;
+}
+
+table,
+td,
+th {
+  border: 1px solid white;
+  border-collapse: collapse;
+}
+table {
+  width: 50%;
+  height: 20vh;
+}
+th {
+  height: 9vh;
+  width: 3vw;
+}
+.days {
+  line-height: 15.5px;
+  font-size: 20px;
+  text-align: center;
+}
+.outPut {
+  line-height: 30px;
+}
+.output {
+  line-height: 30px;
+}
diff --git a/1303/CNS 과제(2)/weathr.js b/1303/CNS 과제(2)/weathr.js
@@ -0,0 +1,111 @@
+let date = new Date();
+let year = date.getFullYear();
+let month = "0" + (date.getMonth() + 1);
+let month2 = month.substr(-2);
+let day = "0" + date.getDate();
+let day2 = day.substr(-2);
+let initDate = year + month2 + day2;
+
+let hour = date.getHours();
+let minute = date.getMinutes();
+let sec = date.getSeconds();
+let nowTime = hour + "0" + "0";
+//console.log(initTime)
+
+if (hour >= 6 && hour < 18) initTime = "0600";
+else initTime = "1800";
+if (hour >= 0 && hour < 6) initDate -= 1;
+
+let initDame = initDate + initTime;
+console.log(initDame);
+
+$.ajax({
+  url: `https://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getVilageFcst?serviceKey=wD1v3TeCYcGgMmpbjqdtPA%2FBWkLhzUH2tLvEtEAU%2Bw52K2AVXXICxoqJqNXVLkBE1PqRJ8eUebMcbaD6s64rdQ%3D%3D&pageNo=1&numOfRows=1000&dataType=JSON&base_date=${initDate}&base_time=0500&nx=86&ny=86`,
+  success: function (short) {
+    console.log(short);
+    let itemss = short.response.body.items.item;
+
+    let temper = itemss.filter((item) => {
+      return item.category == "TMP";
+    });
+
+    let foundTemperature = false;
+
+    for (let i = 0; i < temper.length; i++) {
+      if (temper[i].fcstTime == nowTime && !foundTemperature) {
+        let content = temper[i].fcstValue + "℃";
+        $("p.conTent").append(content);
+        foundTemperature = true;
+        break;
+      }
+    }
+  },
+});
+
+$.ajax({
+  url: `https://apis.data.go.kr/1360000/MidFcstInfoService/getMidTa?serviceKey=wD1v3TeCYcGgMmpbjqdtPA%2FBWkLhzUH2tLvEtEAU%2Bw52K2AVXXICxoqJqNXVLkBE1PqRJ8eUebMcbaD6s64rdQ%3D%3D&pageNo=1&numOfRows=10&dataType=JSON&regId=11H10701&tmFc=${initDame}`,
+  success: function (result) {
+    console.log(result);
+    let item_s = result.response.body.items.item;
+    let Maxtemper = [];
+    let Mintemper = [];
+
+    Maxtemper.push(item_s[0].taMax3);
+    Maxtemper.push(item_s[0].taMax4);
+    Maxtemper.push(item_s[0].taMax5);
+    Maxtemper.push(item_s[0].taMax6);
+    Maxtemper.push(item_s[0].taMax7);
+    Maxtemper.push(item_s[0].taMax8);
+    Maxtemper.push(item_s[0].taMax9);
+    Maxtemper.push(item_s[0].taMax10);
+
+    Mintemper.push(item_s[0].taMin3);
+    Mintemper.push(item_s[0].taMin4);
+    Mintemper.push(item_s[0].taMin5);
+    Mintemper.push(item_s[0].taMin6);
+    Mintemper.push(item_s[0].taMin7);
+    Mintemper.push(item_s[0].taMin8);
+    Mintemper.push(item_s[0].taMin9);
+    Mintemper.push(item_s[0].taMin10);
+
+    let maxTemperContent = ""; // 출력될 내용을 저장할 변수
+    let j = 2;
+    for (let i = 0; i < Maxtemper.length; i++) {
+      j++;
+      maxTemperContent += Maxtemper[i] + "/" + Mintemper[i] + "<br>";
+      $("td.days").append("<br>" + j + "</br>");
+    }
+    $("td.outPut").append("<br>" + maxTemperContent + "<br>");
+  },
+});
+$.ajax({
+  url: `https://apis.data.go.kr/1360000/MidFcstInfoService/getMidLandFcst?serviceKey=wD1v3TeCYcGgMmpbjqdtPA%2FBWkLhzUH2tLvEtEAU%2Bw52K2AVXXICxoqJqNXVLkBE1PqRJ8eUebMcbaD6s64rdQ%3D%3D&pageNo=1&numOfRows=10&dataType=JSON&regId=11H10701&tmFc=${initDame}`,
+  success: function (data) {
+    console.log(data);
+    let items = data.response.body.items.item;
+    let rnStAm = [];
+    let rnStPm = [];
+
+    rnStAm.push(items[0].rnSt3Am);
+    rnStPm.push(items[0].rnSt3Pm);
+    rnStAm.push(items[0].rnSt4Am);
+    rnStPm.push(items[0].rnSt4Pm);
+    rnStAm.push(items[0].rnSt5Am);
+    rnStPm.push(items[0].rnSt5Pm);
+    rnStAm.push(items[0].rnSt6Am);
+    rnStPm.push(items[0].rnSt6Pm);
+    rnStAm.push(items[0].rnSt7Am);
+    rnStPm.push(items[0].rnSt7Pm);
+    rnStAm.push(items[0].rnSt8);
+    rnStAm.push(items[0].rnSt9);
+    rnStAm.push(items[0].rnSt10);
+
+    let rnContent = "";
+
+    for (let i = 0; i < rnStAm.length; i++) {
+      if (rnStPm[i] === undefined) rnContent += rnStAm[i] + "<br>";
+      else rnContent += rnStAm[i] + "/" + rnStPm[i] + "<br>";
+    }
+    $("td.output").append("<br>" + rnContent + "<br>");
+  },
+});