diff --git a/30_html_Base.html b/30_html_Base.html index 34dd7d4..d6ca6cd 100644 --- a/30_html_Base.html +++ b/30_html_Base.html @@ -104,19 +104,30 @@

Welcome to My site~ I just Learn everythin - - +
-

β—ΌοΈŽ WEB 의 역사

+ + + + +

ν…ŒμŠ€νŠΈ 제λͺ© 1

+

ν…ŒμŠ€νŠΈ 제λͺ© 2

- ● 1960λ…„λŒ€
인터넷은 1960λ…„λŒ€μ— λ―Έκ΅­ κ΅­λ°©λΆ€ μ‚°ν•˜μ˜ κ³ λ“± μ—°κ΅¬κ΅­μ—μ„œ ꡰ사적인 λͺ©μ μœΌλ‘œ 처음 κ°œλ°œλ˜μ—ˆμŠ΅λ‹ˆλ‹€. + ● 1960λ…„λŒ€ +
인터넷은 1960λ…„λŒ€μ— λ―Έκ΅­ κ΅­λ°©λΆ€ μ‚°ν•˜μ˜ κ³ λ“± μ—°κ΅¬κ΅­μ—μ„œ ꡰ사적인 λͺ©μ μœΌλ‘œ 처음 κ°œλ°œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.

- ● 1989λ…„
웹은 1989λ…„ 3월에 μŠ€μœ„μŠ€μ™€ ν”„λž‘μŠ€ 사이에 μœ„μΉ˜ν•œ 유럽 μž…μž 물리 μ—°κ΅¬μ†Œ (CERN)의 μ»΄ν“¨ν„°κ³Όν•™μž νŒ€ λ²„λ„ˆμŠ€-리 (Tim Berners-Lee, 영ꡭ μ˜₯μŠ€νΌλ“œλŒ€ν•™ ꡐ수)κ°€ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€123. 웹은 μ„Έκ³„μ˜ μ—¬λŸ¬ λŒ€ν•™κ³Ό μ—°κ΅¬κΈ°κ΄€μ—μ„œ μΌν•˜λŠ” λ¬Όλ¦¬ν•™μžλ“€ μƒν˜Έκ°„μ˜ μ‹ μ†ν•œ μ •λ³΄κ΅ν™˜κ³Ό 곡동연ꡬλ₯Ό μœ„ν•œ ν”„λ‘œκ·Έλž¨μœΌλ‘œ κ³ μ•ˆλ˜μ—ˆμŠ΅λ‹ˆλ‹€. + ● 1989λ…„ +
웹은 1989λ…„ 3월에 μŠ€μœ„μŠ€μ™€ ν”„λž‘μŠ€ 사이에 μœ„μΉ˜ν•œ 유럽 μž…μž 물리 μ—°κ΅¬μ†Œ (CERN)의 μ»΄ν“¨ν„°κ³Όν•™μž νŒ€ λ²„λ„ˆμŠ€-리 (Tim Berners-Lee, 영ꡭ μ˜₯μŠ€νΌλ“œλŒ€ν•™ ꡐ수)κ°€ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€123. 웹은 μ„Έκ³„μ˜ μ—¬λŸ¬ λŒ€ν•™κ³Ό μ—°κ΅¬κΈ°κ΄€μ—μ„œ μΌν•˜λŠ” λ¬Όλ¦¬ν•™μžλ“€ μƒν˜Έκ°„μ˜ μ‹ μ†ν•œ μ •λ³΄κ΅ν™˜κ³Ό 곡동연ꡬλ₯Ό μœ„ν•œ ν”„λ‘œκ·Έλž¨μœΌλ‘œ κ³ μ•ˆλ˜μ—ˆμŠ΅λ‹ˆλ‹€.

- ● 1990λ…„λŒ€
μš°λ¦¬κ°€ ν”νžˆ "인터넷"이라고 ν•˜λ©΄ λ– μ˜¬λ¦¬λŠ” 각쒅 μ›Ήμ‚¬μ΄νŠΈ λ“±μ˜ μ‹œμ΄ˆλŠ” λ°”λ‘œ 1990λ…„λŒ€ νŒ€ λ²„λ„ˆμŠ€ 리가 κ°œλ°œν•œ μ›”λ“œ μ™€μ΄λ“œ μ›Ή (World Wide Web)μž…λ‹ˆλ‹€. + ● 1990λ…„λŒ€ +
μš°λ¦¬κ°€ ν”νžˆ "인터넷"이라고 ν•˜λ©΄ λ– μ˜¬λ¦¬λŠ” 각쒅 μ›Ήμ‚¬μ΄νŠΈ λ“±μ˜ μ‹œμ΄ˆλŠ” λ°”λ‘œ 1990λ…„λŒ€ νŒ€ λ²„λ„ˆμŠ€ 리가 κ°œλ°œν•œ μ›”λ“œ μ™€μ΄λ“œ μ›Ή (World Wide Web)μž…λ‹ˆλ‹€.

