diff --git "a/10\353\262\210/10.html" "b/10\353\262\210/10.html" index e69de29..cf297cc 100644 --- "a/10\353\262\210/10.html" +++ "b/10\353\262\210/10.html" @@ -0,0 +1,29 @@ + + + + + + + + Document + + + + + + + diff --git "a/10\353\262\210/10.js" "b/10\353\262\210/10.js" index e69de29..35b8d9f 100644 --- "a/10\353\262\210/10.js" +++ "b/10\353\262\210/10.js" @@ -0,0 +1,11 @@ +// document.querySelector(".times").addEventListener("click", function () { +// let inputElement = document.querySelector("#userPick"); +// let result = inputElement * 2; +// alert(result); +// }); + +document.querySelector(".btn").addEventListener("click", function () { + let textContents = prompt("숫자를 입력하세요.", ""); + let result = textContents * 2; + alert(result); +}); diff --git "a/11\353\262\210/11.html" "b/11\353\262\210/11.html" index e69de29..aeb6fd7 100644 --- "a/11\353\262\210/11.html" +++ "b/11\353\262\210/11.html" @@ -0,0 +1,13 @@ + + + + + + Document + + +
시간에 따른 인사말을 콘솔에서 확인바랍니다.
+ + + + diff --git "a/11\353\262\210/11.js" "b/11\353\262\210/11.js" index e69de29..0f24f1e 100644 --- "a/11\353\262\210/11.js" +++ "b/11\353\262\210/11.js" @@ -0,0 +1,11 @@ +const currentTime = new Date(); + +const currentHour = currentTime.getHours(); + +if (currentHour < 10) { + console.log("Good morning"); +} else if (currentHour >= 10 && currentHour < 18) { + console.log("Good afternoon"); +} else { + console.log("Good evening"); +} diff --git "a/1\353\262\210/1.md" "b/1\353\262\210/1.md" index ff25705..835f821 100644 --- "a/1\353\262\210/1.md" +++ "b/1\353\262\210/1.md" @@ -5,3 +5,15 @@ - inline (인라인) 태그와 block (블록) 태그의 차이점을 찾아오시면 됩니다. (여기에 작성) + +-div +박스 형태로 영역 설정 +가로 폭을 전부 차지하고 폭과 넓이를 지정할 수 있다. +줄바꿈을 자동으로 한다. + +-span +줄 단위로 영역이 설정 +태그 안의 내용만큼만 차지하고 폭과 넓이를 지정할 수 없다. +줄바꿈이 없고 문장 중간에 들어갈 수 있다. + +span은 한 라인에 여러 요소를 표현하기 위해 사용하고, div와 span은 table 태그 대신에 구조를 만들 때 사용할 수 있다. diff --git "a/2\353\262\210/2.css" "b/2\353\262\210/2.css" index e69de29..8e51d3b 100644 --- "a/2\353\262\210/2.css" +++ "b/2\353\262\210/2.css" @@ -0,0 +1,12 @@ +.box { + border: 1px solid red; + width: 100px; + height: 100px; + box-sizing: border-box; + float: left; +} + +.bigBox { + width: 90%; + margin: 0px 0px; +} diff --git "a/2\353\262\210/2.html" "b/2\353\262\210/2.html" index e69de29..32644ee 100644 --- "a/2\353\262\210/2.html" +++ "b/2\353\262\210/2.html" @@ -0,0 +1,16 @@ + + + + + + 과제 2번 + + + +
+
+
+
+
+ + diff --git "a/3\353\262\210/3.css" "b/3\353\262\210/3.css" index e69de29..807a1ce 100644 --- "a/3\353\262\210/3.css" +++ "b/3\353\262\210/3.css" @@ -0,0 +1,15 @@ +.box { + border: 1px solid red; + width: 100px; + height: 100px; + box-sizing: border-box; + float: left; + padding: 50px; +} + +.bigBox { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} diff --git "a/3\353\262\210/3.html" "b/3\353\262\210/3.html" index e69de29..813d13f 100644 --- "a/3\353\262\210/3.html" +++ "b/3\353\262\210/3.html" @@ -0,0 +1,16 @@ + + + + + + 과제 2번 + + + +
+
+
+
+
+ + diff --git "a/4\353\262\210/4.js" "b/4\353\262\210/4.js" index e69de29..624c93e 100644 --- "a/4\353\262\210/4.js" +++ "b/4\353\262\210/4.js" @@ -0,0 +1 @@ +document.querySelector(".btn"); diff --git "a/5\353\262\210/5.js" "b/5\353\262\210/5.js" index e69de29..6c38e7c 100644 --- "a/5\353\262\210/5.js" +++ "b/5\353\262\210/5.js" @@ -0,0 +1 @@ +document.querySelector("#heading"); diff --git "a/6\353\262\210/6.html" "b/6\353\262\210/6.html" index e69de29..b324bf8 100644 --- "a/6\353\262\210/6.html" +++ "b/6\353\262\210/6.html" @@ -0,0 +1,12 @@ + + + + + + Document + + +

+ + + diff --git "a/6\353\262\210/6.js" "b/6\353\262\210/6.js" index e69de29..c6650dd 100644 --- "a/6\353\262\210/6.js" +++ "b/6\353\262\210/6.js" @@ -0,0 +1 @@ +document.querySelector("#heading").innerHTML = "제목입니다."; diff --git "a/7\353\262\210/7.html" "b/7\353\262\210/7.html" index 4ea6e4c..6e0b741 100644 --- "a/7\353\262\210/7.html" +++ "b/7\353\262\210/7.html" @@ -1,2 +1,16 @@ - \ No newline at end of file + + + + + + Document + + + + + + diff --git "a/7\353\262\210/7.js" "b/7\353\262\210/7.js" index e69de29..9c84bc6 100644 --- "a/7\353\262\210/7.js" +++ "b/7\353\262\210/7.js" @@ -0,0 +1 @@ +document.querySelector("img").setAttribute("alt", "개발자"); diff --git "a/8\353\262\210/8.html" "b/8\353\262\210/8.html" index 2f0f9b5..3490a5c 100644 --- "a/8\353\262\210/8.html" +++ "b/8\353\262\210/8.html" @@ -1 +1,13 @@ - \ No newline at end of file + + + + + + Document + + + + + + + diff --git "a/8\353\262\210/8.js" "b/8\353\262\210/8.js" index e69de29..1c0f72a 100644 --- "a/8\353\262\210/8.js" +++ "b/8\353\262\210/8.js" @@ -0,0 +1,4 @@ +document.querySelector(".btn").addEventListener("click", function () { + let textContents = prompt("아무거나 입력하세요.", ""); + alert(textContents); +}); diff --git "a/9\353\262\210/9.html" "b/9\353\262\210/9.html" index e69de29..4af07c9 100644 --- "a/9\353\262\210/9.html" +++ "b/9\353\262\210/9.html" @@ -0,0 +1,13 @@ + + + + + + 콘솔 창 띄우기 + + +

콘솔 창 확인

+ + + + diff --git "a/9\353\262\210/9.js" "b/9\353\262\210/9.js" index e69de29..ab1152e 100644 --- "a/9\353\262\210/9.js" +++ "b/9\353\262\210/9.js" @@ -0,0 +1 @@ +console.log("안녕하세요.");