클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

오늘의 새벽 공부 마지막이니 좀 더 힘을 내서 집중해 보자.    실습 4 - 노드 값 접근(이름)     문제 풀기 노드들의 이름이 잘 출력되었다.   개발자 모드에 들어가면 해당 노드들의 자세한 내용이 모두 출력된다.       실습 5 - 노드의 값 접근 (값)       문제 풀기  apple이 apple_pie로 변경되었다.       실습 6 - 노드의 값 접근 (타입)      문제 풀기  마지막에 출력된 문장이 타입이고 그전의 내용은 value이다. 출력이 잘 되었다.       학습을 마치고노드에 접근하여 값과 타입, 속성 등을 가져오는 방법을 학습했다. 솔직히 뒷부분으로 갈수록 공부하기 싫은 마음이 많았지만 그래도 내가 해야겠다고 마음먹은 곳까지 목표를 달성할 수 있어서 좋았다. 이제 ..

이번에는 노드 객체에 대해서 공부해보겠다. 우선 이론 학습부터 진행해볼 것이다.    이론 3 - Node 객체             태그 안에 포함되는 것이 텍스트 노드이다.         퀴즈 3 - 노드와 노드 트리    문제를 잘 풀었다.     퀴즈 4 - 노드의 종류     이번 문제는 틀렸다. 다시 한번 풀어보겠다.    조금 어려운 문제였는데 속성 노드와 요소 노드가 비슷해서 좀 헤깔렸다. 차이점을 설명해주라고 하니 이렇게 이야기해주었다.    이 문제에서는 HTML 문서의 모든 요소를 나타내므로 요소 노드가 답이 된다.   학습을 마치고노드에 대한 개념과 퀴즈 문제를 풀어보았다. 이제 실습 문제만 풀면 엘리스에서 DOM에 대한 내용은 거의 대부분 마치게 된다. 이어서 실습 문제까지 풀고 ..

이제 실습 문제를 풀어보겠다. 3문제나 되지만 문제를 풀면서 개념을 익혀볼 것이다.    실습 1 - DOM 요소의 선택  HTML 문서   JS 파일  getElements라고 복수 형태로 되어 있는 경우에 문서 형태가 배열로 되어 있다. id의 경우 한 개이므로 배열이 하닌 객체로 온다.   문제 풀기    출력이 잘 되었다.     실습 2 - DOM 요소의 스타일 변경      주석을 해제하지 않았을 때는 모든 글씨가 검은색이다.   문제 풀기   이전 예제와 다른 점은 DOM 객체를 변수에 담아주어서 이것을 불러와서 스타일을 변경했다는 점이다.    실습 3 - DOM 요소의 내용 변경    초기 상태는 이렇게 출력된다.   문제 풀기  이번에는 apple이 strawberry로, onion이 ..