황진하 / 2017-1-WebServiceProgramming-2012104136

Go to a project
Toggle navigation Toggle navigation pinning
황진하
5de4926b 0 parents

수업 자료 추가

Inline Side-by-side
Showing 62 changed files with 1927 additions and 0 deletions
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset='utf-8'>
5 + <title>실습 1</title>
6 +</head>
7 +<body>
8 + <p>
9 + <a href="http://www.khu.ac.kr">경희대학교</a>
10 + </p>
11 + <p>컴퓨터공학과</p>
12 + <p>2017123456</p>
13 + <p>
14 + <h1>트와이스</h1>
15 + <i>Twice</i><br>
16 +
17 + </p>
18 +</body>
19 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset='utf-8'>
5 + <title>실습 2</title>
6 +</head>
7 +<body>
8 + <h1>
9 + <a href="http://twice.jype.com/">
10 + 트와이스
11 + </a>
12 + </h1>
13 + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/160507_Twice_guerrilla_concert.jpg/186px-160507_Twice_guerrilla_concert.jpg">
14 + <ul>
15 + <li>구성원</li>
16 + <ul>
17 + <li> 지효 </li>
18 + <li> 나연 </li>
19 + <li> 정연 </li>
20 + <li> 모모 </li>
21 + <li> 사나 </li>
22 + <li> 미나 </li>
23 + <li> 다현 </li>
24 + <li> 채영 </li>
25 + <li> 쯔위 </li>
26 + </ul>
27 + <li> 설명:
28 + <blockquote>
29 + 트와이스(2015년 10월 20일 ~ 현재)는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.
30 + 2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해 9명의 최종 멤버들이 선발되었으며,
31 + 2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고, 20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다. 2016년 4월 25일 두 번째 EP 앨범 《PAGE TWO》를 발매하였고, 데뷔 1주년인 2016년 10월 24일 세 번째 EP 앨범 《TWICEcoaster : LANE 1》을 발매하였다.
32 + </blockquote>
33 + </li>
34 + <li>소속사:
35 + <a href="http://www.jype.com/" target="blank">
36 + JYP 엔터테인먼트
37 + </a>
38 + </li>
39 + <li>
40 + 앨범
41 + <ol>
42 + <li><a href="https://ko.wikipedia.org/wiki/THE_STORY_BEGINS">THE STORY BEGINS</a></li>
43 + <li><a href="https://ko.wikipedia.org/wiki/PAGE_TWO">PAGE TWO</a></li>
44 + <li><a href="https://ko.wikipedia.org/wiki/TWICEcoaster_:_LANE_1">TWICEcoaster : LANE 1</a></li>
45 + </ol>
46 + </li>
47 + </ul>
48 +</body>
49 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 + <head>
4 + <meta charset="utf-8">
5 + <title>실습 3 - 테이블 만들기</title>
6 + </head>
7 +
8 + <body>
9 + <table border="1">
10 + <tr>
11 + <th>분류</th><th>제품명</th>
12 + <th>단가</th><th>수량</th>
13 + <th>금액</th>
14 + </tr>
15 + <tr>
16 + <td rowspan="3">공산품</td>
17 + <td>iPhone</td>
18 + <td>900,000</td>
19 + <td>2</td>
20 + <td>1,800,000</td>
21 + </tr>
22 + <tr>
23 + <td>LED TV</td>
24 + <td>3,000,000</td>
25 + <td>3</td>
26 + <td>9,000,000</td>
27 + </tr>
28 + <tr>
29 + <td colspan="3" style="text-align:center">소계</td>
30 + <td>10,800,000</td>
31 + </tr>
32 + <tr>
33 + <td rowspan="2">농산품</td>
34 + <td>인삼</td>
35 + <td>10,000</td>
36 + <td>200</td>
37 + <td>2,000,000</td>
38 + </tr>
39 + <tr>
40 + <td colspan="3" style="text-align:center">소계</td>
41 + <td>2,000,000</td>
42 + </tr>
43 + <tr>
44 + <td colspan="4" style="text-align:center">합계</td>
45 + <td>12,800,000</td>
46 + </tr>
47 + </table>
48 + </body>
49 +
50 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 + <head>
4 + <meta charset="utf-8">
5 + <title>실습 4 - form,table 만들기</title>
6 + </head>
7 + <body>
8 + <form action="#" method="post">
9 + <table border="1">
10 + <tr>
11 + <th>아이디</th>
12 + <td colspan="3">
13 + <input type="text" name="id"/>
14 + <input type="button" value="중복조회"/>
15 + </td>
16 + </tr>
17 + <tr>
18 + <th>비밀번호</th>
19 + <td>
20 + <input type="text" name="password"/>
21 + </td>
22 + <th>확인</th>
23 + <td>
24 + <input type="password" name="password_confirmation"/>
25 + </td>
26 + </tr>
27 + <tr>
28 + <th>이름</th>
29 + <td colspan="3">
30 + <input type="text" name="name"/>
31 + </td>
32 + </tr>
33 + <tr>
34 + <th>이메일</th>
35 + <td colspan="3">
36 + <input type="text" name="email"/>
37 + </td>
38 + </tr>
39 + <tr>
40 + <th>성별</th>
41 + <td colspan="3">
42 + <input type="radio" name="gender" value="m"/>남
43 + <input type="radio" name="gender" value="f"/>녀
44 + </td>
45 + </tr>
46 + <tr>
47 + <th>지역</th>
48 + <td colspan="3">
49 + <select name="location">
50 + <option value="seoul">서울</option>
51 + <option value="busan">부산</option>
52 + <option value="etc">기타</option>
53 + </select>
54 + </td>
55 + </tr>
56 + <tr>
57 + <td colspan="4">
58 + <input type="checkbox" name="tems"/>약관에 동의합니다.
59 + </td>
60 + </tr>
61 + </table>
62 + <input type="submit" value="회원가입" />
63 + </form>
64 + </body>
65 +</html>
1 +a {
2 + text-decoration: none;
3 + color: #2f58c2;
4 +}
5 +h1 {
6 + font-size: 3em;
7 + text-align: center;
8 + border: 2px solid #dd2c7c;
9 + background-color: #e442a8;
10 + width: 90%;
11 + border-radius: 10px;
12 + margin: 30px auto;
13 +}
14 +
15 +h1 > a {
16 + text-decoration: none;
17 + color: #fff;
18 +}
19 +
20 +#main-img {
21 + width: 100%
22 +}
23 +
24 +blockquote {
25 + border: 1px solid #f1f5a9;
26 + border-left: 30px solid #f1f5a9;
27 + padding: 10px;
28 + margin-left: 0px;
29 +}
30 +ul > li {
31 + margin: 10px;
32 +}
33 +
34 +span.type {
35 + font-size: 1.1em;
36 + margin-right: 2em;
37 + font-weight: bold;
38 +}
39 +
40 +.highlight {
41 + color: #e80859;
42 +}
43 +
44 +ol {
45 + margin: 1px 0;
46 + padding: 0;
47 + width: 100%;
48 +}
49 +
50 +ol > li {
51 + list-style: none;
52 + width: 200px;
53 + float: left;
54 + text-align: center;
55 + padding: 0 10px;
56 + line-height: 130px;
57 + background: #eee;
58 + margin: 10px 5px;
59 +}
1 +html{
2 + color: #000;
3 + background: #fff;
4 + padding: 20px 0;
5 + font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
6 +}
7 +
8 +.pagination {
9 + text-align: center;
10 + margin: 20px auto;
11 +}
12 +
13 +.pagination span.arrow{
14 + color: #246d9c;
15 + text-decoration: none;
16 + margin: 0.2em;
17 +}
18 +
19 +.pagination a{
20 + color: #246d9c;
21 + text-decoration: none;
22 + font-weight: bold;
23 + font-size: 14px;
24 + padding: 0.5em;
25 + margin: 0 1px 0 0;
26 + border-radius: 50%;
27 +}
28 +
29 +.pagination a.current {
30 + color: #8a1c5e;
31 +}
32 +
33 +.pagination a.direction{
34 + color: #246d9c;
35 +}
36 +
37 +.pagination a:hover,
38 +.pagination a.current:hover {
39 + background: gold;
40 + text-decoration: none;
41 + font-weight: bold;
42 +}
1 +html{
2 + color: #000;
3 + background: #fff;
4 + padding: 20px 0;
5 + font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
6 +}
7 +
8 +.pagination {
9 + text-align: center;
10 + margin: 20px auto;
11 + font-size: 0;
12 +}
13 +
14 +.pagination span.arrow{
15 + color: gold;
16 + text-decoration: none;
17 + margin: 0.2em;
18 +}
19 +
20 +.pagination a{
21 + color: #fff;
22 + background: #888;
23 + text-decoration: none;
24 + font-weight: bold;
25 + font-size: 14px;
26 + padding: 1em;
27 + margin: 0 1px 0 0;
28 +}
29 +
30 +.pagination a.current {
31 + background-color: #246d9c;
32 +}
33 +
34 +.pagination a.direction{
35 + color: gold;
36 +}
37 +
38 +.pagination a:hover,
39 +.pagination a.current:hover {
40 + background: #444;
41 + color: gold;
42 + text-decoration: none;
43 + font-weight: bold;
44 +}
1 +html{
2 + color:#000;
3 + background:#fff;
4 + padding:20px 0;
5 + font: 14px/20px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
6 +}
7 +
8 +#board {
9 + width:100%;
10 + border-color:#888;
11 + border-width:2px;
12 + border-top-style:solid;
13 + border-bottom-style:solid;
14 + margin:0;
15 + padding:0;
16 +}
17 +
18 +div.row{
19 + border-color:#ccc;
20 + border-width:1px;
21 + border-top-style:solid;
22 + border-bottom-style:solid;
23 + overflow:auto;
24 +}
25 +
26 +div.col {
27 + text-align: center;
28 + margin: 1em;
29 + float: left;
30 +}
31 +div.number{
32 + width:50px;
33 +}
34 +
35 +div.title{
36 + color: #0b6cb3;
37 +}
38 +
39 +
40 +
41 +div.name{
42 + width:50px;
43 + float:right;
44 +}
45 +
46 +div.date{
47 + width:80px;
48 + float:right;
49 +}
50 +
51 +#header {
52 + background: olive;
53 + color: white;
54 + font-weight: bold;
55 +}
56 +
57 +#header div.title {
58 + color: white;
59 +}
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset='utf-8'>
5 + <title>실습 CSS 01</title>
6 + <link rel="stylesheet" type="text/css" href="css/ex01.css" />
7 +</head>
8 +<body>
9 + <h1>
10 + <a href="http://twice.jype.com/">
11 + 트와이스
12 + </a>
13 + </h1>
14 + <img src="images/Twice.jpg">
15 + <ul>
16 + <li>구성원</li>
17 + <ul>
18 + <li> 지효 </li>
19 + <li> 나연 </li>
20 + <li> 정연 </li>
21 + <li> 모모 </li>
22 + <li> 사나 </li>
23 + <li> 미나 </li>
24 + <li> 다현 </li>
25 + <li> 채영 </li>
26 + <li> 쯔위 </li>
27 + </ul>
28 + <li> 설명:
29 + <blockquote>
30 + 트와이스(2015년 10월 20일 ~ 현재)는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.
31 + 2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해 9명의 최종 멤버들이 선발되었으며,
32 + 2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고, 20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다. 2016년 4월 25일 두 번째 EP 앨범 《PAGE TWO》를 발매하였고, 데뷔 1주년인 2016년 10월 24일 세 번째 EP 앨범 《TWICEcoaster : LANE 1》을 발매하였다.
33 + </blockquote>
34 + </li>
35 + <li>소속사:
36 + <a href="http://www.jype.com/" target="blank">
37 + JYP 엔터테인먼트
38 + </a>
39 + </li>
40 + <li>
41 + 앨범
42 + <ol>
43 + <li><a href="https://ko.wikipedia.org/wiki/THE_STORY_BEGINS">THE STORY BEGINS</a></li>
44 + <li><a href="https://ko.wikipedia.org/wiki/PAGE_TWO">PAGE TWO</a></li>
45 + <li><a href="https://ko.wikipedia.org/wiki/TWICEcoaster_:_LANE_1">TWICEcoaster : LANE 1</a></li>
46 + </ol>
47 + </li>
48 + </ul>
49 +</body>
50 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 +<meta charset="utf-8">
5 + <title>실습 5-2</title>
6 + <link href="./css/ex02-1.css" rel="stylesheet" type="text/css">
7 +</head>
8 +
9 +<body>
10 + <div class="pagination">
11 + <a href="#" class="direction"><span class='arrow'>&lsaquo;</span>이전</a>
12 + <a href="#">11</a>
13 + <a href="#">12</a>
14 + <a href="#">13</a>
15 + <a href="#">14</a>
16 + <a href="#" class="current">15</a>
17 + <a href="#">16</a>
18 + <a href="#">17</a>
19 + <a href="#">18</a>
20 + <a href="#">19</a>
21 + <a href="#">20</a>
22 + <a href="#" class="direction">다음 <span class='arrow'>&rsaquo;</span></a>
23 + </div>
24 +</body>
25 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 +<meta charset="utf-8">
5 + <title>실습 3-3</title>
6 + <link href="./css/ex03.css" rel="stylesheet" type="text/css">
7 +</head>
8 +
9 +<body>
10 + <div id="board">
11 + <div id="header">
12 + <div class="row">
13 + <div class="col number">번호</div>
14 + <div class="col title">제목</div>
15 + <div class="col date">날짜</div>
16 + <div class="col name">작성자</div>
17 + </div>
18 + </div>
19 +
20 + <div id="content">
21 + <div class="row">
22 + <div class="col number">10</div>
23 + <div class="col title">10번째게시물</div>
24 + <div class="col date">2015-09-11</div>
25 + <div class="col name">리지</div>
26 + </div>
27 + <div class="row">
28 + <div class="col number">9</div>
29 + <div class="col title">9번째게시물</div>
30 + <div class="col date">2014-08-21</div>
31 + <div class="col name">권보아</div>
32 + </div>
33 + <div class="row">
34 + <div class="col number">8</div>
35 + <div class="col title">8번째게시물</div>
36 + <div class="col date">2014-05-27</div>
37 + <div class="col name">산다라</div>
38 + </div>
39 + <div class="row">
40 + <div class="col number">7</div>
41 + <div class="col title">7번째게시물</div>
42 + <div class="col date">2014-03-15</div>
43 + <div class="col name">설현</div>
44 + </div>
45 + <div class="row">
46 + <div class="col number">6</div>
47 + <div class="col title">6번째게시물</div>
48 + <div class="col date">2013-12-25</div>
49 + <div class="col name">수지</div>
50 + </div>
51 + <div class="row">
52 + <div class="col number">5</div>
53 + <div class="col title">5번째게시물</div>
54 + <div class="col date">2013-10-01</div>
55 + <div class="col name">수영</div>
56 + </div>
57 + <div class="row">
58 + <div class="col number">4</div>
59 + <div class="col title">4번째게시물</div>
60 + <div class="col date">2010-10-01</div>
61 + <div class="col name">한승연</div>
62 + </div>
63 + <div class="row">
64 + <div class="col number">3</div>
65 + <div class="col title">3번째게시물</div>
66 + <div class="col date">2012-10-01</div>
67 + <div class="col name">정니콜</div>
68 + </div>
69 + <div class="row">
70 + <div class="col number">2</div>
71 + <div class="col title">2번째게시물</div>
72 + <div class="col date">2011-10-01</div>
73 + <div class="col name">김태희</div>
74 + </div>
75 + <div class="row">
76 + <div class="col number">1</div>
77 + <div class="col title">1번째게시물</div>
78 + <div class="col date">2010-12-01</div>
79 + <div class="col name">이민정</div>
80 + </div>
81 + </div>
82 +
83 + </div>
84 +</body>
85 +</html>
1 +html{
2 + color:#000;
3 + background:#fff;
4 + padding: 0.5em;
5 + font-size: 14px;
6 +}
7 +
8 +h1 {
9 + font-size: 2em;
10 + line-height: 150%;
11 + margin-bottom: 0.5em;
12 + border-bottom: 2px solid #ccc;
13 + font-weight: bold;
14 + text-align: center;
15 +}
16 +
17 +h3 {
18 + font-size: 1.5em;
19 + font-weight: bold;
20 + margin: 1em 0 0.5em 0;
21 +}
22 +
23 +div {
24 + margin: 0.5em 0;
25 +}
26 +
27 +p {
28 + line-height: 160%;
29 + margin: 1em 0;
30 +}
31 +
32 +img.main {
33 + width: 100%;
34 +}
35 +
36 +a.more {
37 + background-color: pink;
38 + color: white;
39 + text-decoration: none;
40 + padding: 0.5em 1em;
41 + margin: 1em 0;
42 + border-radius: 0.5em;
43 +}
44 +
45 +.member ul > li {
46 + display: inline-block;
47 + float: left;
48 + width: 50%;
49 + padding: 0.5em 1em;
50 + background-color: skyblue;
51 + box-sizing: border-box;
52 + color: white;
53 + margin-bottom: 1px;
54 + border-right: 1px solid white;
55 +}
56 +
57 +.member ul > li:hover {
58 + background-color: royalblue;
59 +}
60 +
61 +@media only screen and (min-device-width : 768px) {
62 + div.img {
63 + width: 33%;
64 + display: inline-block;
65 + vertical-align: top;
66 + }
67 + div.description {
68 + width: 66%;
69 + display: inline-block;
70 + vertical-align: top;
71 + padding-left: 1em;
72 + box-sizing: border-box;
73 + }
74 + div.description p {
75 + margin-top: 0;
76 + }
77 + .member ul > li {
78 + width: 25%;
79 + }
80 +}
81 +
82 +@media only screen and (min-device-width : 1025px) {
83 + div.img {
84 + width: 30%;
85 + }
86 + div.description {
87 + width: 50%;
88 + padding-right: 1em;
89 + }
90 + div.member {
91 + width: 19%;
92 + box-sizing: border-box;
93 + display: inline-block;
94 + vertical-align: top;
95 + }
96 + .member ul > li {
97 + width: 100%;
98 + }
99 + h3 {
100 + margin-top: 0;
101 + }
102 +}
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset='utf-8'>
5 + <title>실습 3-4</title>
6 + <link href="./css/ex01.css" rel="stylesheet" type="text/css">
7 + <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
8 +</head>
9 +<body>
10 + <h1>소녀시대</h1>
11 + <div class="img">
12 + <img src="./images/gg.jpg" class="main">
13 + </div>
14 + <div class="description">
15 + <p>
16 + 소녀시대(少女時代, 영어: Girls' Generation 걸스 제너레이션[*])는 SM 엔터테인먼트
17 + 소속의 대한민국 8인조 걸 그룹이다. 태연, 써니, 티파니, 효연, 유리, 수영, 윤아, 서현 8명으로 이루어져 있다.
18 + 소녀시대라는 이름은 소녀들이 평정할 시대가 왔다는 의미를 갖고 있다.
19 + 소녀시대는 2007년 8월 2일 데뷔 싱글 〈다시 만난 세계〉를 발매하고 8월 5일 SBS
20 + 《인기가요》를 통해 정식 데뷔했다. 같은 해 11월 1일 한국 첫 정규 앨범 《소녀시대》를 발매했으며,
21 + 〈Kissing You〉와 〈Baby Baby〉 등으로 활동하며 1위에 올랐다. 이후 2009년 1월 7일 첫 미니 앨범
22 + 《Gee》를 발매했다. 그해 6월 29일, 두 번째 미니 앨범 《소원을 말해봐》를 발매해 10만 장을 넘게 팔았다.
23 + 2009년 12월 29일부터는 Into the New World라는 첫 아시아 투어도 개최했다.
24 + 2010년 1월 28일에는 두 번째 정규 앨범 《Oh!》를 발매해 20만 장을 판매하며 4연속 앨범 판매량
25 + 10만 장을 돌파했다.
26 + </p>
27 + <a href="https://ko.wikipedia.org/wiki/%EC%86%8C%EB%85%80%EC%8B%9C%EB%8C%80" class="more">더보기</a>
28 + </div>
29 + <div class="member">
30 + <h3>멤버구성</h3>
31 + <ul>
32 + <li>태연</li>
33 + <li>써니</li>
34 + <li>티파니</li>
35 + <li>유리</li>
36 + <li>효연</li>
37 + <li>수영</li>
38 + <li>윤아</li>
39 + <li>서현</li>
40 + </ul>
41 + </div>
42 +</body>
43 +</html>
1 +"use strict"
2 +
3 +var http = require('http');
4 +var server = http.createServer(function(req, res) {
5 + res.writeHeader(200, {"Content-Type": "text/plain"});
6 + res.write("Hello World");
7 + res.end();
8 +});
9 +
10 +server.listen(3000, function() {
11 + console.log("Sever listeining on http://localhost:3000");
12 +});
1 +"use strict"
2 +
3 +var http = require('http'),
4 + path = require('path'),
5 + url = require('url'),
6 + fs = require('fs');
7 +
8 +var DOCUMENT_ROOT = "../../05_CSS/";
9 +var server = http.createServer(function(req, res) {
10 + var reqPath = url.parse(req.url).pathname;
11 + if (reqPath == "/") {
12 + reqPath = "ex01.html";
13 + }
14 + var fullPath = path.join(process.cwd(), DOCUMENT_ROOT, reqPath);
15 + fs.readFile(fullPath, "binary", function(err, file) {
16 + if(err) {
17 + if (err.code == "ENOENT") {
18 + console.log("SEND 404 for " + req.url);
19 + res.writeHeader(404, {"Content-Type": "text/html"});
20 + res.write("<h1>Not found</h1>");
21 + res.end();
22 + } else {
23 + console.error("Error", err);
24 + res.writeHeader(500, {"Content-Type": "text/plain"});
25 + res.write(err + "\n");
26 + res.end();
27 + }
28 + } else{
29 + console.log("SEND 200 for " + req.url);
30 + res.writeHeader(200);
31 + res.write(file, "binary");
32 + res.end();
33 + }
34 + });
35 +});
36 +
37 +server.listen(3000, function() {
38 + console.log("Sever listeining on http://localhost:3000");
39 +});
...\ No newline at end of file ...\ No newline at end of file
1 +# Logs
2 +logs
3 +*.log
4 +
5 +# Runtime data
6 +pids
7 +*.pid
8 +*.seed
9 +
10 +# Directory for instrumented libs generated by jscoverage/JSCover
11 +lib-cov
12 +
13 +# Coverage directory used by tools like istanbul
14 +coverage
15 +
16 +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 +.grunt
18 +
19 +# node-waf configuration
20 +.lock-wscript
21 +
22 +# Compiled binary addons (http://nodejs.org/api/addons.html)
23 +build/Release
24 +
25 +# Dependency directory
26 +# https://docs.npmjs.com/cli/shrinkwrap#caveats
27 +node_modules
28 +
29 +# Debug log from npm
30 +npm-debug.log
1 +var express = require('express');
2 +var path = require('path');
3 +var favicon = require('serve-favicon');
4 +var logger = require('morgan');
5 +var cookieParser = require('cookie-parser');
6 +var bodyParser = require('body-parser');
7 +
8 +var index = require('./routes/index');
9 +var users = require('./routes/users');
10 +
11 +var app = express();
12 +
13 +// view engine setup
14 +app.set('views', path.join(__dirname, 'views'));
15 +app.set('view engine', 'ejs');
16 +
17 +// uncomment after placing your favicon in /public
18 +//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
19 +app.use(logger('dev'));
20 +app.use(bodyParser.json());
21 +app.use(bodyParser.urlencoded({ extended: false }));
22 +app.use(cookieParser());
23 +app.use(require('node-sass-middleware')({
24 + src: path.join(__dirname, 'public'),
25 + dest: path.join(__dirname, 'public'),
26 + indentedSyntax: true,
27 + sourceMap: true
28 +}));
29 +app.use(express.static(path.join(__dirname, 'public')));
30 +
31 +app.use('/', index);
32 +app.use('/users', users);
33 +
34 +// catch 404 and forward to error handler
35 +app.use(function(req, res, next) {
36 + var err = new Error('Not Found');
37 + err.status = 404;
38 + next(err);
39 +});
40 +
41 +// error handler
42 +app.use(function(err, req, res, next) {
43 + // set locals, only providing error in development
44 + res.locals.message = err.message;
45 + res.locals.error = req.app.get('env') === 'development' ? err : {};
46 +
47 + // render the error page
48 + res.status(err.status || 500);
49 + res.render('error');
50 +});
51 +
52 +module.exports = app;
1 +#!/usr/bin/env node
2 +
3 +/**
4 + * Module dependencies.
5 + */
6 +
7 +var app = require('../app');
8 +var debug = require('debug')('app03:server');
9 +var http = require('http');
10 +
11 +/**
12 + * Get port from environment and store in Express.
13 + */
14 +
15 +var port = normalizePort(process.env.PORT || '3000');
16 +app.set('port', port);
17 +
18 +/**
19 + * Create HTTP server.
20 + */
21 +
22 +var server = http.createServer(app);
23 +
24 +/**
25 + * Listen on provided port, on all network interfaces.
26 + */
27 +
28 +server.listen(port);
29 +server.on('error', onError);
30 +server.on('listening', onListening);
31 +
32 +/**
33 + * Normalize a port into a number, string, or false.
34 + */
35 +
36 +function normalizePort(val) {
37 + var port = parseInt(val, 10);
38 +
39 + if (isNaN(port)) {
40 + // named pipe
41 + return val;
42 + }
43 +
44 + if (port >= 0) {
45 + // port number
46 + return port;
47 + }
48 +
49 + return false;
50 +}
51 +
52 +/**
53 + * Event listener for HTTP server "error" event.
54 + */
55 +
56 +function onError(error) {
57 + if (error.syscall !== 'listen') {
58 + throw error;
59 + }
60 +
61 + var bind = typeof port === 'string'
62 + ? 'Pipe ' + port
63 + : 'Port ' + port;
64 +
65 + // handle specific listen errors with friendly messages
66 + switch (error.code) {
67 + case 'EACCES':
68 + console.error(bind + ' requires elevated privileges');
69 + process.exit(1);
70 + break;
71 + case 'EADDRINUSE':
72 + console.error(bind + ' is already in use');
73 + process.exit(1);
74 + break;
75 + default:
76 + throw error;
77 + }
78 +}
79 +
80 +/**
81 + * Event listener for HTTP server "listening" event.
82 + */
83 +
84 +function onListening() {
85 + var addr = server.address();
86 + var bind = typeof addr === 'string'
87 + ? 'pipe ' + addr
88 + : 'port ' + addr.port;
89 + debug('Listening on ' + bind);
90 +}
1 +{
2 + "name": "app03",
3 + "version": "0.0.0",
4 + "private": true,
5 + "scripts": {
6 + "start": "node ./bin/www"
7 + },
8 + "dependencies": {
9 + "body-parser": "~1.16.0",
10 + "cookie-parser": "~1.4.3",
11 + "debug": "~2.6.0",
12 + "ejs": "~2.5.5",
13 + "express": "~4.14.1",
14 + "morgan": "~1.7.0",
15 + "node-sass-middleware": "0.9.8",
16 + "serve-favicon": "~2.3.2"
17 + }
18 +}
1 +body {
2 + padding: 50px;
3 + font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
4 +
5 +a {
6 + color: #00B7FF; }
7 +
8 +/*# sourceMappingURL=style.css.map */
...\ No newline at end of file ...\ No newline at end of file
1 +{
2 + "version": 3,
3 + "file": "style.css",
4 + "sources": [
5 + "style.sass"
6 + ],
7 + "mappings": "AAAA,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAK;EACd,IAAI,EAAE,kDAAmD,GAAG;;AAE9D,AAAA,CAAC,CAAC;EACA,KAAK,EAAE,OAAQ,GAAG",
8 + "names": []
9 +}
...\ No newline at end of file ...\ No newline at end of file
1 +body
2 + padding: 50px
3 + font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
4 +
5 +a
6 + color: #00B7FF
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +/* GET home page. */
5 +router.get('/', function(req, res, next) {
6 + res.render('index', { title: 'Express' });
7 +});
8 +
9 +module.exports = router;
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +/* GET users listing. */
5 +router.get('/', function(req, res, next) {
6 + res.send('respond with a resource');
7 +});
8 +
9 +module.exports = router;
1 +<h1><%= message %></h1>
2 +<h2><%= error.status %></h2>
3 +<pre><%= error.stack %></pre>
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title><%= title %></title>
5 + <link rel='stylesheet' href='/stylesheets/style.css' />
6 + </head>
7 + <body>
8 + <h1><%= title %></h1>
9 + <p>Welcome to <%= title %></p>
10 + </body>
11 +</html>
1 +# Node.js를 이용한 간단한 웹서버 구축
2 +
3 +## 실행 방법
4 +
5 +1. Hello World 웹 서버
6 + ```
7 + node app01.js
8 + ```
9 +
10 +2. 03 실습의 내용을 제공하는 웹서버
11 + ```
12 + node app02.js
13 + ```
14 +
15 +## TIP
16 +1. 코드를 수정할 때 마다 서버를 새로 띄워야 해서 불편하다면 nodemon을 설치하고 nodemon으로 서버를 실행할 수 있습니다. 소스 코드가 수정되면 자동으로 서버가 다시 시작됩니다.
17 + ```
18 + npm install --global nodemon
19 +
20 + nodemon app02.js
21 + ```
1 +# Logs
2 +logs
3 +*.log
4 +
5 +# Runtime data
6 +pids
7 +*.pid
8 +*.seed
9 +
10 +# Directory for instrumented libs generated by jscoverage/JSCover
11 +lib-cov
12 +
13 +# Coverage directory used by tools like istanbul
14 +coverage
15 +
16 +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 +.grunt
18 +
19 +# node-waf configuration
20 +.lock-wscript
21 +
22 +# Compiled binary addons (http://nodejs.org/api/addons.html)
23 +build/Release
24 +
25 +# Dependency directory
26 +# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
27 +node_modules
28 +
29 +# Debug log from npm
30 +npm-debug.log
1 +var express = require('express');
2 +var path = require('path');
3 +var favicon = require('serve-favicon');
4 +var logger = require('morgan');
5 +var cookieParser = require('cookie-parser');
6 +var bodyParser = require('body-parser');
7 +
8 +var routes = require('./routes/index');
9 +var users = require('./routes/users');
10 +
11 +var app = express();
12 +
13 +// view engine setup
14 +app.set('views', path.join(__dirname, 'views'));
15 +app.set('view engine', 'ejs');
16 +
17 +// uncomment after placing your favicon in /public
18 +//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
19 +app.use(logger('dev'));
20 +app.use(bodyParser.json());
21 +app.use(bodyParser.urlencoded({ extended: false }));
22 +app.use(cookieParser());
23 +app.use(require('node-sass-middleware')({
24 + src: path.join(__dirname, 'public'),
25 + dest: path.join(__dirname, 'public'),
26 + indentedSyntax: true,
27 + sourceMap: true
28 +}));
29 +app.use(express.static(path.join(__dirname, 'public')));
30 +
31 +app.use('/', routes);
32 +app.use('/users', users);
33 +
34 +// catch 404 and forward to error handler
35 +app.use(function(req, res, next) {
36 + var err = new Error('Not Found');
37 + err.status = 404;
38 + next(err);
39 +});
40 +
41 +// error handlers
42 +
43 +// development error handler
44 +// will print stacktrace
45 +if (app.get('env') === 'development') {
46 + app.use(function(err, req, res, next) {
47 + res.status(err.status || 500);
48 + res.render('error', {
49 + message: err.message,
50 + error: err
51 + });
52 + });
53 +}
54 +
55 +// production error handler
56 +// no stacktraces leaked to user
57 +app.use(function(err, req, res, next) {
58 + res.status(err.status || 500);
59 + res.render('error', {
60 + message: err.message,
61 + error: {}
62 + });
63 +});
64 +
65 +
66 +module.exports = app;
1 +#!/usr/bin/env node
2 +
3 +/**
4 + * Module dependencies.
5 + */
6 +
7 +var app = require('../app');
8 +var debug = require('debug')('app03:server');
9 +var http = require('http');
10 +
11 +/**
12 + * Get port from environment and store in Express.
13 + */
14 +
15 +var port = normalizePort(process.env.PORT || '3000');
16 +app.set('port', port);
17 +
18 +/**
19 + * Create HTTP server.
20 + */
21 +
22 +var server = http.createServer(app);
23 +
24 +/**
25 + * Listen on provided port, on all network interfaces.
26 + */
27 +
28 +server.listen(port);
29 +server.on('error', onError);
30 +server.on('listening', onListening);
31 +
32 +/**
33 + * Normalize a port into a number, string, or false.
34 + */
35 +
36 +function normalizePort(val) {
37 + var port = parseInt(val, 10);
38 +
39 + if (isNaN(port)) {
40 + // named pipe
41 + return val;
42 + }
43 +
44 + if (port >= 0) {
45 + // port number
46 + return port;
47 + }
48 +
49 + return false;
50 +}
51 +
52 +/**
53 + * Event listener for HTTP server "error" event.
54 + */
55 +
56 +function onError(error) {
57 + if (error.syscall !== 'listen') {
58 + throw error;
59 + }
60 +
61 + var bind = typeof port === 'string'
62 + ? 'Pipe ' + port
63 + : 'Port ' + port;
64 +
65 + // handle specific listen errors with friendly messages
66 + switch (error.code) {
67 + case 'EACCES':
68 + console.error(bind + ' requires elevated privileges');
69 + process.exit(1);
70 + break;
71 + case 'EADDRINUSE':
72 + console.error(bind + ' is already in use');
73 + process.exit(1);
74 + break;
75 + default:
76 + throw error;
77 + }
78 +}
79 +
80 +/**
81 + * Event listener for HTTP server "listening" event.
82 + */
83 +
84 +function onListening() {
85 + var addr = server.address();
86 + var bind = typeof addr === 'string'
87 + ? 'pipe ' + addr
88 + : 'port ' + addr.port;
89 + debug('Listening on ' + bind);
90 +}
1 +{
2 + "name": "app03",
3 + "version": "0.0.0",
4 + "private": true,
5 + "scripts": {
6 + "start": "node ./bin/www"
7 + },
8 + "dependencies": {
9 + "body-parser": "~1.13.2",
10 + "cookie-parser": "~1.3.5",
11 + "debug": "~2.2.0",
12 + "ejs": "~2.3.3",
13 + "express": "~4.13.1",
14 + "morgan": "~1.6.1",
15 + "node-sass-middleware": "0.8.0",
16 + "serve-favicon": "~2.3.0"
17 + }
18 +}
...\ No newline at end of file ...\ No newline at end of file
1 +body {
2 + padding: 50px;
3 + font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
4 +
5 +a {
6 + color: #00B7FF; }
7 +
8 +/*# sourceMappingURL=style.css.map */
...\ No newline at end of file ...\ No newline at end of file
1 +{
2 + "version": 3,
3 + "file": "style.css",
4 + "sources": [
5 + "style.sass"
6 + ],
7 + "sourcesContent": [],
8 + "mappings": "AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAK;EACd,IAAI,EAAE,kDAAmD,GAFrD;;AAIN,CAAC,CAAC;EACA,KAAK,EAAE,OAAQ,GADd",
9 + "names": []
10 +}
...\ No newline at end of file ...\ No newline at end of file
1 +body
2 + padding: 50px
3 + font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
4 +
5 +a
6 + color: #00B7FF
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +/* GET home page. */
5 +router.get('/', function(req, res, next) {
6 + res.render('index', { title: 'Express' });
7 +});
8 +
9 +module.exports = router;
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +/* GET users listing. */
5 +router.get('/', function(req, res, next) {
6 + res.send('respond with a resource');
7 +});
8 +
9 +module.exports = router;
1 +<h1><%= message %></h1>
2 +<h2><%= error.status %></h2>
3 +<pre><%= error.stack %></pre>
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title><%= title %></title>
5 + <link rel='stylesheet' href='/stylesheets/style.css' />
6 + </head>
7 + <body>
8 + <h1><%= title %></h1>
9 + <p>Welcome to <%= title %></p>
10 + </body>
11 +</html>
1 +# 실습하는 법
2 +
3 +1. npm을 이용하여 express-generator (express app 뼈대를 자동 생성해주는 프로그램)을 설치합니다.
4 + ```
5 + npm install -g express-generator
6 + ```
7 +
8 +1. express generator를 이용하여 app을 하나 만듭니다.
9 + ```sh
10 + express -e -c sass --git app03
11 + # -e: Jade대신 EJS template 엔진을 이용합니다. Jade도 좋지만, 일단은 HTML과 가장 유사한 EJS를 사용해봅시다.
12 + # -c sass: sass나 scss를 사용하려고 합니다.
13 + # --git: git을 사용할 때 편리하도록 .gitignore를 자동으로 생성합니다.
14 + ```
15 +
16 +1. 디렉토리에 들어가서 파일들을 살펴봅시다.
17 + ```
18 + cd app03
19 + atom .
20 +```
21 +
22 +1. package들을 설치합니다.
23 + ```
24 + npm install
25 + ```
26 +
27 +1. 서버를 실행해봅시다.
28 + ```
29 + nodemon ./bin/www
30 + ```
31 +
32 +1. 웹브라우져에서 http://localhost:3000 에 접속해봅시다.
33 +
34 +1. 디렉토리 설명
35 + - app.js: Express 미들웨어들이 설정되어 있습니다.
36 + - routes/: 라우팅 정보, 즉 URL로 들어온 처리를 어떻게 하는지 관리합니다.
37 + - views/: 화면에 출력할 View Template이 들어있습니다.
38 + - public/: static파일로 처리될 image, javascript, stylesheet 등이 있습니다. SCSS를 사용해볼 때도 여기서 해봅니다.
39 + - node_modules: 로컬에 인스톨된 패키지가 있는 곳입니다. 건드리지 맙시다.
40 +
41 +## 참고
42 +
43 +### npm : Package Manager for Node.js
44 +- 참고: https://docs.npmjs.com/getting-started/what-is-npm
45 +
46 +
47 +1. npm init
48 + - 패키지 관리 시작. 해당 디렉토리에 package.json을 만듭니다.
49 + - Git Bash에서 에러가 나는 경우 윈도우 cmd 창에서 실행하세요.
50 + - 차례로 물어보는 것에 대답하면 package.json 파일이 생깁니다.
51 +
52 +2. npm install
53 + - npm를 이용해 원하는 패키지를 인스톨 합시다.
54 + - 옵션
55 + - -g (--global)은 global로 인스톨 합니다. 그러면 이 프로그램을 cmd 창에서 유틸리티 처럼 사용할 수 있습니다.
56 + - --save는 이 프로젝트의 로컬에 인스톨 하면서 package.json에 기록되어 추후 npm install 로 한꺼번에 인스톨 할 수 있습니다.
57 + - --save-dev는 save와 유사하지만, 프로젝트의 실행에는 필요없고, 개발 단계에서만 필요하다는 뜻입니다.
58 + - 예
59 + ```
60 + npm install -g gulp
61 + npm install --save-dev gulp
62 + npm install --save express
63 + npm install -g express-generator
64 + ```
1 +{
2 + "curly": true,
3 + "eqeqeq": true,
4 + "undef": true,
5 + "globals": {
6 + "jQuery": true,
7 + "Promise" : true
8 + },
9 + "node": true
10 +}
1 +"use strict";
2 +
3 +console.log("Hello, World");
1 +"use strict";
2 +
3 +function asyncTask1(cb) {
4 + console.log("task1 start");
5 + setTimeout(function() {
6 + cb("task1");
7 + }, 2000);
8 +}
9 +
10 +function asyncTask2(cb) {
11 + console.log("task2 start");
12 + setTimeout(function() {
13 + cb("task2");
14 + }, 1000);
15 +}
16 +
17 +asyncTask2(function(ret) {
18 + console.log(ret + " done");
19 + asyncTask1(function(ret2) {
20 + console.log(ret2 + "done");
21 + // 추가적인 callback이 더 생긴다면???
22 + });
23 +});
24 +
25 +function promiseTask1() {
26 + console.log("task1 start");
27 + return new Promise(function(resolve, reject) {
28 + setTimeout(function() {
29 + resolve('task1');
30 + }, 2000);
31 + });
32 +}
33 +
34 +function promiseTask2() {
35 + console.log("task2 start");
36 + return new Promise(function(resolve, reject) {
37 + setTimeout(function() {
38 + resolve('task2');
39 + }, 1000);
40 + });
41 +}
42 +
43 +promiseTask2()
44 +.then(function(ret) {
45 + console.log(ret + " done");
46 +}).then(function() {
47 + return promiseTask1();
48 +})
49 +.then(function(ret) {
50 + console.log(ret + " done");
51 +});
1 +"use strict";
2 +
3 +function swap(arr, i, j) {
4 + var t = arr[i];
5 + arr[i] = arr[j];
6 + arr[j] = t;
7 +}
8 +
9 +function bubbleSort(arr) {
10 + var i, j;
11 + for (i = 0; i < arr.length; i++) {
12 + for (j = 0; j < arr.length - i; j++) {
13 + if (arr[j] > arr[j+1]) {
14 + swap(arr, j, j+1);
15 + }
16 + }
17 + }
18 + return arr;
19 +}
20 +
21 +var arr1 = [6, 3, 2, 7, 8, 3, 1, 0, 9, 5];
22 +var arr2 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
23 +var arr3 = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
24 +
25 +console.log(bubbleSort(arr1));
26 +console.log(bubbleSort(arr2));
27 +console.log(bubbleSort(arr3));
...\ No newline at end of file ...\ No newline at end of file
1 +<html>
2 +<head>
3 +</head>
4 +
5 +<body>
6 +
7 +<script type="text/javascript" src="03_sort.js">
8 +</script>
9 +
10 +</body>
11 +
12 +</html>
1 +<html>
2 +<head>
3 +<script type="text/javascript">
4 +function message(){
5 +alert("This alert box was called with the onload event");
6 +}
7 +</script>
8 +</head>
9 +
10 +<body onload="message()">
11 +<script type="text/javascript">
12 +document.write("This message is written by JavaScript");
13 +</script>
14 +</body>
15 +
16 +</html>
1 +<html>
2 +<head>
3 +<script type="text/javascript" src="xxx.js"></script>
4 +
5 +<script type="text/javascript">
6 +function message(){
7 +alert("This alert box was called with the onload event");
8 +}
9 +</script>
10 +</head>
11 +
12 +<body onload="message()">
13 +</script>
14 +</body>
15 +
16 +</html>
1 +<html>
2 +<head>
3 +</head>
4 +
5 +<body>
6 +<script type="text/javascript">
7 +
8 +var str="Hello world!";
9 +//look for "Hello"
10 +var patt=/Hello/g;
11 +var result=patt.exec(str);
12 +document.write("Returned value: " + result);
13 +
14 +//look for "W3Schools"
15 +patt=/W3Schools/g;
16 +result=patt.exec(str);
17 +document.write("<br />Returned value: " + result);
18 +
19 +
20 +</script>
21 +
22 +</body>
23 +
24 +</html>
1 +<html>
2 +<head>
3 +</head>
4 +
5 +<body>
6 +
7 +<script type="text/javascript">
8 +// location
9 +
10 +
11 +location.assign("http://www.google.com"); // ּ ̵
12 +
13 +
14 +</script>
15 +
16 +</body>
17 +
18 +</html>
1 +<html>
2 +<head>
3 +</head>
4 +
5 +<body>
6 +
7 +<script type="text/javascript" src="alert.js">
8 +</script>
9 +
10 +</body>
11 +
12 +</html>
1 +//window객체는 window. 생략 가능
2 +alert("test"); // 메시지 창 띄움
3 +
4 +window.open('','','width=200,height=100') // 새창 띄우기
5 +
6 +if (confirm("Are you sure?")) {
7 + // Yes/No를 묻는 다이얼로그 창 띄움. Yes일 때만 true
8 +}
9 +
10 +var name = prompt("Enter name"); // 사용자의 입력 받는 창 띄움
11 +
1 +document.write("This message is written by JavaScript");
1 +<!DOCTYPE html>
2 +<html>
3 +<body>
4 +
5 +<p>An unordered list:</p>
6 +<ul>
7 + <li>Coffee</li>
8 + <li>Tea</li>
9 + <li>Milk</li>
10 +</ul>
11 +
12 +<button onclick="myFunction()">Hide List</button>
13 +
14 +<p id="demo"></p>
15 +
16 +<script>
17 +function myFunction() {
18 + var divs = document.getElementsByTagName("LI");
19 + for (i=0; i<divs.length;i++) {
20 + divs[i].style.display = 'none';
21 + }
22 +
23 +}
24 +</script>
25 +
26 +</body>
27 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 +<meta charset="utf-8">
5 + <title>jQuery Test</title>
6 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
7 + <style type="text/css">
8 + .section { padding:5px; margin:5px; border:1px solid #eeeeee;}
9 + div#result { border: 1px solid red; background:#EEEEEE;
10 + padding:10px;margin:10px; }
11 + </style>
12 +</head>
13 +<body>
14 +<div class="section">
15 + <ul id="fruits">
16 + <li>Apple</li>
17 + <li>Orange</li>
18 + <li>Melon</li>
19 + </ul>
20 +</div>
21 +<div class="section">
22 + <a href="http://www.google.com">Google</a>
23 + <a href="http://www.apple.com">Apple</a>
24 + <a href="http://www.microsoft.com">Microsoft</a>
25 + <a href="http://www.oracle.com">Oracle</a>
26 +</div>
27 +<div class="section">
28 +<form id="test">
29 + <input type="text" name="id" id="id"><br>
30 + <input type="password" name="pwd" id="pwd"><br>
31 + <select id="channel" name="channel">
32 + <option value="kbs">KBS</option>
33 + <option value="mbc">MBC</option>
34 + <option value="sbs">SBS</option>
35 + </select>
36 + <p>
37 + <input type="checkbox" name="hobby" value="baseball">야구
38 + <input type="checkbox" name="hobby" value="basketball">농구
39 + <input type="checkbox" name="hobby" value="soccer">축구
40 + </p>
41 + <p>
42 + <input type="button" id="btn1" value="버튼1">
43 + <input type="button" id="btn2" value="버튼2">
44 + <input type="button" id="btn3" value="버튼3">
45 + </p>
46 +</form>
47 +</div>
48 +<div id="result">
49 +<h3>RESULT</h3>
50 +</div>
51 +</body>
52 +</html>
53 +<script type="text/javascript">
54 +$(function() {
55 + // text / html 읽기
56 + $("#result").append($("#fruits").html() + "<p>");
57 + $("#result").append($("#fruits").text() + "<p>");
58 +
59 + // value 읽기
60 + $("#result").append($("#channel").val() + "<p>");
61 +
62 + // CSS 읽기
63 + $("#result").append($("a:last").css("margin-top") + "<p>");
64 +
65 + // Attribute 읽기
66 + $("a").each(function(idx) {
67 + $("#result").append("a" + idx + ":" + $(this).attr("href")+ "<br>");
68 + });
69 +
70 + // value 설정
71 + $("#id").val("아이디");
72 + $("#pwd").val("123");
73 +
74 + // Attribute 설정
75 + $("input[type='checkbox']").filter("[value='soccer']")
76 + .attr('checked', 'checked');
77 +
78 + // text 설정
79 + $("#fruits").find("li:first").text("사과");
80 +
81 + // click event + effect
82 + $("#btn1").val("toggle").click(function() {
83 + $("div.section:first").toggle();
84 + });
85 + $("#btn2").val("slide up").click(function() {
86 + $("div.section:first").slideUp();
87 + });
88 + $("#btn3").val("slide down").click(function() {
89 + $("div.section:first").slideDown();
90 + });
91 +
92 + // mouse event
93 + $("div.section").mouseover(function() {
94 + $(this).css("background", "#f8dff5");
95 + });
96 +
97 + $("div.section").mouseout(function() {
98 + $(this).css("background", "#ffffff");
99 + });
100 +
101 + // change event
102 + $("#channel").change(function() {
103 + alert("You selected '" + $(this).val() + "'");
104 + });
105 +});
106 +</script>
1 +html{
2 + color:#000;
3 + padding:20px 0;
4 + font: 12px/18px "맑은 고딕", "Malgun Gothic";
5 +}
6 +#tab {
7 + border-collapse:collapse;
8 + border-spacing:0;
9 +}
10 +td,th {
11 + border:1px solid #444;
12 + font: 12px/18px "맑은 고딕", "Malgun Gothic";
13 + padding:5px;
14 +}
15 +thead tr, tfoot tr {
16 + background:#888;
17 + color:#fff;
18 +}
19 +tbody tr {
20 + background:#eee;
21 +}
22 +span.price {
23 + display: box;
24 + text-align:right;
25 + width:200px;
26 + font-weight:bold;
27 +}
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <meta charset="utf-8">
5 + <title>jQuery Test</title>
6 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
7 + <script src="calculator.js"></script>
8 + <link rel="stylesheet" href="calculator.css">
9 +</head>
10 +<body>
11 + <div>
12 + <table id="tab" border="1">
13 + <thead>
14 + <tr>
15 + <th></th><th>상품명</th><th>단가</th><th>개수</th><th>가격</th>
16 + </tr>
17 + </thead>
18 + <tbody></tbody>
19 + <tfoot>
20 + <tr>
21 + <th colspan="4">합계</th>
22 + <th><span id="sum" class="price"></span></th>
23 + </tr>
24 + </tfoot>
25 + </table>
26 + <input type="button" value="물품추가" id="add">
27 + <input type="button" value="물품삭제" id="del">
28 + </div>
29 + </body>
30 +</html>
31 +<script id="rowTemplate" type="text/template">
32 + <tr>
33 + <td><input type='checkbox'></td>
34 + <td><input type='text' size='15'></td>
35 + <td><input type='text' size='10' class='unit-price' onchange='recalculate();'></td>
36 + <td>
37 + <select class='qty' onchange='recalculate();'>
38 + <option>1</option>
39 + <option>2</option>
40 + <option>3</option>
41 + <option>4</option>
42 + <option>5</option>
43 + <option>6</option>
44 + <option>7</option>
45 + <option>8</option>
46 + <option>9</option>
47 + <option>10</option>
48 + </select>
49 + </td>
50 + <td align="right"><span class='price'></span></td>
51 + </tr>
52 +</script>
53 +<script type="text/javascript">
54 +$(function() {
55 + initCalculator();
56 +});
57 +</script>
1 +function recalculate() {
2 + var sum = 0;
3 + $("#tab tbody tr").each(function(idx, row) {
4 + var $el = $(row);
5 + var unitPrice = parseInt($el.find(".unit-price").val(), 10);
6 + var qty = parseInt($el.find(".qty").val());
7 + if (!isNaN(unitPrice) && !isNaN(qty) ) {
8 + var price = unitPrice * qty;
9 + $el.find(".price").text(price);
10 + sum = sum + price;
11 + }
12 + });
13 + $("#sum").text(sum);
14 +}
15 +
16 +function initCalculator() {
17 + $('#add').click(function() {
18 + $("#tab tbody").append($('#rowTemplate').html());
19 + });
20 + $('#del').click(function() {
21 + if (confirm("정말 삭제하시겠습니까?")) {
22 + var $els = $("tr input[type='checkbox']:checked");
23 + $els.each(function(idx, el) {
24 + $(el).parents("tr").empty();
25 + });
26 + recalculate();
27 + }
28 + });
29 + $('#add').click();
30 +}
1 +.tab {
2 + margin: 2em 0;
3 +}
4 +.tab:after, .tab>ul:after, .tab>ul>li:after{
5 + content:"";
6 + display:block;
7 + clear:both;
8 +}
9 +
10 +.tab > ul {
11 + list-style: none;
12 + margin: 0;
13 + padding: 0;
14 +}
15 +
16 +.tab > ul > li {
17 + float:left;
18 + margin-right:1px;
19 + color: #fff;
20 + border-top-left-radius: 0.4em;
21 + border-top-right-radius: 0.4em;
22 +}
23 +
24 +.tab > ul > li > a {
25 + display: inline-block;
26 + padding: 0.5em 1em;
27 + text-decoration: none;
28 + color: #fff;
29 +}
30 +.tab > ul > li {
31 + background: #4CB1E5;
32 +}
33 +
34 +.tab > ul > li:hover {
35 + background: #75a44b;
36 +}
37 +
38 +.tab > ul > li.active,
39 +.tab > ul > li.active:hover {
40 + background: #eee;
41 + color: #000;
42 + border: 1px solid #4CB1E5;
43 + border-bottom: 0;
44 + margin-bottom: -1px;
45 +}
46 +
47 +.tab > ul > li.active a,
48 +.tab > ul > li.active:hover a {
49 + color: #000;
50 + font-weight: bold;
51 +}
52 +.tab > .content {
53 + border-bottom-left-radius: 0.4em;
54 + border-bottom-right-radius: 0.4em;
55 + border-top-right-radius: 0.4em;
56 + background: #eee;
57 + border: 1px solid #4CB1E5;
58 +}
59 +
60 +.tab > .content > div {
61 + padding: 2em;
62 + display: none;
63 +}
64 +
65 +.tab > .content > div.selected {
66 + display: block;
67 +}
68 +
69 +img.full {
70 + width: 100%;
71 +}
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <meta charset="utf-8">
5 + <title>Tab: jQuery Test</title>
6 + <link rel="stylesheet" href="tab.css">
7 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8 +</head>
9 +<body>
10 + <div class="tab">
11 + <ul>
12 + <li><a href="#">공지사항</a></li>
13 + <li><a href="#">오늘의 뉴스</a></li>
14 + <li><a href="#">오늘의 이미지</a></li>
15 + </ul>
16 + <div class="content">
17 + <div class="section">
18 + <ul>
19 + <li>이런 이런 공지사항</li>
20 + <li>이런 이런 공지사항</li>
21 + <li>이런 이런 공지사항</li>
22 + <li>이런 이런 공지사항</li>
23 + </ul>
24 + </div>
25 + <div class="section">
26 + <p>[연예팀] SBS 수목드라마 '대물'에서 여성 최초 대통령 서혜림 역으로 열연 중인 고현정에 캐릭터 변질에 대해 논란이 일고 있다.
27 + <p>최근 '대물' 시청자 게시판에는 서혜림의 캐릭터가 변질됐다는 의견들이 등장하고 있어 눈길을 끌고 있다.
28 + <p>극 초반 물불 안 가리는 다혈질 성격은 온데간데 없고 국회의원 보궐선거에 나선 후에는 "잘 몰라서요", "잘 부탁드려요"라는 대사를 연발하며 캐릭터 변질에 대한 시청자들의 질타를 받고 있다.
29 + </div>
30 + <div class="section">
31 + <img src="http://musicimg.cyworld.com/ALBUM/015/063/15063659.JPG">
32 + </div>
33 + </div>
34 + </div>
35 +
36 + <div class="tab">
37 + <ul>
38 + <li><a href="#">APink</a></li>
39 + <li><a href="#">소녀시대</a></li>
40 + <li><a href="#">걸스데이</a></li>
41 + </ul>
42 + <div class="content">
43 + <div class="section">
44 + <img src="http://0.viki.io/c/28239c/db2d6d4379.jpg?x=b" class="full">
45 + </div>
46 + <div class="section">
47 + <img src="https://pbs.twimg.com/media/CQIYmaYW8AALCCN.jpg" class="full">
48 + </div>
49 + <div class="section">
50 + <img src="http://img.mbn.co.kr/filewww/news/other/2013/07/20/051502002751.jpg" class="full">
51 + </div>
52 + </div>
53 + </div>
54 +</body>
55 +</html>
56 +<script src="tab.js"></script>
1 +$(function($){
2 + $('.tab > ul > li > a').click(function(e) {
3 + var $item = $(e.currentTarget).parent();
4 + var idx = $item.index() + 1;
5 + var $tab = $item.closest(".tab");
6 + $tab.find(">ul>li").removeClass('active');
7 + $tab.find(".section").removeClass('selected');
8 + $item.addClass('active');
9 + $tab.find(".section:nth-child(" + idx + ")").addClass("selected");
10 + });
11 + $(".tab").find(">ul>li>a:first").click();
12 +});
1 +# 2017년 1학기 웹서비스프로그래밍 과목
2 +
3 +
4 +실습용 자료 project
5 +
6 +
7 +