diff --git a/jihongeek/forNomadLecture/20240730.md b/jihongeek/forNomadLecture/20240730.md
new file mode 100644
index 0000000..f7d92fa
--- /dev/null
+++ b/jihongeek/forNomadLecture/20240730.md
@@ -0,0 +1,23 @@
+# 20240730
+HTML Document 객체를 통해 자바스크립트에서 Html 객체를 다룰 수 있다.
+웹브라우저가 html을 보여주는 객체로 만들어 주어서 javascript로 조작가능
+class와 id등의 정보로 document아래에 있는 html object를 가져온다음 자바스크립트로 하위 속성을 가져오고 설정할 수 있다
+# document 객체에서 html element 불러오기
+```javascript
+document.getElementById("id 문자열") // id 값으로 Element 가져오기
+document.getElementsByClassName("class 문자열") // class 값으로 Element 배열 가져오기
+document.getElementsByTagName("태그 이름 문자열") // // class 값으로 Element 배열 가져오기
+```
+
+
+## 만능 querySelector
+```javascript
+document.querySelector("CSS 선택자 표기법 문자열") // CSS 선택자로 Element 가져오기. 단, 여러개일 경우 첫번째만!
+document.querySelectorAll("CSS 선택자 표기법 문자열") // CSS 선택자로 Element 배열 가져오기
+```
+
+
+addEventListener와 함수로 이벤트 처리 => 그냥 객체에 함수를 바로 넣어버리면 안되는 것일까? 가능하지만 동작 방식이 약간 다르다.
+
+객체에 바로 할당 : 여러 번 수행했을 때 마지막 함수로 한다.(덮어쓰기)
+addEventListener와 함수로 이벤트 처리 : 이벤트에 대한 함수를 누적한다(여러 함수다 실행된다)
\ No newline at end of file
diff --git a/jihongeek/forNomadLecture/app.js b/jihongeek/forNomadLecture/app.js
new file mode 100644
index 0000000..5728030
--- /dev/null
+++ b/jihongeek/forNomadLecture/app.js
@@ -0,0 +1,12 @@
+const header = document.querySelector("h1");
+
+function headerClickHandler() {
+ console.log("🍅");
+}
+header.onclick = headerClickHandler;
+header.onclick = ()=>{
+ console.log("Tomato");
+}
+header.addEventListener("click",()=>{
+ console.log("Tomato");
+});
\ No newline at end of file
diff --git a/jihongeek/forNomadLecture/index.html b/jihongeek/forNomadLecture/index.html
new file mode 100644
index 0000000..72958d6
--- /dev/null
+++ b/jihongeek/forNomadLecture/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Document
+
+
+ 🍅
+
+
+
\ No newline at end of file