공지사항
12 |팝업 창에 표시되는 내용
13 |팝업 창에 표시되는 내용
14 |팝업 창에 표시되는 내용
15 |팝업 창에 표시되는 내용
16 |팝업 창에 표시되는 내용
17 | 18 |창닫기
19 |이 문서가 열리면 자동으로 팝업 창이 표시됩니다.
10 | 11 | 12 | -------------------------------------------------------------------------------- /10/css/browser.css: -------------------------------------------------------------------------------- 1 | table, tr { 2 | border:1px solid #222; 3 | border-collapse: collapse; 4 | } 5 | td { 6 | padding:10px 15px; 7 | border:1px solid #222; 8 | } 9 | td.title { 10 | width:150px; 11 | font-weight:bold; 12 | } -------------------------------------------------------------------------------- /09/js/getForm.js: -------------------------------------------------------------------------------- 1 | var selectMenu = document.testForm.major; // 셀렉트 메뉴를 가져와 selectMenu로 저장 2 | function displaySelect() { 3 | var selectedText = selectMenu.options[selectMenu.selectedIndex].innerText; 4 | alert("[" + selectedText + "]를 선택했습니다."); 5 | } -------------------------------------------------------------------------------- /10/js/popup-result.js: -------------------------------------------------------------------------------- 1 | function openPop() { 2 | var newWin = window.open("\popup-result.html", "", "width=400, height=400"); 3 | if(newWin == null) { 4 | alert("팝업이 차단되어 있습니다. 팝업 차단을 해제하고 새로고침해 주세요."); 5 | } 6 | } 7 | 8 | window.onload = openPop; -------------------------------------------------------------------------------- /07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/10/css/reload.css:
--------------------------------------------------------------------------------
1 | #container{
2 | width:500px;
3 | margin:20px auto;
4 | padding:10px;
5 | }
6 | button {
7 | margin-top:20px;
8 | padding:10px 40px;
9 | border:1px solid #ccc;
10 | background:rgba(253, 234, 234, 0.6);
11 | }
--------------------------------------------------------------------------------
/04/css/multi3.css:
--------------------------------------------------------------------------------
1 |
2 | #result {
3 | width:500px;
4 | height:100px;
5 | margin: 50px auto;
6 | padding:10px;
7 | border:1px solid #ccc;
8 | box-shadow:1px 2px 1px #666;
9 | font-size:1.4em;
10 | line-height:100px;
11 | font-weight:bold;
12 | text-align:center;
13 | }
--------------------------------------------------------------------------------
/05/js/add-return.js:
--------------------------------------------------------------------------------
1 | var num1 = parseInt(prompt("첫 번째 숫자 : "));
2 | var num2 = parseInt(prompt("두 번째 숫자 : "));
3 | var result = addNumber(num1, num2);
4 | alert("두 수를 더한 값은 " + result + "입니다.");
5 |
6 | function addNumber(a, b) {
7 | var sum = a + b;
8 | return sum;
9 | }
10 |
--------------------------------------------------------------------------------
/10/main-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 이 문서가 열리면 자동으로 팝업 창이 표시됩니다.
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /08/js/product.js: -------------------------------------------------------------------------------- 1 | var bigPic = document.querySelector("#cup"); 2 | var smallPics = document.querySelectorAll(".small"); 3 | 4 | for(i=0; i" + num1 + " + " + num2 + " = " + result + "
"); 6 | 7 | function add(a, b) { 8 | var sum = a + b; 9 | return sum; 10 | } -------------------------------------------------------------------------------- /10/js/sol-2.js: -------------------------------------------------------------------------------- 1 | function changeBg() { 2 | var x = Math.floor(Math.random() * 256); 3 | var y = Math.floor(Math.random() * 256); 4 | var z = Math.floor(Math.random() * 256); 5 | var bgColor = "rgb(" + x + "," + y + "," + z + ")"; 6 | document.body.style.background = bgColor; 7 | } 8 | 9 | changeBg(); -------------------------------------------------------------------------------- /02/live-server.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |자바스크립트
11 | 12 | -------------------------------------------------------------------------------- /10/css/screen.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width:500px; 3 | margin:10px auto; 4 | } 5 | .display { 6 | margin-top:10px; 7 | padding:10px; 8 | border:1px solid #222; 9 | box-shadow: 1px 0 1px #ccc; 10 | } 11 | p { 12 | font-size:1em; 13 | } 14 | button { 15 | margin-top:20px; 16 | text-align:center; 17 | } -------------------------------------------------------------------------------- /10/sol-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |" + member1.name + "
"); 9 | document.write("- id : " + member1.id + " "); 10 | document.write("
- 나이 : " + member1.age + " "); 11 | document.write("
- 주소 : " + member1.address + "
구구단
12 | 13 | -------------------------------------------------------------------------------- /04/quiz-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |짝수일까, 홀수일까
11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /05/diy-function-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |구구단
12 | 13 | 14 | -------------------------------------------------------------------------------- /04/multi3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |JS와 CSS
11 |자바스크립트를 사용해서 웹 문서의 CSS 속성을 제어할 수 있습니다.
12 | 13 | -------------------------------------------------------------------------------- /04/even.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |짝수끼리 더하기
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /06/book-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |어서오세요
17 | 18 | -------------------------------------------------------------------------------- /04/quiz-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |3의 배수 찾기
17 | 18 | -------------------------------------------------------------------------------- /06/object-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
12 | 
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/02/sol-1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 | (결과 값 표시)
13 |
14 |
--------------------------------------------------------------------------------
/04/switch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | (결과 값 표시)
13 |
14 |
15 |
--------------------------------------------------------------------------------
/07/js/sol-1.js:
--------------------------------------------------------------------------------
1 | var numbers = [2, 4, 6, 8, 10];
2 | showArray(numbers);
3 |
4 | var sum = 0;
5 | for(var i=0; i자바스크립트
12 |위 텍스트를 클릭해 보세요
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /03/sol-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
12 | 
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/08/domEvent3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/08/domNode.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 | 원의 넓이 : 약 " + circle1.area()+"cm2"); 4 | 5 | function Circle(radius) { 6 | this.radius = radius, 7 | this.circumference = function() { 8 | return Math.floor(this.radius * 2 * Math.PI); 9 | } 10 | this.area = function() { 11 | return Math.floor(Math.pow(this.radius, 2) * Math.PI); 12 | } 13 | } -------------------------------------------------------------------------------- /05/event-dom-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/08/css/event.css:
--------------------------------------------------------------------------------
1 | #item {
2 | position:relative;
3 | width:500px;
4 | height:auto;
5 | padding:15px 20px;
6 | margin:auto;
7 | }
8 | button {
9 | background-color:rgba(255,255,255,0.7);;
10 | padding:5px;
11 | border:1px solid #ccc;
12 | font-size:0.8em;
13 | }
14 | .over {
15 | position:absolute;
16 | left:30px;
17 | bottom:30px;
18 | }
19 | .detail {
20 | width:400px;
21 | text-align:left;
22 | line-height:1.8;
23 | display:none;
24 | }
--------------------------------------------------------------------------------
/08/domCss3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
18 | 
19 |
20 |
21 |
--------------------------------------------------------------------------------
/07/index-1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
19 |
11 |
18 |
19 |
--------------------------------------------------------------------------------
/04/repeat-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 여행 준비물 점검 목록
12 | 16 | 17 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/03/sol-1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
12 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/05/css/event.css:
--------------------------------------------------------------------------------
1 | #item {
2 | position:relative;
3 | width:500px;
4 | height:auto;
5 | padding:15px 20px;
6 | margin:auto;
7 | }
8 | button {
9 | background-color:rgba(255,255,255,0.7);;
10 | padding:5px;
11 | border:1px solid #ccc;
12 | font-size:0.8em;
13 | }
14 | .over {
15 | position:absolute;
16 | left:30px;
17 | bottom:30px;
18 | }
19 | .detail {
20 | width:400px;
21 | text-align:left;
22 | line-height:1.8;
23 | display:none;
24 | }
25 | #cover { border: 5px solid transparent;}
--------------------------------------------------------------------------------
/09/css/login.css:
--------------------------------------------------------------------------------
1 | #container {
2 | width:500px;
3 | margin:auto;
4 | }
5 | #login_input {
6 | float:left;
7 | }
8 | input[type="text"], input[type="password"]{
9 |
10 | display:block;
11 | width:300px;
12 | height:35px;
13 | line-height:35px;
14 | border:1px solid #ccc;
15 | background-color:#eee;
16 | }
17 | #login_bttn > button {
18 | float:left;
19 | width:100px;
20 | height:78px;
21 | background-color:#222;
22 | color:white;
23 | border:none;
24 | }
--------------------------------------------------------------------------------
/실전프로젝트/slideShow/slideshow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 현재 문서는 랜덤 배경색을 사용하고 있습니다.
13 |'새로고침' 버튼을 클릭할 때마다 배경색이 달라질 것입니다.
14 | 15 |
10 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/02/quiz-3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 | 
12 | 
13 | 
14 | 
15 |
16 |
17 |
18 |
12 |
13 |
14 |
15 |
16 |
17 | 어서오세요
17 | 21 | 22 | -------------------------------------------------------------------------------- /06/js/object-result.js: -------------------------------------------------------------------------------- 1 | var toyRobot = { // toyRobot 객체를 선언한 후 프로퍼티와 메서드 정의 2 | productId: "123-12", 3 | name: "Robot", 4 | price : "25,000", 5 | madeIn : "Korea", 6 | quantity: 10, 7 | showStock : function() { // showStock( ) 메서드 정의 8 | document.querySelector('#display').innerHTML = this.name + " 제품은 " + this.quantity + "개 남아있습니다."; 9 | } 10 | // , 11 | // showPrice : function() { 12 | // alert(this.name + " 제품의 가격은 " + this.price + "입니다."); 13 | // } 14 | }; 15 | 16 | toyRobot.showStock(); // toyRobot 객체의 showStock( ) 메서드 실행 -------------------------------------------------------------------------------- /07/diy-itemList.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
12 |
19 |
20 |
--------------------------------------------------------------------------------
/07/index-2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 여행 준비물 점검 목록
13 | 17 | 18 |
11 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/02/js-time.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 여행 준비물 점검 목록
12 | 16 | 17 |
11 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/10/sol-2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 여행 준비물 점검 목록
12 | 16 | 17 |
12 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/02/js-time-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 현재 문서는 랜덤 배경색을 사용하고 있습니다.
13 |'새로고침' 버튼을 클릭할 때마다 배경색이 달라질 것입니다.
14 | 15 |
11 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/05/blockVar.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
19 |
20 |
--------------------------------------------------------------------------------
/04/diy-factorial-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 참석자 명단
13 |
14 |
18 | 홍길동 X
15 |백두산 X
16 |도레미 X
17 |자바스크립트
12 |위 텍스트를 클릭해 보세요
13 | 14 | 20 | 21 | -------------------------------------------------------------------------------- /02/change-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |자바스크립트
12 |위 텍스트를 클릭해 보세요
13 | 14 | 20 | 21 | -------------------------------------------------------------------------------- /실전프로젝트/slideShow/slideshow-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
10 |
19 |
21 |
--------------------------------------------------------------------------------
/07/js/sol-2.js:
--------------------------------------------------------------------------------
1 | var quotes = [];
2 | quotes[0] = "당신은 지금도 최고고, 이전에도 최고였으며 앞으로도 최고일 것입니다.";
3 | quotes[1] = "성공하는 사람은 실패하는데 익숙한 사람이다.";
4 | quotes[2] = "후회를 최대한 이용하라. 깊이 후회한다는 것은 새로운 삶은 산다는 것이다.";
5 | quotes[3] = "가짜 친구는 소문을 믿고 진짜 친구는 나를 믿는다.";
6 | quotes[4] = "성공이라는 못을 박으려면 끈질김이라는 망치가 필요하다.";
7 | quotes[5] = "인생이란 결코 공평하지 않다. 이 사실에 익숙해져라.";
8 | quotes[6] = "'언젠가'라는 날은 영원히 오지 않는다.";
9 | quotes[7] = "문제점을 찾지 말고 해결책을 찾으라.";
10 | quotes[8] = "착한 일은 작다 해서 아니하지 말고, 악한 일은 작다 해도 하지 말라.";
11 | quotes[9] = "자존심은 어리석은 자의 소유물이다";
12 |
13 | var index = Math.floor(Math.random() * 10);
14 | document.write("
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
12 |
13 |
14 |
15 |
16 |
17 | "" + quotes[index] + ""
") -------------------------------------------------------------------------------- /07/sol-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
12 |
13 |
14 |
20 |
21 |
--------------------------------------------------------------------------------
/08/register.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
12 |
18 | 19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/06/js/book-result.js:
--------------------------------------------------------------------------------
1 | function Book(title, author, volume, price) {
2 | this.title = title; // 책 제목
3 | this.author = author; // 저자
4 | this.volume = volume; // 분량
5 | this.price = price; // 가격
6 | }
7 |
8 | var html = new Book('웹 표준의 정석', 'Ko', '608', '28,000');
9 | var youtube = new Book('유튜브 영상 만들기', 'Kim', '368', '16,000');
10 | var python = new Book('점프 투 파이썬', 'Park', '352', '18,800');
11 |
12 | var bookList = [html, youtube, python];
13 |
14 | document.write("참가 신청
13 | 17 |18 | 19 |
책 제목으로 살펴보기
"); 15 | for(var i=0; i
11 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/04/multi3-temp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 공지사항
12 |팝업 창에 표시되는 내용
13 |팝업 창에 표시되는 내용
14 |팝업 창에 표시되는 내용
15 |팝업 창에 표시되는 내용
16 |팝업 창에 표시되는 내용
17 | 18 | 19 |
12 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/08/domEvent2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 여행 준비물 점검 목록
13 | 17 | 18 |
12 |
13 |
14 |
22 |
23 |
--------------------------------------------------------------------------------
/04/even-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 | 짝수끼리 더하기
12 | 13 | 26 | 27 | -------------------------------------------------------------------------------- /08/diy-register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
12 |
18 | 19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/04/diy-gugudan-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 참가 신청
13 | 17 |18 | 19 |
구구단
12 | 22 | 23 | -------------------------------------------------------------------------------- /04/gugudan-result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |구구단
12 | 22 | 23 | -------------------------------------------------------------------------------- /04/sol-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |3의 배수 찾기
17 | 18 | 29 | 30 | -------------------------------------------------------------------------------- /09/css/sol-2.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | text-align: center; 3 | } 4 | #calc { 5 | width:300px; 6 | margin:50px auto; 7 | } 8 | #start { 9 | border:1px solid #222; 10 | background-color:#eee; 11 | border-radius:5px; 12 | margin-left:10px; 13 | padding:15px 30px; 14 | } 15 | hr { 16 | width:300px; 17 | margin-left:0; 18 | margin-top:30px; 19 | margin-bottom:40px; 20 | } 21 | input[type="text"] { 22 | height:50px; 23 | border:2px solid #222; 24 | border-radius:10px; 25 | padding-left:20px; 26 | } 27 | #radius{ 28 | width:150px; 29 | } 30 | #round, #area { 31 | width:300px; 32 | } 33 | #calc > p { 34 | line-height:40px; 35 | } -------------------------------------------------------------------------------- /04/sol-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |짝수일까, 홀수일까
17 | 18 | 28 | 29 | -------------------------------------------------------------------------------- /07/css/list.css: -------------------------------------------------------------------------------- 1 | form::after { 2 | content:""; 3 | display:table; 4 | clear:both; 5 | } 6 | ul{ 7 | margin:0; 8 | padding:0; 9 | list-style: none; 10 | } 11 | ul li{ 12 | cursor:pointer; 13 | position:relative; 14 | padding:12px 8px 12px 40px; 15 | background: #eee; 16 | font-size:18px; 17 | transition: 0.2s; 18 | } 19 | ul li:nth-child(odd) { 20 | background-color:#f9f9f9; 21 | } 22 | ul li:hover { 23 | background-color:#ddd; 24 | } 25 | .close { 26 | position:absolute; 27 | right:0; 28 | top:0; 29 | padding:12px 16px; 30 | border:none; 31 | background:rgba(255,255,255,0) 32 | } 33 | .close:hover { 34 | background-color:#007acc; 35 | color:white; 36 | } -------------------------------------------------------------------------------- /08/register-create.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
12 |
18 | 19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/08/register-insert.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 참가 신청
13 | 17 |18 | 19 |
12 |
18 | 19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/09/reg.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 참가 신청
13 | 17 |18 | 19 |
12 |
23 |
24 |
--------------------------------------------------------------------------------
/03/age-temp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 로그인
13 | 22 |(결과 값 표시)
13 |
22 |
23 |
--------------------------------------------------------------------------------
/08/domCss2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
25 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/05/event.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 도형 위로 마우스 포인터를 올려놓으세요.
26 | 27 |
12 |
13 |
14 |
20 |
21 |
--------------------------------------------------------------------------------
/08/register-delete.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
14 |
15 |
19 | 민들레
16 |어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.
17 | 18 |
12 |
18 | 19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/08/register-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 참가 신청
13 | 17 |18 | 19 |
12 |
18 | 19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/05/diy-event.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 참가 신청
13 | 17 |18 | 19 |
12 |
13 |
14 |
20 |
21 |
--------------------------------------------------------------------------------
/08/diy-register-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
14 |
15 |
19 | 민들레
16 |어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.
17 | 18 |
12 |
18 | 19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/03/age-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 참가 신청
13 | 17 |18 | 19 |
(결과 값 표시)
13 |
22 |
23 |
--------------------------------------------------------------------------------
/05/event-handler.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
13 |
14 |
20 |
21 |
--------------------------------------------------------------------------------
/07/css/input.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing:border-box;
3 | }
4 | #wrapper {
5 | width:600px;
6 | margin:0 auto;
7 | }
8 | h2 {
9 | text-align:center;
10 | }
11 | form {
12 | background-color:#007acc;
13 | padding:30px 40px;
14 | color:white;
15 | text-align:center;
16 | }
17 | input {
18 | border:none;
19 | width:440px;
20 | padding:10px;
21 | float:left;
22 | font-size:16px;
23 | }
24 | .addBtn {
25 | padding:10px;
26 | width:50px;
27 | border:none;
28 | background-color:#fff;
29 | box-shadow:1px 2px 4px #167dae;
30 | color:#555;
31 | text-align:center;
32 | font-size:14px;
33 | cursor:pointer;
34 | transition:0.3;
35 | }
36 | form::after {
37 | content:"";
38 | display:table;
39 | clear:both;
40 | }
--------------------------------------------------------------------------------
/03/css/bargain.css:
--------------------------------------------------------------------------------
1 | #contents {
2 | width: 450px;
3 | margin:0 auto;
4 | }
5 | #contents > img {
6 | float:left;
7 | margin-right:25px;
8 | }
9 | ul {
10 | list-style: none;
11 | padding-top:40px;
12 | }
13 | li {
14 | margin-bottom:10px;
15 | }
16 | li > label {
17 | width:80px;
18 | float:left;
19 | text-align:right;
20 | }
21 | input[type="text"] {
22 | width:110px;
23 | padding:5px 10px;
24 | margin:0 5px 0 10px;
25 | }
26 | li:nth-child(3) {
27 | margin-top:20px;
28 | text-align: center;
29 | }
30 | button {
31 | padding:5px 10px;
32 | border:1px solid #ccc;
33 | font-size:1em;
34 | }
35 | #showResult {
36 | margin-top:20px;
37 | font-size:1.5em;
38 | }
--------------------------------------------------------------------------------
/10/current.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
14 |
15 |
19 | 민들레
16 |어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.
17 | 18 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/03/bargain.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 숫자 맞히기 게임
12 |1에서 100 사이의 수를 입력하세요.
13 | 18 | 19 | 20 |
12 | 
13 |
28 |
29 |
--------------------------------------------------------------------------------
/03/diy-bargain.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 | -
14 |
- 15 | 16 | 원 17 | 18 |
- 19 | 20 | % 21 | 22 |
- 23 | 24 | 25 |
12 |
13 |
28 |
29 |
--------------------------------------------------------------------------------
/05/event-handler-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 | -
14 |
- 15 | 16 | 원 17 | 18 |
- 19 | 20 | % 21 | 22 |
- 23 | 24 | 25 |
12 |
13 |
14 |
20 |
21 |
--------------------------------------------------------------------------------
/09/quiz-2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
14 |
15 |
19 | 민들레
16 |어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.
17 | 18 |원 둘레과 넓이 계산
12 |
13 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/03/css/quiz.css:
--------------------------------------------------------------------------------
1 |
2 | #contents {
3 | width:500px;
4 | margin:0 auto;
5 | }
6 | ul {
7 | list-style: none;
8 | padding-top:40px;
9 | }
10 | li {
11 | clear:left;
12 | margin-bottom:10px;
13 | }
14 | li > label {
15 | width:150px;
16 | float:left;
17 | text-align:right;
18 | }
19 | input[type="text"] {
20 | width:110px;
21 | padding:5px 10px;
22 | margin:0 5px 0 10px;
23 | }
24 | li:nth-child(3) {
25 | margin-top:20px;
26 | text-align: center;
27 | }
28 | button {
29 | width:400px;
30 | margin:auto;
31 | padding:10px;
32 | border:1px solid #ccc;
33 | font-size:1em;
34 | }
35 | #result {
36 | width:400px;
37 | padding:10px;
38 | margin-top:20px;
39 | font-size:1.2em;
40 | text-align:center;
41 | }
--------------------------------------------------------------------------------
/04/switch-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 원 둘레과 넓이 계산
12 |
13 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/08/quiz-1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Ipsum quis consectetur sint ullamco.
18 |Labore do officia velit mollit eu pariatur. Do aute sunt aute dolore labore incididunt Lorem mollit laborum adipisicing. Ipsum adipisicing amet ut in. Lorem incididunt sunt et excepteur amet occaecat culpa incididunt exercitation. Labore excepteur Lorem voluptate ipsum magna consequat eiusmod ex anim labore pariatur eiusmod. Excepteur amet non magna est.
19 | 20 | -------------------------------------------------------------------------------- /실전프로젝트/converter/converter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
12 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/05/event-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 섭씨 ⟺ 화씨 온도 변환기
13 |
14 |
24 |
15 |
16 | ℃
17 |
18 | ⟺
19 |
20 |
21 | ℉
22 |
23 |
12 |
13 |
14 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/09/css/register.css:
--------------------------------------------------------------------------------
1 | #container{
2 | width:600px;
3 | margin:0 auto;
4 | }
5 | ul {
6 | list-style:none;
7 | }
8 | ul li {
9 | clear:both;
10 | }
11 | .field {
12 | float:left;
13 | width:100px;
14 | font-weight:bold;
15 | font-size:0.9em;
16 | line-height: 55px;
17 | text-align:right;
18 | margin-right:15px;
19 | }
20 | input[type="text"], input[type="password"], input[type="email"] {
21 | float:left;
22 | width:350px;
23 | height:35px;
24 | border:1px solid #aaa;
25 | border-radius:5px;
26 | padding:5px;
27 | margin:10px 0;
28 | float:left;
29 | }
30 |
31 | .r {
32 | line-height:55px;
33 | }
34 |
35 | #buttons > li {
36 | display:inline-block;
37 | }
38 | button {
39 | width:250px;
40 | height:50px;
41 | margin-right:10px;
42 | border:1px solid #ccc;
43 | background:#eee;
44 | font-size:0.9em;
45 | }
--------------------------------------------------------------------------------
/05/diy-event-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
14 |
15 |
19 | 민들레
16 |어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.
17 | 18 |
12 |
13 |
14 |
20 |
21 | >
22 |
23 |
--------------------------------------------------------------------------------
/08/dom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
13 |
14 |
15 |
19 | 민들레
16 |어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.
17 | 18 |
13 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/10/locationObject.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 상품 정보
14 |-
15 |
- 원산지 : 에디오피아 16 |
- 지 역 : 이르가체프 코체레 17 |
- 농 장 : 게뎁 18 |
- 고 도 : 1,950 ~ 2,000 m 19 |
- 품 종 : 지역 토착종 20 |
- 가공법 : 워시드 21 |
상세 설명
23 |2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 24 | 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.
25 |커피의 풍미
26 |은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.
27 |
12 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/실전프로젝트/upAndDown/upAndDown-resutl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | location 객체
13 |
14 |
19 |
20 |
21 |
11 |
21 |
29 |
30 |
--------------------------------------------------------------------------------
/09/js/order-result.js:
--------------------------------------------------------------------------------
1 | var check = document.querySelector("#shippingInfo"); // 체크박스의 id는 shippingInfo
2 |
3 | check.addEventListener("click", function() { // check 요소에 click 이벤트가 발생했을 때 실행할 함수
4 | if(check.checked == true) { // 체크되었다면
5 | document.querySelector("#shippingName").value = document.querySelector("#billingName").value; // 주문 정보(이름)를 배송 정보(이름)에 복사
6 | document.querySelector("#shippingTel").value = document.querySelector("#billingTel").value; // 주문 정보(전화번호)를 배송 정보(전화번호)에 복사
7 | document.querySelector("#shippingAddr").value = addrInfo = document.querySelector("#billingAddr").value; // 주문 정보(주소)를 배송 정보(주소)에 복사
8 | }
9 | else { // 체크되어 있지 않다면 배송 정보 필드를 지움.
10 | document.querySelector("#shippingName").value = "";
11 | document.querySelector("#shippingTel").value = "";
12 | document.querySelector("#shippingAddr").value = "";
13 | }
14 | });
--------------------------------------------------------------------------------
/08/sol-1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 숫자 맞히기 게임
12 |1에서 100 사이의 수를 입력하세요.
13 | 18 | 19 | 20 |Ipsum quis consectetur sint ullamco.
18 |Labore do officia velit mollit eu pariatur. Do aute sunt aute dolore labore incididunt Lorem mollit laborum adipisicing. Ipsum adipisicing amet ut in. Lorem incididunt sunt et excepteur amet occaecat culpa incididunt exercitation. Labore excepteur Lorem voluptate ipsum magna consequat eiusmod ex anim labore pariatur eiusmod. Excepteur amet non magna est.
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /10/browser.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |할 일 목록
28 |-
29 |
- ✓할 일 1 30 |
- ✓할 일 2 31 |
- ✓할 일 3 32 |
- ✓할 일 4 33 |
- ✓할 일 5 34 |
12 |
23 |
24 |
--------------------------------------------------------------------------------
/09/js/signup.js:
--------------------------------------------------------------------------------
1 | var userId = document.querySelector("#user-id"); // ‘아이디’ 필드를 가져와 변수에 저장
2 | var pw1 = document.querySelector("#user-pw1"); // ‘비밀번호’ 필드를 가져와 변수에 저장
3 | var pw2 = document.querySelector("#user-pw2"); // ‘비밀번호 확인’ 필드를 가져와 변수에 저장
4 |
5 | function checkId() {
6 | if (userId.value.length < 4 || userId.value.length > 15) { // userId 필드 내용의 길이가 4 이하이거나 15 이상일 경우 실행
7 | alert("4~15자리의 영문과 숫자를 사용하세요."); // 오류 메시지 출력
8 | userId.select();
9 | }
10 | }
11 |
12 | function checkPw() {
13 | if (pw1.value.length < 8) {
14 | alert("비밀번호는 8자리 이상이어야 합니다."); // 오류 메시지 표시
15 | pw1.value = ""; // ‘비밀번호’ 필드 지움
16 | pw1.focus(); // 비밀번호를 다시 입력할 수 있게 포커싱
17 | }
18 | }
19 |
20 | function comparePw() {
21 | if(pw1.value != pw2.value) {
22 | alert("암호가 다릅니다. 다시 입력하세요.");
23 | pw2.value = ""; // ‘비밀번호 확인’ 필드 지움
24 | pw2.focus(); // 비밀번호를 다시 입력할 수 있게 포커싱
25 | }
26 | }
--------------------------------------------------------------------------------
/09/js/signup-result.js:
--------------------------------------------------------------------------------
1 | var userId = document.querySelector("#user-id"); // ‘아이디’ 필드를 가져와 변수에 저장
2 | var pw1 = document.querySelector("#user-pw1"); // ‘비밀번호’ 필드를 가져와 변수에 저장
3 | var pw2 = document.querySelector("#user-pw2"); // ‘비밀번호 확인’ 필드를 가져와 변수에 저장
4 |
5 | function checkId() {
6 | if (userId.value.length < 4 || userId.value.length > 15) { // userId 필드 내용의 길이가 4 이하이거나 15 이상일 경우 실행
7 | alert("4~15자리의 영문과 숫자를 사용하세요."); // 오류 메시지 출력
8 | userId.select();
9 | }
10 | }
11 |
12 | function checkPw() {
13 | if (pw1.value.length < 8) {
14 | alert("비밀번호는 8자리 이상이어야 합니다."); // 오류 메시지 표시
15 | pw1.value = ""; // ‘비밀번호’ 필드 지움
16 | pw1.focus(); // 비밀번호를 다시 입력할 수 있게 포커싱
17 | }
18 | }
19 |
20 | function comparePw() {
21 | if(pw1.value != pw2.value) {
22 | alert("암호가 다릅니다. 다시 입력하세요.");
23 | pw2.value = ""; // ‘비밀번호 확인’ 필드 지움
24 | pw2.focus(); // 비밀번호를 다시 입력할 수 있게 포커싱
25 | }
26 | }
--------------------------------------------------------------------------------
/실전프로젝트/converter/converter-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 에디오피아 게뎁
13 |
14 | 
15 |
16 |
15 |
17 |
22 | Information
18 |2차 세계대전 이후 설립된 게뎁농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.
19 |Flavor Note
20 |은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.
21 |
12 |
25 |
37 |
38 |
--------------------------------------------------------------------------------
/09/css/order.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin:0;
3 | padding:0;
4 | box-sizing: border-box;
5 | }
6 | ul {
7 | list-style: none;
8 | }
9 | legend {
10 | font-size:1.2em;
11 | font-weight:bold;
12 | margin-left:20px;
13 | }
14 |
15 | form {
16 | width:520px;
17 | height:auto;
18 | padding-left:10px;
19 | margin:50px auto;
20 | }
21 | fieldset {
22 | border:1px solid #c0c0c0;
23 | padding:30px 20px 30px 30px;
24 | margin-bottom:35px;
25 | }
26 |
27 | .field {
28 | float:left;
29 | width:60px;
30 | font-weight:bold;
31 | font-size:0.9em;
32 | line-height: 55px;
33 | text-align:right;
34 | margin-right:15px;
35 | }
36 |
37 | .input-box {
38 | width:350px;
39 | height:35px;
40 | border:1px solid #aaa;
41 | border-radius:5px;
42 | padding:5px;
43 | margin:10px 0;
44 | float:left;
45 | }
46 |
47 | .order {
48 | width:100%;
49 | padding:20px;
50 | border:1px solid #aaa;
51 | background:#e9e9e9;
52 | font-size:1em;
53 | font-weight:bold;
54 | }
55 |
--------------------------------------------------------------------------------
/09/js/shipment-result.js:
--------------------------------------------------------------------------------
1 | var check = document.querySelector("#shippingInfo"); // 체크박스의 id는 shippingInfo
2 |
3 | check.addEventListener("click", function() { // check 요소에 click 이벤트가 발생했을 때 실행할 함수
4 | var nameInfo = document.querySelector("#billingName").value; // 주문 정보 - 이름
5 | var telInfo = document.querySelector("#billingTel").value; // 주문 정보 - 전화번호
6 | var addrInfo = document.querySelector("#billingAddr").value; // 주문 정보 - 주소
7 |
8 | if(check.checked == true) { // 체크되었다면
9 | document.querySelector("#shippingName").value = nameInfo; // 주문 정보(이름)를 배송 정보(이름)에 복사
10 | document.querySelector("#shippingTel").value = telInfo; // 주문 정보(전화번호)를 배송 정보(전화번호)에 복사
11 | document.querySelector("#shippingAddr").value = addrInfo; // 주문 정보(주소)를 배송 정보(주소)에 복사
12 | }
13 | else { // 체크되어 있지 않다면 배송 정보 필드를 지움.
14 | document.querySelector("#shippingName").value = "";
15 | document.querySelector("#shippingTel").value = "";
16 | document.querySelector("#shippingAddr").value = "";
17 | }
18 | });
19 |
--------------------------------------------------------------------------------
/06/js/diy-dday-result.js:
--------------------------------------------------------------------------------
1 | var now = new Date();
2 | var firstDay = new Date("2018-03-23");
3 | var toNow = now.getTime();
4 | var toFirst = firstDay.getTime();
5 | var passedTime = toNow - toFirst;
6 | var passedDay = Math.round(passedTime/(24*60*60*1000));
7 | document.querySelector('#accent').innerText = passedDay + "일";
8 |
9 | calcDate(100); // 100일 기념일을 계산해서 표시합니다.
10 | calcDate(200); // 200일 기념일을 계산해서 표시합니다.
11 | calcDate(365); // 1년 기념일을 계산해서 표시합니다.
12 | calcDate(500); // 500일 기념일을 계산해서 표시합니다.
13 |
14 | function calcDate(days) {
15 | var future = toFirst + days*(1000*60*60*24); // 처음 만난 날에 밀리초로 바꾼 100일을 더합니다.
16 | var someday = new Date(future); // future 값을 사용해 Date 객체의 인스턴스를 만듭니다.
17 | var year = someday.getFullYear( ); // ‘연도’를 가져와 year 변수에 저장합니다.
18 | var month = someday.getMonth( ) + 1; // ‘월’을 가져와 month 변수에 저장합니다.
19 | var date = someday.getDate( ); // ‘일’을 가져와 date 변수에 저장합니다.
20 | document.querySelector("#date"+days).innerText = year + "년 " + month + "월 " + date + "일";
21 | }
22 |
--------------------------------------------------------------------------------
/09/js/shipment.js:
--------------------------------------------------------------------------------
1 | var check = document.querySelector("#shippingInfo"); // 체크박스의 id는 shippingInfo
2 |
3 | var nameInfo = document.querySelector("#billingName").value; // 주문 정보 - 이름
4 | var telInfo = document.querySelector("#billingTel").value; // 주문 정보 - 전화번호
5 | var addrInfo = document.querySelector("#billingAddr").value; // 주문 정보 - 주소
6 |
7 | check.addEventListener("click", function() { // check 요소에 click 이벤트가 발생했을 때 실행할 함수
8 | if(check.checked == true) { // 체크되었다면
9 | document.querySelector("#shippingName").value = nameInfo; // 주문 정보(이름)를 배송 정보(이름)에 복사
10 | document.querySelector("#shippingTel").value = telInfo; // 주문 정보(전화번호)를 배송 정보(전화번호)에 복사
11 | document.querySelector("#shippingAddr").value = addrInfo; // 주문 정보(주소)를 배송 정보(주소)에 복사
12 | }
13 | else { // 체크되어 있지 않다면 배송 정보 필드를 지움.
14 | document.querySelector("#shippingName").value = "";
15 | document.querySelector("#shippingTel").value = "";
16 | document.querySelector("#shippingAddr").value = "";
17 | }
18 | });
--------------------------------------------------------------------------------
/03/bargain-temp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 섭씨 ⟺ 화씨 온도 변환기
13 |
14 |
24 |
15 |
16 | ℃
17 |
18 | ⟺
19 |
20 |
21 | ℉
22 |
23 |
12 |
13 |
28 |
29 |
36 |
37 |
--------------------------------------------------------------------------------
/실전프로젝트/converter/js/converter-result.js:
--------------------------------------------------------------------------------
1 | var sUnit = document.querySelector("#s-unit"); // 왼쪽 텍스트 필드 옆에 표시하는 단위
2 | var tUnit = document.querySelector("#t-unit"); // 오른쪽 텍스트 필드 옆에 표시하는 단위
3 | var cToF = true; // 섭씨에서 화씨로 변환
4 |
5 | var source = document.querySelector("#s-value"); // 왼쪽 필드
6 | var target = document.querySelector("#t-value"); // 오른쪽 필드
7 |
8 | function exUnit() {
9 | source.value = ""; // 왼쪽 텍스트 필드 값 지움
10 | target.value = ""; // 오른쪽 텍스트 필드 값 지움
11 |
12 | if (cToF) {
13 | cToF = false; // 화씨 -> 섭씨 변환
14 | sUnit.innerHTML = "℉"; // 화씨 기호
15 | tUnit.innerHTML = "℃"; // 섭씨 기호
16 | }
17 | else {
18 | cToF = true; // 섭씨 -> 화씨 변환
19 | sUnit.innerHTML = "℃"; // 섭씨 기호
20 | tUnit.innerHTML = "℉"; // 화씨 기호
21 | }
22 | }
23 |
24 | function converter() {
25 | if(cToF) {
26 | target.value = (source.value * 1.8 + 32).toFixed(2); // 섭씨 -> 화씨 계산
27 | }
28 | else {
29 | target.value = ((source.value - 32) / 1.8).toFixed(2); // 화씨 -> 섭씨 계산
30 | }
31 | }
--------------------------------------------------------------------------------
/09/js/register-result.js:
--------------------------------------------------------------------------------
1 | var userId = document.querySelector("#user-id"); // ‘아이디’ 필드를 가져와 변수에 저장
2 | var pw1 = document.querySelector("#user-pw1"); // ‘비밀번호’ 필드를 가져와 변수에 저장
3 | var pw2 = document.querySelector("#user-pw2"); // ‘비밀번호 확인’ 필드를 가져와 변수에 저장
4 |
5 | userId.onchange = checkId;
6 | pw1.onchange = checkPw;
7 | pw2.onchange = comparePw;
8 |
9 | function checkId() {
10 | if (userId.value.length < 4 || userId.value.length > 15) { // userId 필드 내용의 길이가 4 이하이거나 15 이상일 경우 실행
11 | alert("4~15자리의 영문과 숫자를 사용하세요."); // 오류 메시지 출력
12 | userId.select(); // 다시 입력할 수 있도록 userId 필드 선택
13 | }
14 | }
15 |
16 | function checkPw() {
17 | if (pw1.value.length < 8) {
18 | alert("비밀번호는 8자리 이상이어야 합니다."); // 오류 메시지 표시
19 | pw1.value = ""; // ‘비밀번호’ 필드 지움
20 | pw1.focus(); // 비밀번호를 다시 입력할 수 있게 포커싱
21 | }
22 | }
23 |
24 | function comparePw() {
25 | if(pw1.value != pw2.value) {
26 | alert("암호가 다릅니다. 다시 입력하세요.");
27 | pw2.value = ""; // ‘비밀번호 확인’ 필드 지움
28 | pw2.focus(); // 비밀번호를 다시 입력할 수 있게 포커싱
29 | }
30 | }
--------------------------------------------------------------------------------
/04/for-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 | -
14 |
- 15 | 16 | 원 17 | 18 |
- 19 | 20 | % 21 | 22 |
- 23 | 24 | 25 |
11 |
35 |
36 |
--------------------------------------------------------------------------------
/06/diy-dday.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
15 |
16 | 우리 만난지
13 |며칠?
14 |
17 |
34 | -
18 |
- 100일 19 | 20 |
-
22 |
- 200일 23 | 24 |
-
26 |
- 1년 27 | 28 |
-
30 |
- 500일 31 | 32 |
11 |
35 |
36 |
--------------------------------------------------------------------------------
/05/css/d-day.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Marko+One');
2 |
3 | .container{
4 | width:500px;
5 | margin:0 auto;
6 | background:url(images/heart.png) no-repeat 5px -100px;
7 | background-size:500px;
8 | border:1px solid #ccc;
9 | border-radius:2%;
10 | box-shadow:2px 2px 5px #333;
11 | }
12 | .day1{
13 | padding-top:50px;
14 | text-align:center;
15 | }
16 | .day1 p {
17 | font-size:1.4em;
18 | color:#666;
19 | }
20 | .accent{
21 | margin-left:10px;
22 | margin-right:10px;
23 | font-family: 'Marko One', serif;
24 | font-size:2.5em;
25 | color:#00B300;
26 | text-shadow:1px 2px 1px #222;
27 | }
28 | .day2 {
29 | width:480px;
30 | margin:240px auto 20px auto;
31 | }
32 | .day2 ul {
33 | list-style: none;
34 | border-bottom:1px dashed #ccc;
35 | height:100px;
36 | }
37 | .item-title {
38 | float:left;
39 | width:160px;
40 | font-weight:bold;
41 | font-size:1.8em;
42 | line-height:100px;
43 | }
44 | .item-date {
45 | float:left;
46 | margin-left:60px;
47 | font-size:1.2em;
48 | color:#222;
49 | text-align:right;
50 | line-height:100px;
51 | }
--------------------------------------------------------------------------------
/06/css/d-day-old.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Marko+One');
2 |
3 | .container{
4 | width:500px;
5 | margin:0 auto;
6 | background:url(images/heart.png) no-repeat 5px -100px;
7 | background-size:500px;
8 | border:1px solid #ccc;
9 | border-radius:2%;
10 | box-shadow:2px 2px 5px #333;
11 | }
12 | .day1{
13 | padding-top:50px;
14 | text-align:center;
15 | }
16 | .day1 p {
17 | font-size:1.4em;
18 | color:#666;
19 | }
20 | .accent{
21 | margin-left:10px;
22 | margin-right:10px;
23 | font-family: 'Marko One', serif;
24 | font-size:2.5em;
25 | color:#00B300;
26 | text-shadow:1px 2px 1px #222;
27 | }
28 | .day2 {
29 | width:480px;
30 | margin:240px auto 20px auto;
31 | }
32 | .day2 ul {
33 | list-style: none;
34 | border-bottom:1px dashed #ccc;
35 | height:100px;
36 | }
37 | .item-title {
38 | float:left;
39 | width:160px;
40 | font-weight:bold;
41 | font-size:1.8em;
42 | line-height:100px;
43 | }
44 | .item-date {
45 | float:left;
46 | margin-left:60px;
47 | text-align:right;
48 | font-size:1.2em;
49 | color:#222;
50 | line-height:100px;
51 | }
--------------------------------------------------------------------------------
/08/css/nameList.css:
--------------------------------------------------------------------------------
1 | #container {
2 | width:500px;
3 | margin:20px auto;
4 | }
5 | h1 {
6 | font-size:2.5em;
7 | text-align: center
8 | }
9 | form {
10 | margin-top:50px;
11 | }
12 | input[type="text"] {
13 | float:left;
14 | width:300px;
15 | padding:12px;
16 | border:none;
17 | border-bottom:1px solid #ccc;
18 | font-size:20px;
19 | }
20 | input:focus {
21 | outline: none;
22 | }
23 | button {
24 | width:100px;
25 | border:1px solid #ccc;
26 | border-radius:7px;
27 | padding:12px;
28 | margin-left:30px;
29 | font-size:20px;
30 | }
31 | button:hover {
32 | background-color:#ccc;
33 | }
34 | hr {
35 | clear:both;
36 | visibility: hidden;
37 | }
38 | #nameList > p {
39 | font-size:20px;
40 | text-indent:50px;
41 | line-height: 1.5;
42 | }
43 | .del {
44 | font-size:20px;
45 | text-align: center;
46 | color:#ccc;
47 | background:transparent;
48 | float:right;
49 | margin-right:10px;
50 | }
51 | .del:hover {
52 | color:#222;
53 | cursor: pointer;
54 | }
55 | .del:active {
56 | outline:0;
57 | }
--------------------------------------------------------------------------------
/06/dday-temp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
15 |
16 | 우리 만난지
13 |며칠?
14 |
17 |
34 | -
18 |
- 100일 19 | 20 |
-
22 |
- 200일 23 | 24 |
-
26 |
- 1년 27 | 28 |
-
30 |
- 500일 31 | 32 |
11 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/06/dday-100.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
15 |
16 | 우리 만난지
13 |며칠?
14 |
17 |
34 | -
18 |
- 100일 19 | 20 |
-
22 |
- 200일 23 | 24 |
-
26 |
- 1년 27 | 28 |
-
30 |
- 500일 31 | 32 |
11 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/06/diy-dday-temp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
15 |
16 | 우리 만난지
13 |며칠?
14 |
17 |
34 | -
18 |
- 100일 19 | 20 |
-
22 |
- 200일 23 | 24 |
-
26 |
- 1년 27 | 28 |
-
30 |
- 500일 31 | 32 |
11 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/06/dday-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
15 |
16 | 우리 만난지
13 |며칠?
14 |
17 |
34 | -
18 |
- 100일 19 | 20 |
-
22 |
- 200일 23 | 24 |
-
26 |
- 1년 27 | 28 |
-
30 |
- 500일 31 | 32 |
11 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/06/diy-dday-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
15 |
16 | 우리 만난지
13 |며칠?
14 |
17 |
34 | -
18 |
- 100일 19 | 20 |
-
22 |
- 200일 23 | 24 |
-
26 |
- 1년 27 | 28 |
-
30 |
- 500일 31 | 32 |
11 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/06/js/dday-result.js:
--------------------------------------------------------------------------------
1 | var now = new Date(); // 오늘 날짜 정보를 Date 객체의 인스턴스 now 객체로 만듭니다.
2 | var firstDay = new Date("2018-03-23"); // 처음 만난 날의 날짜 정보를 firstDay 객체로 만듭니다.
3 | var toNow = now.getTime(); // 오늘 날짜를 밀리초로 바꿉니다.
4 | var toFirst = firstDay.getTime(); // 처음 만난 날을 밀리초로 바꿉니다.
5 | var passedTime = toNow - toFirst; // 처음 만난 날과 오늘 사이의 차이 (밀리초)
6 | var passedDay = Math.round(passedTime/(24*60*60*1000)); // 밀리초를 일로 변환 후 반올림합니다.
7 | document.querySelector('#accent').innerText = passedDay + "일"; // #accent 영역에 표시합니다.
8 |
9 | calcDate(100); // 100일 기념일을 계산해서 표시합니다.
10 | calcDate(200); // 200일 기념일을 계산해서 표시합니다.
11 | calcDate(365); // 1년 기념일을 계산해서 표시합니다.
12 | calcDate(500); // 500일 기념일을 계산해서 표시합니다.
13 |
14 | function calcDate(days) {
15 | var future = toFirst + days*(1000*60*60*24); // 처음 만난 날에 밀리초로 바꾼 100일을 더합니다.
16 | var someday = new Date(future); // future 값을 사용해 Date 객체의 인스턴스를 만듭니다.
17 | var year = someday.getFullYear( ); // ‘연도’를 가져와 year 변수에 저장합니다.
18 | var month = someday.getMonth( ) + 1; // ‘월’을 가져와 month 변수에 저장합니다.
19 | var date = someday.getDate( ); // ‘일’을 가져와 date 변수에 저장합니다.
20 | document.querySelector("#date"+days).innerText = year + "년 " + month + "월 " + date + "일";
21 | }
22 |
--------------------------------------------------------------------------------
/실전프로젝트/slideShow/css/slideshow.css:
--------------------------------------------------------------------------------
1 | .wrapper { /* 슬라이드 쇼 영역 스타일 */
2 | width:600px; /* 너비 */
3 | margin:0 auto; /* 화면 중앙에 배치 */
4 | position:relative; /* 슬라이드 위치를 잡기 위해 */
5 | background-color:#ccc;
6 | text-align:center; /* 슬라이드를 화면 중앙에 배치 */
7 | }
8 | #container {
9 | position:absolute;
10 | }
11 | #container > img { /* 각 이미지의 스타일 */
12 | width:100%; /* 슬라이드 영역에 꽉 차게 */
13 | float:left; /* 왼쪽부터 배치 */
14 | }
15 | button {
16 | position:absolute; /* 배치 방법 : absolute */
17 | height:100%; /* 버튼 높이를 슬라이드 영역에 꽉 채움 */
18 | top:0; /* 위로 바짝 붙여서 배치 */
19 | border:none; /* 테두리 없음 */
20 | padding:20px; /* 패딩 20px */
21 | background-color:transparent; /* 투명 배경 */
22 | color:#000; /* 화살표 색 */
23 | font-weight:800; /* 진하기 */
24 | font-size:24px; /* 화살표 크기 */
25 | opacity:0.5; /* 불투명도 */
26 | }
27 | #prev {
28 | left:0; /* 왼쪽으로 바짝 붙여서 배치 */
29 | }
30 | #next {
31 | right:0; /* 오른쪽 바짝 붙여서 배치 */
32 | }
33 | button:hover { /* 버튼 위로 마우스 오버 했을 때의 스타일 */
34 | background-color:#222; /* 배경색 */
35 | color:#fff; /* 화살표 색 */
36 | opacity:0.6; /* 불투명도 */
37 | cursor:pointer; /* 마우스 커서 모양 */
38 | }
39 | button:focus { /* 버튼에 포커싱했을 때 스타일 */
40 | outline:0; /* 주변 테두리 없애기 */
41 | }
--------------------------------------------------------------------------------
/10/browserCheck.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
15 |
16 | 우리 만난지
13 |며칠?
14 |
17 |
34 | -
18 |
- 100일 19 | 20 |
-
22 |
- 200일 23 | 24 |
-
26 |
- 1년 27 | 28 |
-
30 |
- 500일 31 | 32 |
브라우저 체크
11 | 29 | 30 | -------------------------------------------------------------------------------- /실전프로젝트/upAndDown/keycode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
25 |
32 |
33 |
42 |
43 |
--------------------------------------------------------------------------------
/10/screenObject.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 텍스트 필드에 키 입력
26 | 29 |눌린 키 :
30 |keycode :
31 |
12 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [Do it! 자바스크립트 기초] 소스 파일 활용 방법
2 |
3 |
4 | 
5 |
6 | **현재 깃허브에 올라와 있는 파일은 [Do it! 자바스크립트 기초]의 실습 파일입니다.**
7 |
8 | -----------------------------------------------
9 |
10 |
11 | ### 깃허브 계정이 있다면
12 | 1. 화면 오른쪽 위에 있는 [Fork] 버튼을 클릭합니다.
13 | 2. 자신의 리포지토리에 복제된 소스를 사용하면 됩니다.
14 |
15 | 
16 |
17 | ----------------------------------------------
18 |
19 | ### 깃허브 계정이 없거나 한꺼번에 다운로드하려면
20 | 1. 파일 목록 오른쪽 위에 있는 [Colone or download]를 클릭합니다.
21 | 2. [Download ZIP]을 클릭합니다.js-basic-book-master.zip 라는 파일이 다운로드됩니다.
22 | 3. 원하는 위치에 js-file이라는 폴더를 만들고 그 안에 다운로드한 파일의 압축을 풉니다.
23 |
24 | 
25 |
26 | ### 파일을 다운로드하는 또다른 방법
27 |
28 | 1. 파일 목록 오른쪽에 있는 [Release] 항목에 [실습 파일]을 클릭합니다.
29 | 2. 실습 파일 목록 중 [Source Code]을 클릭합니다. js-files.zip 라는 파일이 다운로드됩니다.
30 | 3. 원하는 위치에 다운로드한 파일의 압축을 풉니다.
31 | 
32 |
33 | ----------------------------------------------
34 |
35 | ### 실전 프로젝트에 도전해 보세요.
36 | 실습 파일에 포함된 '실전 프로젝트' 폴더에는 이 책을 공부한 후에 따라해 볼 수 있는 프로젝트 파일이 담겨 있습니다.
37 |
38 | - 숫자 맞히기 게임
39 | - 이미지 슬라이드 쇼
40 | - 온도 변환기
41 |
42 | 실습 과정을 설명한 PDF 파일을 참고하면서 공부했던 내용을 복습해 볼 수 있습니다.
43 |
44 |
45 |
--------------------------------------------------------------------------------
/실전프로젝트/upAndDown/js/upanddown-result.js:
--------------------------------------------------------------------------------
1 | var count = 0;
2 | var randomNumber = Math.floor(Math.random() * 100) + 1; // 컴퓨터 무작위 수 생성
3 |
4 | document.querySelector("#try").onkeypress = function(e) { //키보드 클릭해서 함수 실행
5 | if (e.keyCode == 13 || e.which == 13) { // enter 키인지 체크
6 | finding(); // 함수 실행
7 | return false; // keypress일 때 브라우저가 할 기본 동작 취소
8 | }
9 | }
10 |
11 | function finding() {
12 | var userNumber = document.querySelector("#try").value; // 사용자가 입력한 숫자 가져오기
13 |
14 | if ( userNumber >=1 && userNumber <= 100) {
15 | if (randomNumber > userNumber) {
16 | document.querySelector("#display").innerHTML = " UP!"; // #display 영역에 UP! 표시
17 | }
18 | else if (randomNumber < userNumber) {
19 | document.querySelector("#display").innerHTML = "DOWN!"; // #display 영역에 DOWN! 표시
20 | }
21 | else {
22 | document.querySelector("#display").innerHTML = "맞혔습니다!"; // #display 영역에 맞혔다고 표시. 글자색 지정하는 태그 사용
23 | }
24 |
25 | document.querySelector("#try").value="";
26 | count++;
27 | document.querySelector("#counter").innerHTML = "시도 횟수 : " + count + "회";
28 | }
29 | else
30 | alert("1과 100 사이의 숫자를 입력하세요.");
31 | }
--------------------------------------------------------------------------------
/09/quiz-1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | screen 객체
13 |
14 |
20 |
21 | window 객체
22 |
23 |
29 |
30 |
12 |
32 |
33 |
--------------------------------------------------------------------------------
/03/bargain-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 피자 주문
13 | 31 |
12 |
13 |
28 |
29 |
39 |
40 |
--------------------------------------------------------------------------------
/03/diy-bargain-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 | -
14 |
- 15 | 16 | 원 17 | 18 |
- 19 | 20 | % 21 | 22 |
- 23 | 24 | 25 |
12 |
13 |
28 |
29 |
42 |
43 |
--------------------------------------------------------------------------------
/실전프로젝트/converter/css/converter.css:
--------------------------------------------------------------------------------
1 | body{
2 | box-sizing: border-box;
3 | }
4 | .container {
5 | width:350px;
6 | margin:30px auto;
7 | }
8 | .container > h2 {
9 | text-align:center;
10 | }
11 | .change {
12 | box-sizing: border-box;
13 | width:100%;
14 | padding:15px 20px;
15 | background:#fbfbfb;
16 | border:1px solid #eee;
17 | }
18 | .box {
19 | display:inline-block;
20 | height:28px;
21 | border:1px solid #ddd;
22 | background-color:#fff;
23 | }
24 | #exchange {
25 | display:inline-block;
26 | width:20px;
27 | height:25px;
28 | margin:0 10px;
29 | line-height:25px;
30 | }
31 | #exchange:hover {
32 | cursor: pointer;
33 | }
34 | .box input[type="text"] {
35 | display:inline-block;
36 | width:80px;
37 | height:25px;
38 | padding-right:3px;
39 | border:0;
40 | line-height:25px;
41 | font-size:12px;
42 | font-weight:bold;
43 | text-align:right;
44 | }
45 | .unit {
46 | width:40px;
47 | height:25px;
48 | padding-right:10px;
49 | line-height: 25px;
50 | font-family:"돋움";
51 | font-size:12px;
52 | text-align:right;
53 | }
54 |
--------------------------------------------------------------------------------
/06/js/dday-100.js:
--------------------------------------------------------------------------------
1 | var now = new Date(); // 오늘 날짜 정보를 Date 객체의 인스턴스 now 객체로 만듭니다.
2 | var firstDay = new Date("2018-03-23"); // 처음 만난 날의 날짜 정보를 firstDay 객체로 만듭니다.
3 | var toNow = now.getTime(); // 오늘 날짜를 밀리초로 바꿉니다.
4 | var toFirst = firstDay.getTime(); // 처음 만난 날을 밀리초로 바꿉니다.
5 | var passedTime = toNow - toFirst; // 처음 만난 날과 오늘 사이의 차이 (밀리초)
6 | var passedDay = Math.round(passedTime/(24*60*60*1000)); // 밀리초를 일로 변환 후 반올림합니다.
7 | document.querySelector('#accent').innerText = passedDay + "일"; // #accent 영역에 표시합니다.
8 |
9 | var future = toFirst + 100*(1000*60*60*24); // 처음 만난 날에 밀리초로 바꾼 100일을 더합니다.
10 | var someday = new Date(future); // future100 값을 사용해 Date 객체의 인스턴스를 만듭니다.
11 | var year = someday.getFullYear( ); // ‘연도’를 가져와 year 변수에 저장합니다.
12 | var month = someday.getMonth( ); // '월'을 가져와 month 변수에 저장합니다.
13 | var date = someday.getDate( ); // '일'을 가져와 date 변수에 저장합니다.
14 | document.querySelector("#date100").innerText = year + "년 " + month + "월 " + date + "일";
15 |
16 | future = toFirst + 200*(1000*60*60*24); // 처음 만난 날에 밀리초로 바꾼 200일을 더합니다.
17 | someday = new Date(future); // future 값을 사용해 Date 객체의 인스턴스를 만듭니다.
18 | year = someday.getFullYear( ); // ‘연도’를 가져와 year 변수에 저장합니다.
19 | month = someday.getMonth( ); // '월'을 가져와 month 변수에 저장합니다.
20 | date = someday.getDate( ); // '일'을 가져와 date 변수에 저장합니다.
21 | document.querySelector("#date200").innerText = year + "년 " + month + "월 " + date + "일";
--------------------------------------------------------------------------------
/09/sol-1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 | -
14 |
- 15 | 16 | 원 17 | 18 |
- 19 | 20 | % 21 | 22 |
- 23 | 24 | 25 |
12 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/08/js/register-delete.js:
--------------------------------------------------------------------------------
1 | function newRegister() {
2 | var newP = document.createElement("p"); // 새 p 요소 만들기
3 | var userName = document.querySelector("#userName");
4 | var newText = document.createTextNode(userName.value); // 새 텍스트 노드 만들기
5 | newP.appendChild(newText); // 텍스트 노드를 p 요소의 자식 요소로 연결하기
6 |
7 | var delBttn = document.createElement("span"); // 새 button 요소 만들기
8 | var delText = document.createTextNode("X"); // 새 텍스트 노드 만들기
9 | delBttn.setAttribute("class", "del"); // 버튼에 class 속성 설정하기
10 | delBttn.appendChild(delText); // 텍스트 노드를 button 요소의 자식 요소로 연결하기
11 | newP.appendChild(delBttn); // del 버튼을 p 요소의 자식 요소로
12 |
13 | var nameList = document.querySelector("#nameList");
14 | nameList.insertBefore(newP, nameList.childNodes[0]); // p 요소를 #nameList 맨 앞에 추가하기
15 | // nameList.appendChild(newP); // p 요소를 #nameList의 자식 요소로 만들기
16 | userName.value = ""; // 텍스트 필드 지우기
17 |
18 | var removeBttns = document.querySelectorAll(".del");
19 |
20 | for (var i=0; i피자 주문
13 | 31 |- ";
26 | for (var i=0; i
12 |
13 |
14 |
20 |
21 |
38 |
39 |
--------------------------------------------------------------------------------
/06/css/d-day.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Black+Han+Sans|Jua');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 | .container{
7 | width:450px;
8 | margin:0 auto;
9 | /* background:url(images/heart.png) no-repeat 5px -100px;
10 | background-size:500px; */
11 | border:1px solid #ccc;
12 | border-radius:2%;
13 | box-shadow:2px 2px 5px #333;
14 | }
15 | .day1{
16 | padding-top:20px;
17 | text-align:center;
18 | }
19 | .day1 h3 {
20 | font-size:1.2em;
21 | color:#666;
22 | }
23 | .accent{
24 | margin-left:10px;
25 | margin-right:10px;
26 | margin-top:10px;
27 | font-family: 'Jua', sans-serif;
28 | font-weight:bold;
29 | font-size:3.5em;
30 | color:#222;
31 | }
32 | .bar {
33 | width:100%;
34 | margin:60px auto 0 auto;
35 | padding-left:15px;
36 | height:40px;
37 | background:#747474;
38 | color:#fff;
39 | font-size:1.2em;
40 | line-height:40px;
41 | }
42 | .day2 {
43 | width:420px;
44 | margin:20px auto 20px auto;
45 | }
46 | .day2 ul {
47 | list-style: none;
48 | border-bottom:1px dashed #ccc;
49 | height:60px;
50 | }
51 | .day2 ul:last-child {
52 | border-bottom:none;
53 | }
54 | .item-title {
55 | float:left;
56 | width:160px;
57 | font-weight:bold;
58 | font-size:1.5em;
59 | line-height:60px;
60 | }
61 | .item-date {
62 | float:left;
63 | margin-left:60px;
64 | font-size:1.2em;
65 | color:#222;
66 | text-align:right;
67 | line-height:60px;
68 | }
--------------------------------------------------------------------------------
/07/js/checklist-result.js:
--------------------------------------------------------------------------------
1 | var itemList = [];
2 |
3 | var addBtn = document.querySelector("#add");
4 | addBtn.addEventListener("click", addList); // addBtn.onclick = addList; 라고 해도 됨
5 |
6 | function addList() {
7 | var item = document.querySelector("#item").value; // 텍스트 필드 내용 가져옴
8 | if (item != null) {
9 | itemList.push(item); // itemList 배열의 끝에 item 변수 값 추가
10 | document.querySelector("#item").value = ""; // id=”item”인 요소의 값을 지움
11 | document.querySelector("#item").focus(); // 텍스트 필드에 focus( ) 메서드 적용
12 | }
13 | showList();
14 | }
15 |
16 | function showList() {
17 | var list = "
13 |
14 |
15 |
19 | 민들레
16 |어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.
17 | 18 |- "; // 목록을 시작하는
- ~ 로 묶음 20 | } 21 | list += "
- 태그 저장
18 | for (var i=0; i
12 |
47 |
48 |
--------------------------------------------------------------------------------
/09/register-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 회원 가입
13 | 46 |
12 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/09/diy-signup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 회원 가입
13 | 46 |
12 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/09/register-tmp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 회원 가입
13 | 46 |
12 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/09/diy-signup-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 회원 가입
13 | 46 |
12 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/08/showBig.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 회원 가입
13 | 46 |
12 |
50 |
51 |
--------------------------------------------------------------------------------
/08/diy-showBig.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 에디오피아 게뎁
13 |
14 |
15 |
21 |
15 |
16 |
17 | 
18 | 
19 |
20 |
17 |
18 |
19 |
22 |
32 |
33 | -
23 |
- 상품명 : 에디오피아 게뎁 24 |
- 판매가 : 9,000원 25 |
- 배송비 : 3,000원
(50,000원 이상 구매 시 무료)
26 | - 적립금 : 180원(2%) 27 |
- 로스팅 : 2019.06.17 28 | 29 |
34 |
35 |
49 | 35 |
상품 상세 정보
36 |-
37 |
- 원산지 : 에디오피아 38 |
- 지 역 : 이르가체프 코체레 39 |
- 농 장 : 게뎁 40 |
- 고 도 : 1,950 ~ 2,000 m 41 |
- 품 종 : 지역 토착종 42 |
- 가공법 : 워시드 43 |
Information
45 |2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.
46 |Flavor Note
47 |은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.
48 |
12 |
50 |
51 |
--------------------------------------------------------------------------------
/08/css/display.css:
--------------------------------------------------------------------------------
1 | #container {
2 | width:600px;
3 | margin:0 auto;
4 | }
5 | #prod-pic, #desc {
6 | float:left;
7 | }
8 | #prod-pic {
9 | margin:20px 20px auto 10px;
10 | padding:0;
11 | }
12 | #cup {
13 | box-shadow:1px 1px 2px #eee;
14 | outline:1px dashed #ccc;
15 | outline-offset: -7px;
16 | }
17 | #small-pic {
18 | margin-top:20px;
19 | list-style: none;
20 | padding:0;
21 | }
22 | #small-pic > li {
23 | float:left;
24 | margin-right:10px;
25 | }
26 | .small {
27 | width:60px;
28 | height:60px;
29 | }
30 | #small-pic img:hover {
31 | cursor:pointer;
32 | }
33 | #desc {
34 | width:300px;
35 | padding-top:20px;
36 | margin-bottom:50px;
37 | }
38 | .bluetext {
39 | color:#4343ff;
40 | font-weight:bold;
41 | }
42 | #desc button {
43 | margin-top:20px;
44 | margin-bottom:20px;
45 | width:100%;
46 | padding:10px;
47 | }
48 | #desc ul {
49 | list-style:none;
50 | }
51 | #desc li{
52 | font-size:0.9em;
53 | line-height:1.8;
54 | }
55 | #desc a {
56 | text-decoration: none;
57 | font-size:0.9em;
58 | color:blue;
59 | padding-left:40px;
60 | }
61 | hr {
62 | clear:both;
63 | border:1px dashed #f5f5f5;
64 | }
65 | #detail {
66 | padding-top:20px;
67 | }
68 | #detail li {
69 | font-size:0.9em;
70 | line-height:1.4;
71 | }
72 | h1 {
73 | font-size:2em;
74 | }
75 | h2 {
76 | font-size:1.5em;
77 | color:#bebebe;
78 | font-weight:normal;
79 | }
80 | h3 {
81 | font-size:1.1em;
82 | color:#222;
83 | }
84 | p {
85 | font-size:0.9em;
86 | line-height:1.4;
87 | text-align: justify;
88 | }
89 |
--------------------------------------------------------------------------------
/실전프로젝트/upAndDown/css/finding.css:
--------------------------------------------------------------------------------
1 | #wrapper {
2 | position:relative;
3 | width:300px;
4 | height:400px;
5 | margin:0 auto;
6 | text-align:center;
7 | border:10px solid #777;
8 | border-radius:5px;
9 | outline:2px dotted #fff;
10 | outline-offset:-6px;
11 | }
12 | h1 {
13 | margin-top:0;
14 | padding:10px;
15 | background-color:#222;
16 | color:white;
17 | }
18 | form {
19 | margin-top:40px;
20 | }
21 | input[type="text"] {
22 | width:120px;
23 | height:40px;
24 | padding:0;
25 | border:#ccc 1px solid;
26 | }
27 | .btn {
28 | width:50px;
29 | height:40px;
30 | /* border-radius:50%; */
31 | padding:10px 3px;
32 | border:#ccc 1px solid;
33 |
34 | }
35 | .btn-1 {
36 | background-color:azure;
37 | }
38 | .btn-2 {
39 | background-color: #eee;
40 | }
41 | #display {
42 | font-size:30px;
43 | margin-top:70px;
44 | }
45 | .output {
46 | font-size:20px;
47 | font-weight:bold;
48 | }
49 | #counter {
50 | position:absolute;
51 | left:0;
52 | bottom:0;
53 | width:100%;
54 | height:30px;
55 |
56 | }
57 | .footer {
58 | background-color:#222;
59 | color:white;
60 | line-height:30px;
61 | }
62 |
63 | .quest {
64 | font-family:arial;
65 | font-size:30px;
66 | color:darkorange;
67 | text-shadow:1px 1px 3px #222;
68 | padding:2px 1px;
69 | }
--------------------------------------------------------------------------------
/08/css/product.css:
--------------------------------------------------------------------------------
1 | #container {
2 | width:600px;
3 | margin:0 auto;
4 | }
5 | #prod-pic, #desc {
6 | float:left;
7 | }
8 | #prod-pic {
9 | margin:20px 20px auto 10px;
10 | padding:0;
11 | }
12 | #cup {
13 | box-shadow:1px 1px 2px #eee;
14 | outline:1px dashed #ccc;
15 | outline-offset: -7px;
16 | }
17 | #small-pic {
18 | margin-top:20px;
19 | list-style: none;
20 | padding:0;
21 | }
22 | #small-pic > li {
23 | float:left;
24 | margin-right:10px;
25 | }
26 | .small {
27 | width:60px;
28 | height:60px;
29 | }
30 | #small-pic img:hover {
31 | cursor:pointer;
32 | }
33 | #desc {
34 | width:300px;
35 | padding-top:20px;
36 | margin-bottom:50px;
37 | }
38 | .bluetext {
39 | color:#4343ff;
40 | font-weight:bold;
41 | }
42 | #desc button {
43 | margin-top:20px;
44 | margin-bottom:20px;
45 | width:100%;
46 | padding:10px;
47 | }
48 | #desc ul {
49 | list-style:none;
50 | }
51 | #desc li{
52 | font-size:0.9em;
53 | line-height:1.8;
54 | }
55 | #desc a {
56 | text-decoration: none;
57 | font-size:0.9em;
58 | color:blue;
59 | padding-left:40px;
60 | }
61 | hr {
62 | clear:both;
63 | border:1px dashed #f5f5f5;
64 | }
65 | #detail {
66 | padding-top:10px;
67 | display:none;
68 | }
69 | #detail li {
70 | font-size:0.9em;
71 | line-height:1.4;
72 | }
73 | h1 {
74 | font-size:2em;
75 | }
76 | h2 {
77 | font-size:1.5em;
78 | color:#bebebe;
79 | font-weight:normal;
80 | }
81 | h3 {
82 | font-size:1.1em;
83 | color:#222;
84 | }
85 | p {
86 | font-size:0.9em;
87 | line-height:1.4;
88 | text-align: justify;
89 | }
90 |
--------------------------------------------------------------------------------
/08/product.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 에디오피아 게뎁
13 |
14 |
15 |
21 |
15 |
16 |
17 |
18 |
19 |
20 |
17 |
18 |
19 |
22 |
32 |
33 | -
23 |
- 상품명 : 에디오피아 게뎁 24 |
- 판매가 : 9,000원 25 |
- 배송비 : 3,000원
(50,000원 이상 구매 시 무료)
26 | - 적립금 : 180원(2%) 27 |
- 로스팅 : 2019.06.17 28 | 29 |
34 |
35 |
49 | 35 |
상품 상세 정보
36 |-
37 |
- 원산지 : 에디오피아 38 |
- 지 역 : 이르가체프 코체레 39 |
- 농 장 : 게뎁 40 |
- 고 도 : 1,950 ~ 2,000 m 41 |
- 품 종 : 지역 토착종 42 |
- 가공법 : 워시드 43 |
Information
45 |2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.
46 |Flavor Note
47 |은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.
48 |
12 |
33 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/08/product-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 에디오피아 게뎁
13 |
14 |
15 |
21 |
15 |
16 |
17 |
18 |
19 |
20 |
17 |
18 |
19 |
22 |
32 | -
23 |
- 상품명 : 에디오피아 게뎁 24 |
- 판매가 : 9,000원 25 |
- 배송비 : 3,000원
(50,000원 이상 구매 시 무료)
26 | - 적립금 : 180원(2%) 27 |
- 로스팅 : 2019.06.17 28 | 29 |
33 |
34 |
48 | 상품 상세 정보
35 |-
36 |
- 원산지 : 에디오피아 37 |
- 지 역 : 이르가체프 코체레 38 |
- 농 장 : 게뎁 39 |
- 고 도 : 1,950 ~ 2,000 m 40 |
- 품 종 : 지역 토착종 41 |
- 가공법 : 워시드 42 |
Information
44 |2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.
45 |Flavor Note
46 |은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.
47 |
12 |
33 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/08/showBig-result.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 에디오피아 게뎁
13 |
14 |
15 |
21 |
15 |
16 |
17 |
18 |
19 |
20 |
17 |
18 |
19 |
22 |
32 | -
23 |
- 상품명 : 에디오피아 게뎁 24 |
- 판매가 : 9,000원 25 |
- 배송비 : 3,000원
(50,000원 이상 구매 시 무료)
26 | - 적립금 : 180원(2%) 27 |
- 로스팅 : 2019.06.17 28 | 29 |
33 |
34 |
35 |
49 | 상품 상세 정보
36 |-
37 |
- 원산지 : 에디오피아 38 |
- 지 역 : 이르가체프 코체레 39 |
- 농 장 : 게뎁 40 |
- 고 도 : 1,950 ~ 2,000 m 41 |
- 품 종 : 지역 토착종 42 |
- 가공법 : 워시드 43 |
Information
45 |2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.
46 |Flavor Note
47 |은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.
48 |
12 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
에디오피아 게뎁
13 |
14 |
15 |
21 |
15 |
16 |
17 |
18 |
19 |
20 |
17 |
18 |
19 |
22 |
32 |
33 | -
23 |
- 상품명 : 에디오피아 게뎁 24 |
- 판매가 : 9,000원 25 |
- 배송비 : 3,000원
(50,000원 이상 구매 시 무료)
26 | - 적립금 : 180원(2%) 27 |
- 로스팅 : 2019.06.17 28 | 29 |
34 |
35 |
49 | 35 |
상품 상세 정보
36 |-
37 |
- 원산지 : 에디오피아 38 |
- 지 역 : 이르가체프 코체레 39 |
- 농 장 : 게뎁 40 |
- 고 도 : 1,950 ~ 2,000 m 41 |
- 품 종 : 지역 토착종 42 |
- 가공법 : 워시드 43 |
Information
45 |2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.
46 |Flavor Note
47 |은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.
48 |