단계 1. 2행 3열 짜리 테이블을 html로 만들고 각각에 칸에 1부터 6까지 넣는다.
(css를 통해 table과 td에 border 속성을 준다.)

A. 해답
<!DOCTYPE html> <html> <head> <title>테이블 만들기1</title> <style> table, td { border:1px solid black; } </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> </table> </body> </html> <!-- 테이블은 <table>태그로 시작해서 </table>태그로 끝난다. 줄 하나를 만들고 싶으면 <tr></tr>을 만들고 그 안에 칸을 3개를 만들고 싶으면 <td></td>를 3개 넣으면 된다. -->
A. 내가 생각한 답
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendar</title> <style> table, td{ border: 1px solid black; } </style> </head> <body> <script> var table="<table>" var num = 1; for(var i=0;i<2;i++){ table+="<tr>"; for(var j=0;j<3;j++){ table+="<td>"+ num++ +"</td>"; } table+="</tr>"; } table+="</table>"; document.getElementById("demo").innerHTML=table; </script> </body> </html>
단계 2. 5행 7열 짜리 테이블을 html로 만들고 각각에 칸에 1에서 부터 31까지 넣는다.
(css를 통해 table과 td에 border 속성을 준다.)

A. 해답
<!DOCTYPE html> <html> <head> <title>테이블 만들기2</title> <style> table, td { border:1px solid black; } </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr> <tr> <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td> </tr> <tr> <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td> </tr> <tr> <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td> </tr> <tr> <td>29</td><td>30</td><td>31</td><td> </td><td> </td><td> </td><td> </td> </tr> </table> </body> </html> <!-- 는 공백 하나의 문자를 의미한다. 공백 두 개는 -->
A. 내가 생각한 답
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendar</title> <style> table, td{ border: 1px solid black; } </style> </head> <body> <script> var table="<table>" var num = 1; for(var i=0;i<5;i++){ table+="<tr>"; for(var j=0;j<7;j++){ if(num<=31){ table+="<td>"+ num++ +"</td>"; } else table+="<td>"+"</td>"; } table+="</tr>"; } table+="</table>"; document.getElementById("demo").innerHTML=table; </script> </body> </html>
단계 3. html에 div 태그를 하나 만들고 id를 'cal'이라고 준다.
자바스크립트로 div태그에 "안녕하세요."라는 문자열을 출력한다.
A. 해답
<!DOCTYPE html> <html> <head> <title>테이블 만들기3</title> </head> <body> <div id = "calendar"></div> <script> document.getElementById("calendar").innerHTML = "안녕하세요."; </script> </body> </html> <!--innerHTML을 통해서 출력할 수 있다.-->
A. 내가 생각한 답
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendar</title> </head> <body> <div id="cal"> </div> <script> document.getElementById("cal").innerHTML="안녕하세요."; </script> </body> </html>
단계 4. javascript로 text라는 변수를 하나 만들고, 그 값에 다음 내용의 테이블을 저장한다.
5행 7열짜리 테이블을 만들고 각각의 칸에 1부터 31까지 1씩 증가시킨 값을 넣는다.
그리고 html에 div 태그에 'cal' 이라는 id를 만들고 그 id에 테이블을 출력한다.
(css를 통해 table과 td에 border 속성을 준다.)
A. 해답
<!DOCTYPE html> <html> <head> <title>테이블 만들기4</title> <style> table, td { border:1px solid black; } </style> </head> <body> <div id = "calendar"></div> <script> var text = ""; text += "<table>"; text += "<tr>"; text += "<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>" text += "</tr>" text += "<tr>" text += "<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>" text += "</tr>" text += "<tr>" text += "<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>" text += "</tr>" text += "<tr>" text += "<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>" text += "</tr>" text += "<tr>" text += "<td>29</td><td>30</td><td>31</td><td> </td><td> </td><td> </td><td> </td>" text += "</tr>" text += "</table>" document.getElementById("calendar").innerHTML = text; </script> </body> </html>
A. 내가 생각한 답
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendar</title> <style> table, td{ border: 1px solid black; } </style> </head> <body> <div id="cal"></div> <script> var text="<table>" var num = 1; for(var i=0;i<5;i++){ text+="<tr>"; for(var j=0;j<7;j++){ if(num<=31){ text+="<td>"+ num++ +"</td>"; } else text+="<td>"+"</td>"; } text+="</tr>"; } text+="</table>"; document.getElementById("cal").innerHTML=text; </script> </body> </html>
단계5.
유지 보수를 편하게 하기 위해 css와 javascript를 외부파일로 만든다.