- ● μ›Ή μ‹œμŠ€ν…œ μ•„ν‚€ν…μ²˜μ˜ λ°œμ „
μ›Ή μ‹œμŠ€ν…œ μ•„ν‚€ν…μ²˜λŠ” μ‹œκ°„μ΄ 지남에 따라 λ°œμ „ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ΄ˆκΈ°μ—λŠ” 정적 μ›Ήμ΄μ—ˆμœΌλ‚˜, μ‚¬μš©μž μƒν˜Έμž‘μš©μ΄ 증가함에 따라 동적 μ›ΉμœΌλ‘œ λ°œμ „ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ΄ν›„μ—λŠ” SPA (Single Page Application)κ°€ λ“±μž₯ν•˜μ˜€κ³ , 이λ₯Ό 톡해 ν”„λ‘ νŠΈμ—”λ“œμ™€ λ°±μ—”λ“œκ°€ κ΅¬λ³„λ˜κΈ° μ‹œμž‘ν•˜μ˜€μŠ΅λ‹ˆλ‹€. + ● μ›Ή μ‹œμŠ€ν…œ μ•„ν‚€ν…μ²˜μ˜ λ°œμ „ +
μ›Ή μ‹œμŠ€ν…œ μ•„ν‚€ν…μ²˜λŠ” μ‹œκ°„μ΄ 지남에 따라 λ°œμ „ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ΄ˆκΈ°μ—λŠ” 정적 μ›Ήμ΄μ—ˆμœΌλ‚˜, μ‚¬μš©μž μƒν˜Έμž‘μš©μ΄ 증가함에 따라 동적 μ›ΉμœΌλ‘œ λ°œμ „ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ΄ν›„μ—λŠ” SPA (Single Page Application)κ°€ λ“±μž₯ν•˜μ˜€κ³ , 이λ₯Ό 톡해 ν”„λ‘ νŠΈμ—”λ“œμ™€ λ°±μ—”λ“œκ°€ κ΅¬λ³„λ˜κΈ° μ‹œμž‘ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

+ + +
diff --git a/511_[JS]word-relay.html b/511_[JS]word-relay.html index 505d81e..cfc8a7b 100644 --- a/511_[JS]word-relay.html +++ b/511_[JS]word-relay.html @@ -15,13 +15,13 @@ - -
β—ΌοΈŽ HOME 으둜 λŒμ•„κ°€κΈ°
-
1번째 μ°Έκ°€μž
-
μ œμ‹œμ–΄:
- - - +
+
β—ΌοΈŽ HOME 으둜 λŒμ•„κ°€κΈ°
+
1번째 μ°Έκ°€μž
+
μ œμ‹œμ–΄:
+ + +
@@ -34,7 +34,6 @@ const $order = document.querySelector('#order'); - const $input = document.querySelector('input'); const $button = document.querySelector('button'); const $word = document.querySelector('#word'); diff --git a/512_[JS]koogkoogtta.css b/512_[JS]koogkoogtta.css new file mode 100644 index 0000000..3763179 --- /dev/null +++ b/512_[JS]koogkoogtta.css @@ -0,0 +1,22 @@ + + + +/* .howManyPeople { + +} */ + +/* .whoIsTurn { + +} */ + + +.forMargin { + margin-left: 20px; +} + +/* .presentWord*/ + + +.inputOkButton { + margin-left: 5px; +} \ No newline at end of file diff --git a/512_[JS]koogkoogtta.html b/512_[JS]koogkoogtta.html index 49687bd..5d6b690 100644 --- a/512_[JS]koogkoogtta.html +++ b/512_[JS]koogkoogtta.html @@ -7,30 +7,7 @@ μΏ΅μΏ΅λ”° κ²Œμž„ - - + @@ -126,16 +103,20 @@

Welcome to My site~ I just Learn everythin
1번째 μ°Έκ°€μž μ°¨λ‘€μž…λ‹ˆλ‹€.

-
λ§ˆμ§€λ§‰ μž…λ ₯ 단어:
+
+ λ§ˆμ§€λ§‰ μž…λ ₯ 단어: + +

- + +
* ν•œκΈ€ 3κΈ€μžλ§Œ μž…λ ₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

- - + +
diff --git a/512_[JS]koogkoogtta.js b/512_[JS]koogkoogtta.js index 3a67a2c..5202e94 100644 --- a/512_[JS]koogkoogtta.js +++ b/512_[JS]koogkoogtta.js @@ -1,27 +1,33 @@ - - +// πŸ“• koogkoogtta.js let howManyPeople = document.querySelector('.howManyPeople'); + let whoIsTurn = document.querySelector('.whoIsTurn'); + let presentWord = document.querySelector('.presentWord'); + +let userInput = document.querySelector('#userInput'); + +let confirmWord; //πŸ†˜ μ°Έ 이 2개λ₯Ό μ‚¬μš©ν•΄μ„œ ν•œλ‹€λŠ”κ²Œ.. μƒμ‹μ μœΌλ‘œ 생각할 수 μ—†λŠ” 뢀뢄이닀. +let typingWord; //πŸ†˜ μ°Έ 이 2개λ₯Ό μ‚¬μš©ν•΄μ„œ ν•œλ‹€λŠ”κ²Œ.. μƒμ‹μ μœΌλ‘œ 생각할 수 μ—†λŠ” 뢀뢄이닀. + let inputOkBtn = document.querySelector('.inputOkBtn'); let reStartBtn = document.querySelector('.reStartBtn'); -let editPeopleBtn = document.querySelector('.editPeopleBtn'); +let allReSetBtn = document.querySelector('.allReSetBtn'); + // 🟩 prompt에 숫자만 μž…λ ₯ν•˜κ²Œ ν•˜λŠ” 방법은?? -// const possOnlyNumber = (n) => { -// } // πŸ†˜ λ­”κ°€ function으둜 λ§Œλ“€μ–΄λ³΄λ €λ‹€κ°€... κ·Έλƒ₯ forλ¬Έ μž”λ¨Έλ¦¬λ₯Ό κ΅΄λ €μ„œ ν•΄λ΄€μŠ΅λ‹ˆλ‹€. λŒ€λ‹¨ν•˜λ‹€... const numInputPromFc = () => { for(let i = 0; i<=100; i++) { const inputPromptText = window.prompt("μ°Έμ—¬ν•  인원은 λͺ‡ λͺ…μž…λ‹ˆκΉŒ? (1~10의 숫자만 μž…λ ₯ν•΄μ£Όμ„Έμš”)"); const inputPrompt = Number(inputPromptText); console.log(inputPrompt); - if(inputPromptText !== null){ //πŸ”΄λŒ€λ‹¨ν•˜λ‹€... 근데 μ™œ prompt μ·¨μ†Œλ²„νŠΌμ„ λ³„λ„λ‘œ κ΅¬λΆ„ν•˜λŠ”κ²Œ μ—†μ„κΉŒ... γ… γ…  + if(inputPromptText !== null){ //πŸ”΄λŒ€λ‹¨ν•˜λ‹€... 근데 μ™œ prompt μ·¨μ†Œλ²„νŠΌμ„ λ³„λ„λ‘œ κ΅¬λΆ„ν•˜λŠ”κ²Œ μ—†μ„κΉŒ... γ… γ…  if(Number.isNaN(inputPrompt) || inputPrompt == "" || inputPrompt === 0 || inputPrompt > 10) { console.log("γ„΄ μˆ«μžκ°€ μ•„λ‹ˆκ±°λ‚˜, 10보닀 높은 숫자λ₯Ό μž…λ ₯λ˜μ—ˆμŠ΅λ‹ˆλ‹€."); alert("숫자λ₯Ό μž…λ ₯ν•˜μ§€ μ•Šμ•˜κ±°λ‚˜, 10보닀 높은 숫자λ₯Ό μž…λ ₯ν–ˆμŠ΅λ‹ˆλ‹€. λ‹€μ‹œ μž…λ ₯ν•΄μ£Όμ„Έμš”."); @@ -37,7 +43,105 @@ const numInputPromFc = () => { } } -numInputPromFc(); + + +const inputThreeTextFc = (event) => { + // πŸ†˜ 이 eventκ°€ 제일 μ΄ν•΄μ•ˆλ˜κ³  μ–΄λ €μš΄ 것 κ°™μŠ΅λ‹ˆλ‹€... + // μ›λž˜λŠ” 이벀트 ν–‰λ“€λŸ¬ ν•¨μˆ˜λŠ” μžλ™μœΌλ‘œ 이벀트 객체λ₯Ό λ§€κ°œλ³€μˆ˜λ‘œ λ°›κΈ°λŠ” ν•˜λŠ”λ°. + // λŒ€μΆ©μ€ 뭐 ν•¨μˆ˜κ°€ eventλ₯Ό λ°›μ•„μ„œ κ·Έ event의 target의 valueλ₯Ό κ°€μ Έμ™€μ„œ κ·Έκ±Έ typingWord에 λ„£λŠ”λ‹€λŠ” 것 같은데 + typingWord = event.target.value; + + + // πŸ†˜ input에 3κΈ€μž 이상 μž…λ ₯ν•˜μ§€ λͺ»ν•˜κ²Œ ν•˜λŠ” 방법은??? (πŸ†˜copliot의 νž˜μ„ 빌림) + // πŸ†˜ [μ‘μš©] ν•œκΈ€λ§Œ μž…λ ₯될 수 있게 ν•˜λŠ” 방법 + if (userInput.value.length > 3) { + userInput.value = userInput.value.slice(0, 3); + } + +} + + + +const nextTurnFc = () => { + confirmWord = typingWord.slice(0, 3); + presentWord.textContent = confirmWord.slice(0, 3); + console.log("\""+presentWord.textContent+"\"κ°€ μ •μƒμ μœΌλ‘œ μž…λ ₯λ˜μ—ˆμŠ΅λ‹ˆλ‹€."); + userInput.value = ""; + userInput.focus(); + if (Number(whoIsTurn.textContent) < Number(howManyPeople.textContent)) { + whoIsTurn.textContent = Number(whoIsTurn.textContent) + 1; + } else { + whoIsTurn.textContent = 1; + } + +} + + + +const reSetFc = () => { + let sadPerson = whoIsTurn.textContent; + alert("이 μ „ μ œμ‹œλœ λ‹¨μ–΄μ˜ λμžλ¦¬μ™€ λ§žμ§€ μ•Šμ•„ κ²Œμž„μ΄ μ’…λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.\nλ²ŒμΉ™μ„ μˆ˜ν–‰ν•  μ‚¬λžŒμ€ "+sadPerson+"번째 μ°Έκ°€μž μž…λ‹ˆλ‹€."); + confirmWord = ""; + whoIsTurn.textContent = "1"; + presentWord.textContent = ""; + userInput.value = ""; + userInput.focus(); + // πŸ”₯ κ²Œμž„μ„ 더 이상 진행할 수 μ—†μ–΄μ•Ό ν•©λ‹ˆλ‹€!!! +} + + +const reStartFc = () => { + confirmWord = ""; + whoIsTurn.textContent = "1"; + presentWord.textContent = ""; + userInput.value = ""; + userInput.focus(); +} + + +const allReSetFc = () => { + howManyPeople.textContent = ""; + confirmWord = ""; + whoIsTurn.textContent = "1"; + presentWord.textContent = ""; + userInput.value = ""; + userInput.focus(); + // πŸ”₯ μƒˆλ‘œκ³ μΉ¨μ„ μ€˜λ²„λ €μ•Όκ² λ‹€. + location.reload(); +} + + +const inputOkBtnFc = () => { + + console.log(confirmWord); + + if (!confirmWord || confirmWord[confirmWord.length - 1] === typingWord[0]) { + nextTurnFc(); + } else { + reSetFc(); + } + +} + + +numInputPromFc(); // 이건 μ–Έμ œλ‚˜ κ·Έλƒ₯ μ‹€ν–‰λ˜λ©΄ λ˜μ§€λ§Œ, + +userInput.addEventListener('input', inputThreeTextFc); // 이건 input에 μž‘μ„±λ˜λŠ” μ΄λ²€νŠΈκ°€ μžˆμ„ λ•Œ μ‹€ν–‰λ˜λŠ”κ±°μ•Ό. + +// πŸ†˜ enterν‚€λ₯Ό ν†΅ν•œ μž…λ ₯을 κ°€λŠ₯ν•˜κ²Œ ν•˜λŠ” μ½”λ“œμž…λ‹ˆλ‹€. +// (πŸ†˜copliot의 νž˜μ„ 빌림) 근데 이거 ν‹€λ ΈμŒ... 무쑰건 enterμ³λ²„λ¦¬λ‹ˆκΉŒ μ•ˆλ˜λ„€ +// userInput.addEventListener('keyup', (e) => { +// if(e.keyCode === 13) { +// inputOkBtn.click(); +// } +// } +// ); + +inputOkBtn.addEventListener('click', inputOkBtnFc); // 이건 λ²„νŠΌν΄λ¦­ μ΄λ²€νŠΈκ°€ μžˆμ„ λ•Œ μ‹€ν–‰λ˜λŠ”κ±°μ•Ό. + +reStartBtn.addEventListener('click', reStartFc); // 이건 λ²„νŠΌν΄λ¦­ μ΄λ²€νŠΈκ°€ μžˆμ„ λ•Œ μ‹€ν–‰λ˜λŠ”κ±°μ•Ό. + +allReSetBtn.addEventListener('click', allReSetFc); // 이건 λ²„νŠΌν΄λ¦­ μ΄λ²€νŠΈκ°€ μžˆμ„ λ•Œ μ‹€ν–‰λ˜λŠ”κ±°μ•Ό.