A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기5</title> <link rel="stylesheet" type="text/css" href="5.css"> // css 삽입 방법 </head> <body> <div id = "calendar"></div> <script src="5.js"></script> // JavaScript 삽입 방법 </body> </html>
- CSS
table, td { border:1px solid black; }
- JavaScript
var dateText = ""; dateText += "<table>"; dateText += "<tr>"; dateText += "<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>" dateText += "</tr>" dateText += "<tr>" dateText += "<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>" dateText += "</tr>" dateText += "<tr>" dateText += "<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>" dateText += "</tr>" dateText += "<tr>" dateText += "<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>" dateText += "</tr>" dateText += "<tr>" dateText += "<td>29</td><td>30</td><td>31</td><td> </td><td> </td><td> </td><td> </td>" dateText += "</tr>" dateText += "</table>" document.getElementById("calendar").innerHTML = dateText;
A. 내가 생각한 답
- HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="calendar.css" type="text/css"> <title>Calendar</title> </head> <body> <div id="cal"></div> <script src="calendar.js"></script> </body> </html>
- CSS
table, td{ border: 1px solid black; }
- JavaScript
var text="<table>" var getdate(); var num = 1; for(var i=0;i<5;i++){ text+="<tr>"; for(var j=0;j<7;j++){ if(num<=31){ text+="<td>"+ num++ +"</td>"; } else text+="<td>"+"</td>"; } text+="</tr>"; } text+="</table>"; document.getElementById("cal").innerHTML=text;
단계 6. 단계 4에서 그냥 문자열 형태로 되있던 것을 for문을 이용하여 text에 저장해 보자.
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기6</title> <link rel="stylesheet" type="text/css" href="6.css"> </head> <body> <div id = "calendar"></div> <script src="6.js"></script> </body> </html>
- CSS
table, td { border:1px solid black; }
- JavaScript
var numOfWeek = 0, day=1, i=0, j=0; var dateText = ""; dateText += "<table>"; for(i=0;i<5;i++) { dateText += "<tr>"; for(j=0;j<7;j++) { dateText += "<td>" + day++ + "</td>"; // day 후치연산자 사용 } dateText += "</tr>" } dateText += "</table>" document.getElementById("calendar").innerHTML = dateText;
단계 7. 이번 달이 며칠까지 있는지 구한다.
그리고 1일부터 그 날짜까지 출력한다.
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기7</title> <link rel="stylesheet" type="text/css" href="7.css"> </head> <body> <div id = "cal"></div> <script src="7.js"></script> </body> </html>
- CSS
table, td { border:1px solid black; }
- JavaScript
// 윤년 구하는 방법 // 첫번째. 년을 4로 나누어 떨어지면 윤년이다. // 두번째. 첫번째 중에서 100으로 나누어 떨어지는 년은 윤년이 아니다. // 세번째. 년이 400으로 나누어 떨어지면 윤년이다. var now = new Date(); // Date 객체를 만든다. 그러면 지금이 몇년도인지, 몇월, 며칠, 무슨 요일인지를 알 수가 있다. var curYear = now.getFullYear(); // 올해 년도를 구한다. 4자리 숫자를 돌려줌 var curMonth = now.getMonth(); // 현재 달을 구한다. var lastDay = getLastDayOfMonth(); var text = ""; var date = 1; function getLastDayOfMonth() // 달이 며칠인지 구하는 함수. { var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 1월부터 12월까지의 날 수를 배열로 만든다. var mon2; if ( (curYear % 4 == 0) && (curYear % 100 != 0) ) mon2 = true; // 결과 : 윤년 else if(curYear % 400 == 0) mon2 = true; // 결과 : 윤년 else mon2 = false; // 결과 : 평년 lastDayOfMon[1] = (mon2) ? 29 : 28; // 윤년이면 2월에 29를 저장. 아니면 28을 저장. (삼항연산자) return lastDayOfMon[curMonth]; // 현재 달이 며칠인지 리턴 } text += "<table>"; for(var i=0;i<5;i++) { text += "<tr>"; for(var j=0;j<7;j++) { if(date <= lastDay) text += "<td>" + date++ + "</td>"; // 마지말 날이 되기까지 1씩 증가시킨다. else text += "<td> </td>"; // 마지막 날이 넘어가면 빈 칸 만을 출력한다. } text += "</tr>" } text += "</table>" document.getElementById("cal").innerHTML = text;
// Tip : 윤년이란? 2월에 29일을 둔 해를 의미 ↔ 28일까지 있는 해는 평년
단계 8. 이번 달의 1일이 무슨 요일인지 구한다.
그리고 첫번째 열을 일요일 그 다음 열을 월요일 이런 식으로 이어질 때
1일을 해당 요일 열로 옮기고 그 다음 숫자도 그 뒤를 따르도록 한다.
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기8</title> <link rel="stylesheet" type="text/css" href="8.css"> </head> <body> <div id = "cal"></div> <script src="8.js"></script> </body> </html>
- CSS
table, td { border-style:solid; border-width: 1; }
- JavaScript
var now = new Date(); var curYear = now.getFullYear(); var curMonth = now.getMonth(); var lastDay = getLastDayOfMonth(); var text = ""; var date = 1; var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1); // 올해 이번달 1일이 무슨 요일인지 구하기 위한 날짜 객체를 만든다. var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay(); // 위에서 만든 날짜 객체를 통해 1일이 무슨 요일인지 구한다. 요일은 0 - 일요일, 1 - 월요일, 2 - 화요일 ... var cell = 0; var numOfWeeks = Math.floor((firstDayOfTheWeek + lastDay)/7); // 요일의 줄 수를 구한다. numOfWeeks = (firstDayOfTheWeek + lastDay)%7==0? numOfWeeks : numOfWeeks+1; // 요일의 줄 수가 7로 나누어 떨어지지 않으면 1을 더한다. function getLastDayOfMonth() { var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var mon2; if ( (curYear % 4 == 0) && (curYear % 100 != 0) ) mon2 = true; else if(curYear % 400 == 0) mon2 = true; else mon2 = false; lastDayOfMon[1] = (mon2) ? 29 : 28; return lastDayOfMon[curMonth]; } text += "<table>"; for(var i=0;i<numOfWeeks;i++) // 줄 { text += "<tr>"; for(var j=0;j<7;j++) // 칸 { if(cell<firstDayOfTheWeek) text += "<td> </td>"; // 첫 날이 되기까지 빈칸을 출력한다. else if(date <= lastDay) text += "<td>" + date++ + "</td>"; // 마지말 날이 되기까지 1씩 증가시킨다. else text += "<td> </td>"; // 마지막 날이 넘어가면 빈칸만 출력한다. cell++; } text += "</tr>" } text += "</table>" document.getElementById("cal").innerHTML = text;
단계 9. 테이블에 "일월화수목금토일" 을 넣는다.
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기9</title> <link rel="stylesheet" type="text/css" href="9.css"> </head> <body> <div id = "cal"></div> <script src="9.js"></script> </body> </html>
- CSS
table, td { border-style:solid; border-width: 1; }
- JavaScript
var now = new Date(); var curYear = now.getFullYear(); var curMonth = now.getMonth(); var lastDay = getLastDayOfMonth(); var text = ""; var date = 1; var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1); var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay(); var cell = 0; var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"]; // 요일을 배열화함 var numOfWeeks = Math.floor((firstDayOfTheWeek + lastDay)/7); // 요일의 줄 수를 구한다. numOfWeeks = (firstDayOfTheWeek + lastDay)%7==0? numOfWeeks : numOfWeeks+1; // 요일의 줄 수가 7로 나누어 떨어지지 않으면 1을 더한다. function getLastDayOfMonth() { var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var mon2; if ( (curYear % 4 == 0) && (curYear % 100 != 0) ) mon2 = true; else if(curYear % 400 == 0) mon2 = true; else mon2 = false; lastDayOfMon[1] = (mon2) ? 29 : 28; return lastDayOfMon[curMonth]; } text += "<table>"; text += "<tr>" for(var i=0;i<7;i++) text += "<td>" + dayOfTheWeek[i] + "</td>"; // 일 월 화 수 목 금 토 문자열 추가 text += "</tr>" for(var i=0;i<numOfWeeks;i++) { text += "<tr>"; for(var j=0;j<7;j++) { if(cell<firstDayOfTheWeek) text += "<td> </td>"; else if(date <= lastDay) text += "<td>" + date++ + "</td>"; else text += "<td> </td>"; cell++; } text += "</tr>" } text += "</table>" document.getElementById("cal").innerHTML = text;
단계 10. 테이블에 년과 월을 출력한다.
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기10</title> <link rel="stylesheet" type="text/css" href="10.css"> </head> <body> <div id = "cal"></div> <script src="10.js"></script> </body> </html>
- CSS
table, td { border-style:solid; border-width: 1; }
- JavaScript
var now = new Date(); var curYear = now.getFullYear(); var curMonth = now.getMonth(); var lastDay = getLastDayOfMonth(); var text = ""; var date = 1; var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1); var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay(); var cell = 0; var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"]; var numOfWeeks = Math.floor((firstDayOfTheWeek + lastDay)/7); // 요일의 줄 수를 구한다. numOfWeeks = (firstDayOfTheWeek + lastDay)%7==0? numOfWeeks : numOfWeeks+1; // 요일의 줄 수가 7로 나누어 떨어지지 않으면 1을 더한다. function getLastDayOfMonth() { var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var mon2; if ( (curYear % 4 == 0) && (curYear % 100 != 0) ) mon2 = true; else if(curYear % 400 == 0) mon2 = true; else mon2 = false; lastDayOfMon[1] = (mon2) ? 29 : 28; return lastDayOfMon[curMonth]; } text += "<table>"; text += "<th colspan=7>"; // 7칸을 하나로 합친다. text += curYear + "년 " + (curMonth + 1) + "월"; // 년과 월을 출력한다. 월은 0부터 시작하니까 1을 추가한다. text += "</th>"; text += "<tr>" for(var i=0;i<7;i++) text += "<td>" + dayOfTheWeek[i] + "</td>"; text += "</tr>" for(var i=0;i<numOfWeeks;i++) { text += "<tr>"; for(var j=0;j<7;j++) { if(cell<firstDayOfTheWeek) text += "<td> </td>"; else if(date <= lastDay) text += "<td>" + date++ + "</td>"; else text += "<td> </td>"; cell++; } text += "</tr>" } text += "</table>" document.getElementById("cal").innerHTML = text;
단계 11. 현재 날짜에 현재 시간을 출력한다.
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기11</title> <link rel="stylesheet" type="text/css" href="11.css"> </head> <body> <div id = "cal"></div> <script src="11.js"></script> </body> </html>
- CSS
table, td { border-style:solid; border-width: 1; }
- JavaScript
var now = new Date(); var curYear = now.getFullYear(); var curMonth = now.getMonth(); var lastDay = getLastDayOfMonth(); var text = ""; var date = 1; var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1); var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay(); var cell = 0; var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"]; var numOfWeeks = Math.floor((firstDayOfTheWeek + lastDay)/7); // 요일의 줄 수를 구한다. numOfWeeks = (firstDayOfTheWeek + lastDay)%7==0? numOfWeeks : numOfWeeks+1; // 요일의 줄 수가 7로 나누어 떨어지지 않으면 1을 더한다. function getLastDayOfMonth() { var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var mon2; if ( (curYear % 4 == 0) && (curYear % 100 != 0) ) mon2 = true; else if(curYear % 400 == 0) mon2 = true; else mon2 = false; lastDayOfMon[1] = (mon2) ? 29 : 28; return lastDayOfMon[curMonth]; } function getTime() // 현재 시간을 구한다. { var hour = now.getHours(); // 현재 시간을 구하는 것 var minute = now.getMinutes(); // 현재 분을 구하는 것 var ampm; if (hour >= 12){ // 오전, 오후 구하는 것 hour -= 12; ampm = "오후"; } else ampm = "오전"; hour = (hour == 0) ? 12 : hour; // 정오는 12시로 출력. if (minute < 10) minute = "0" + minute; // 문자열 + 숫자 = 문자열 - 결과 ex) 01분 return ampm + hour + ":" + minute; // 시간을 문자열을 조합하여 문자열 반환 } text += "<table>"; text += "<th colspan=7>"; text += curYear + "년 " + (curMonth + 1) + "월"; text += "</th>"; text += "<tr>" for(var i=0;i<7;i++) text += "<td>" + dayOfTheWeek[i] + "</td>"; text += "</tr>" for(var i=0;i<numOfWeeks;i++) { text += "<tr>"; for(var j=0;j<7;j++) { if(cell<firstDayOfTheWeek) text += "<td> </td>"; else if(date <= lastDay) { if(date == now.getDate()) // now(오늘의 날짜).getDate() = 오늘 몇일인지 나오는 것 { text += "<td>" + date++ + "<br>"; // 오늘 날짜에 시간을 출력하게 한 것 text += getTime() + "</td>" } else text += "<td>" + date++ + "</td>"; } else text += "<td> </td>"; cell++; } text += "</tr>" } text += "</table>" document.getElementById("cal").innerHTML = text;
단계 12. td의 width 80, height 40을 준다.
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기12</title> <link rel="stylesheet" type="text/css" href="12.css"> </head> <body> <div id = "cal"></div> <script src="12.js"></script> </body> </html>
- CSS
table, td { border-style:solid; border-width: 1; } td { width:80px; height:40px; }
- JavaScript
var now = new Date(); var curYear = now.getFullYear(); var curMonth = now.getMonth(); var lastDay = getLastDayOfMonth(); var text = ""; var date = 1; var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1); var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay(); var cell = 0; var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"]; function getLastDayOfMonth() { var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var mon2; if ( (curYear % 4 == 0) && (curYear % 100 != 0) ) mon2 = true; else if(curYear % 400 == 0) mon2 = true; else mon2 = false; lastDayOfMon[1] = (mon2) ? 29 : 28; return lastDayOfMon[curMonth]; } function getTime() // 현재 시간을 구한다. { var hour = now.getHours(); var minute = now.getMinutes(); var ampm; if (hour >= 12){ hour -= 12; ampm = "오후"; } else ampm = "오전"; hour = (hour == 0) ? 12 : hour; // 정오는 12시로 출력. if (minute < 10) minute = "0" + minute; return ampm + hour + ":" + minute; // 시간을 문자열을 조합하여 리턴 } text += "<table>"; text += "<th colspan=7>"; text += curYear + "년 " + (curMonth + 1) + "월"; text += "</th>"; text += "<tr>" for(var i=0;i<7;i++) text += "<td>" + dayOfTheWeek[i] + "</td>"; text += "</tr>" for(var i=0;i<5;i++) { text += "<tr>"; for(var j=0;j<7;j++) { if(cell<firstDayOfTheWeek) text += "<td> </td>"; else if(date <= lastDay) { if(date == now.getDate()) { text += "<td>" + date++ + "<br>"; text += getTime() + "</td>" } else text += "<td>" + date++ + "</td>"; } else text += "<td> </td>"; cell++; } text += "</tr>" } text += "</table>" document.getElementById("cal").innerHTML = text;
단계 13. 테이블을 가운데 정렬한다.
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기13</title> <link rel="stylesheet" type="text/css" href="13.css"> </head> <body> <div id = "cal"></div> <script src="13.js"></script> </body> </html>
- CSS
table { margin: 0 auto; } table, td { border-style:solid; border-width: 1; } td { width:80px; height:40px; }
- JavaScript
var now = new Date(); var curYear = now.getFullYear(); var curMonth = now.getMonth(); var lastDay = getLastDayOfMonth(); var text = ""; var date = 1; var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1); var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay(); var cell = 0; var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"]; function getLastDayOfMonth() { var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var mon2; if ( (curYear % 4 == 0) && (curYear % 100 != 0) ) mon2 = true; else if(curYear % 400 == 0) mon2 = true; else mon2 = false; lastDayOfMon[1] = (mon2) ? 29 : 28; return lastDayOfMon[curMonth]; } function getTime() // 현재 시간을 구한다. { var hour = now.getHours(); var minute = now.getMinutes(); var ampm; if (hour >= 12){ hour -= 12; ampm = "오후"; } else ampm = "오전"; hour = (hour == 0) ? 12 : hour; // 정오는 12시로 출력. if (minute < 10) minute = "0" + minute; return ampm + hour + ":" + minute; // 시간을 문자열을 조합하여 리턴 } text += "<table>"; text += "<th colspan=7>"; text += curYear + "년 " + (curMonth + 1) + "월"; text += "</th>"; text += "<tr>" for(var i=0;i<7;i++) text += "<td>" + dayOfTheWeek[i] + "</td>"; text += "</tr>" for(var i=0;i<5;i++) { text += "<tr>"; for(var j=0;j<7;j++) { if(cell<firstDayOfTheWeek) text += "<td> </td>"; else if(date <= lastDay) { if(date == now.getDate()) { text += "<td>" + date++ + "<br>"; text += getTime() + "</td>" } else text += "<td>" + date++ + "</td>"; } else text += "<td> </td>"; cell++; } text += "</tr>" } text += "</table>" document.getElementById("cal").innerHTML = text;
단계 14. th에 폰트 size를 2배로 하고 배경색은 aqua로 한다.
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기14</title> <link rel="stylesheet" type="text/css" href="14.css"> </head> <body> <div id = "cal"></div> <script src="14.js"></script> </body> </html>
- CSS
table { margin: 0 auto; } table, td { border-style:solid; border-width: 1; } td { width:80px; height:40px; } th { background-color: aqua; font-size:2em; }
- JavaScript
var now = new Date(); var curYear = now.getFullYear(); var curMonth = now.getMonth(); var lastDay = getLastDayOfMonth(); var text = ""; var date = 1; var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1); var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay(); var cell = 0; var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"]; function getLastDayOfMonth() { var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var mon2; if ( (curYear % 4 == 0) && (curYear % 100 != 0) ) mon2 = true; else if(curYear % 400 == 0) mon2 = true; else mon2 = false; lastDayOfMon[1] = (mon2) ? 29 : 28; return lastDayOfMon[curMonth]; } function getTime() // 현재 시간을 구한다. { var hour = now.getHours(); var minute = now.getMinutes(); var ampm; if (hour >= 12){ hour -= 12; ampm = "오후"; } else ampm = "오전"; hour = (hour == 0) ? 12 : hour; // 정오는 12시로 출력. if (minute < 10) minute = "0" + minute; return ampm + hour + ":" + minute; // 시간을 문자열을 조합하여 리턴 } text += "<table>"; text += "<th colspan=7>"; text += curYear + "년 " + (curMonth + 1) + "월"; text += "</th>"; text += "<tr>" for(var i=0;i<7;i++) text += "<td>" + dayOfTheWeek[i] + "</td>"; text += "</tr>" for(var i=0;i<5;i++) { text += "<tr>"; for(var j=0;j<7;j++) { if(cell<firstDayOfTheWeek) text += "<td> </td>"; else if(date <= lastDay) { if(date == now.getDate()) { text += "<td>" + date++ + "<br>"; text += getTime() + "</td>" } else text += "<td>" + date++ + "</td>"; } else text += "<td> </td>"; cell++; } text += "</tr>" } text += "</table>" document.getElementById("cal").innerHTML = text;
단계 15. 요일이 있는 칸의 id를 "dayOfTheWeek"이라고 주고,
글자를 가운데 정렬 배경색을 pink로 주자.
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>테이블 만들기15</title> <link rel="stylesheet" type="text/css" href="15.css"> </head> <body> <div id = "cal"></div> <script src="15.js"></script> </body> </html>
- CSS
table { margin: 0 auto; } table, td { border-style:solid; border-width: 1; } td { width:80px; height:40px; } th { background-color: aqua; font-size:2em; } .dayOfTheWeek { text-align: center; background-color:pink; }
- JavaScript
var now = new Date(); var curYear = now.getFullYear(); var curMonth = now.getMonth(); var lastDay = getLastDayOfMonth(); var text = ""; var date = 1; var firstDayOfTheWeekInst = new Date(curYear, curMonth, 1); var firstDayOfTheWeek = firstDayOfTheWeekInst.getDay(); var cell = 0; var dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"]; function getLastDayOfMonth() { var lastDayOfMon = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var mon2; if ( (curYear % 4 == 0) && (curYear % 100 != 0) ) mon2 = true; else if(curYear % 400 == 0) mon2 = true; else mon2 = false; lastDayOfMon[1] = (mon2) ? 29 : 28; return lastDayOfMon[curMonth]; } function getTime() // 현재 시간을 구한다. { var hour = now.getHours(); var minute = now.getMinutes(); var ampm; if (hour >= 12){ hour -= 12; ampm = "오후"; } else ampm = "오전"; hour = (hour == 0) ? 12 : hour; // 정오는 12시로 출력. if (minute < 10) minute = "0" + minute; return ampm + hour + ":" + minute; // 시간을 문자열을 조합하여 리턴 } text += "<table>"; text += "<th colspan=7>"; text += curYear + "년 " + (curMonth + 1) + "월"; text += "</th>"; text += "<tr>" for(var i=0;i<7;i++) text += "<td class='dayOfTheWeek'>" + dayOfTheWeek[i] + "</td>"; text += "</tr>" for(var i=0;i<5;i++) { text += "<tr>"; for(var j=0;j<7;j++) { if(cell<firstDayOfTheWeek) text += "<td> </td>"; else if(date <= lastDay) { if(date == now.getDate()) { text += "<td>" + date++ + "<br>"; text += getTime() + "</td>" } else text += "<td>" + date++ + "</td>"; } else text += "<td> </td>"; cell++; } text += "</tr>" } text += "</table>" document.getElementById("cal").innerHTML = text;
# 버튼으로 움직일 수 있는 달력 만들기
A. 해답
- HTML
<!DOCTYPE html> <html> <head> <title>MENU</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="calendar.css"> </head> <body onload="showCalendar()"> <div id="calendar"></div> <script src="calendar.js"></script> <!-- <input type="button" value="<<" onclick="nextMonth(-1)"> <input type="button" value=">>" onclick="nextMonth(1)"> --> </body> </html> <!-- 일반적으로, 스크립트를 문서의 마지막(</body>) 이전에 삽입하면 굳이 이벤트를 이용하여 프로그래밍을 처리할 필요가 없다. 다만, 문서의 <head> 영역에 스크립트가 삽입되거나 외부의 파일에 정의되어 있다면 이벤트를 연결하여 문서의 로드시점에 맞게 처리해야 한다. onload 문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트이다(load 이벤트라고들 한다). JAVASCRIPT window.onload = function() { //실행될 코드 } 문서에 포함된 모든 콘텐츠가 로드된 후에 실행되기에 불필요한 로딩시간이 추가될 수 있다. 동일한 문서에 오직 onload는 하나만 존재해야 한다. 중복될 경우, 마지막 선언이 실행된다. 외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요하다. 외부의 자원(iframe, image, script)을 사용하는 경우에도 해당된다. <body> 요소에 속성(attribute)으로 지정될 수 있다. JAVASCRIPT <body onload="실행될 코드"> 위와 같이 사용된 경우, window.onload로 지정된 것은 무시된다. window 객체뿐만 아니라 원하는 객체(object)가 로드되었을때 실행될 코드를 설정할 수 있다. JAVASCRIPT document.getElementById("myFrame").onload = function() { //실행될 코드 } 이벤트를 직접 연결할 수도 있다. JAVASCRIPT window.addEventListener('load', function(){ //실행될 코드 }); jQuery load jQuery에서는 onload와 같은 동작을 하는 load 메소드를 제공한다. JAVASCRIPT $(window).load( function() { //실행될 코드 }) DOMContentLoaded HTML과 script가 로드된 시점에 발생하는 이벤트이다. JAVASCRIPT window.addEventListener('DOMContentLoaded', function(){ //실행될 코드 }) onload 이벤트보다 먼저 발생한다. 빠른 실행속도가 필요할때 적합하다. //DOM이 모두 로드 되었을 때 function domReady () { //처리할 내용 } jQuery ready 자바스크립트의 DOM 트리가 준비되었을때의 시점을 컨트롤하는 메소드로 DOMContentLoaded의 jQuery 버전이라 생각하자. JAVASCRIPT $(document).ready(function(){ //실행될 코드 }); onload 이벤트보다 먼저 발생한다. 즉, 문서의 모든 자원이 다운로드되었을때 발생하는 onload와 달리 DOM 트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할때 적합하다. 여러번 사용되면 선언 순서에 따라 순차적으로 실행된다. -->
- CSS
* { box-sizing:border-box; } ul { list-style-type: none; } body { font-family: Verdana,sans-serif; } table{ width:100%; border-collapse: collapse; } .month { padding: 70px 25px; width: 100%; background: #1abc9c; } .month ul { margin: 0; padding: 0; } .month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; } .month .prev { float: left; padding-top: 10px; } .month .next { float: right; padding-top: 10px; } .weekdays { margin: 0; padding: 10px 0; background-color: #ddd; } .weekdays td { width: 13.6%; color: #666; text-align: center; } .days { padding: 10px 0; background: #eee; margin: 0; } .days td { width: 13.6%; text-align: center; margin-bottom: 5px; font-size:12px; color: #777; } .days .active { padding: 5px; background: #1abc9c; color: white !important } tr td:nth-child(1){ color:red; } a{ text-decoration: none; color:white; } /* text-transform은 대문자로 또는 소문자로 바꾸는 속성이다. capitalize : 단어의 첫번째 글자를 대문자로 바꾼다. uppercase : 모든 글자를 대문자로 바꾼다. lowercase : 모든 글자를 소문자로 바꾼다. css는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 ! import를 붙인다. 문법 : property : value !important; 예를 달어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만든다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 글자색을 빨간색으로 유지한다. p { color: red !important; } p { color: blue; } 다시 속성 값을 재설정하고 싶으면 !important를 다시 붙인다. 예를 들어 다음은 문단의 글자색을 녹색으로 만든다. p { color: red ! important; } p { color: blue; } p { color: green !important; } */
- JavaScript
var calendar = { curYear:0, curMonth:0, curDate:1, theDayOfTheWeek:0, lastDay:0, numOfWeeks:0}; var month = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"]; function showCalendar() { var numOfWeek =0, day=1, i=0, j=0; var dateText = ""; var curMonth = 0, curYear = 0; getCalendar(); curMonth = new Date().getMonth(); curYear = new Date().getFullYear(); dateText += "<div class = 'month'>"; dateText += "<ul>"; dateText += "<li class='prev'><a href='#' onclick='nextMonth(-1)'>❮</a></li>"; dateText += "<li class='next'><a href='#' onclick='nextMonth(1)'>❯</a></li>"; dateText += "<li style='text-align:center'>"; dateText += month[calendar.curMonth] +"<br>"; dateText += "<span style='font-size:18px'>" + calendar.curYear + "</span>"; dateText += "</li>"; dateText += "</ul>"; dateText += "</div>"; dateText += "<table>"; dateText += "<tr class = 'weekdays'>"; dateText += "<td>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td>토</td>"; dateText += "</tr>"; for(i=0;i<calendar.numOfWeeks;i++) { dateText += "<tr class = 'days'>"; for(j=0;j<7;j++) { if(i*7+j<calendar.theDayOfTheWeek || day > calendar.lastDay) dateText += "<td> </td>"; else if(day == calendar.curDate && calendar.curMonth == curMonth && calendar.curYear == curYear) dateText += "<td class = 'active'>" + day++ + "</td>"; else dateText += "<td>" + day++ + "</td>"; } dateText += "</tr>"; } dateText += "</table>"; document.getElementById("calendar").innerHTML = dateText; } function getCalendar() { var date = null; if(calendar.curYear==0) { date = new Date(); calendar.curYear = date.getFullYear(); calendar.curMonth = date.getMonth(); calendar.curDate = date.getDate(); } else date = new Date(calendar.curYear, calendar.curMonth, 1); getLastDayOfTheMonth(); getNumberOfWeeks(date); } function getLastDayOfTheMonth() { var lastDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; if(calendar.curYear%4 == 0 && calendar.curYear%100 != 0){ lastDay[1] = 29; } else if(calendar.curYear%400==0){ lastDay[1] = 29; } calendar.lastDay = lastDay[calendar.curMonth]; } function getNumberOfWeeks(date) { calendar.theDayOfTheWeek = new Date(calendar.curYear, calendar.curMonth, 1).getDay(); calendar.numOfWeeks = Math.floor((calendar.theDayOfTheWeek + calendar.lastDay)/7); calendar.numOfWeeks = (calendar.theDayOfTheWeek + calendar.lastDay)%7==0? calendar.numOfWeeks : calendar.numOfWeeks+1; } function nextMonth(num) { calendar.curMonth += num; if(calendar.curMonth == -1) { calendar.curMonth = 11; calendar.curYear--; } else if(calendar.curMonth == 12) { calendar.curMonth = 0; calendar.curYear++; } showCalendar(); }