영어강사 개발일기

DOCTYPE html>html lang="ko">head> meta charset="UTF-8" /> title>요소 생성 / 추가 / 삭제title>head>body> h2>오늘의 할 일h2> ul id="todo-list"> li>HTML 복습하기li> ul> button id="add-end">끝에 항목 추가button> button id="add-start">앞에 항목 추가button> script> const todoList = document.getElementById("todo-list"); const addEndBtn = document.getElementById("add-end"); const addStartBtn = document.getElemen..

6.0 요소 란?시작하기 앞서 요소에 대해서 다시 알아보도록 하자 6.0.1 요소(Element)의 뜻HTML에서 요소는 웹페이지를 구성하는 하나하나의 조각을 뜻함p>안녕하세요!p> : p태그 : 단락(paragraph)을 나타내는 요소안녕하세요 : 요소의 내용(content)위의 예제 전체가 하나의 HTML 요소6.0.2 요소의 구조HTML 요소는 대부분 시작태그()+ 내용 + 끝 태그()로 구성 tagname> 내용 tagname> h1>제목 입니다. h1> h1> : h1 시작 태그제목 입니다. : 요소 내용h1> : h1 끝 태그💡 비유로 이해해 보면…HTML 요소는 레고 블록 같다. 여러 개의 요소(블록)를 쌓아서 웹페이지(건물)를 지을 수 있다.자바스크립트를 배우면 이..

5.1 부모 노드에 접근하기 section id="section"> article> h2 id="title">제목h2> article> section> script> const title = document.getElementById("title"); console.log(title.parentElement); // 👉 ... console.log(title.parentElement.parentElement); // 👉 ... script>article>...article>section id="section">...section> div class="wrapper"> span i..

중요 복습!!📌 DOM이란?HTML 문서는 브라우저 안에서 DOM(Document Object Model) 이라는 구조로 변환DOM은 HTML을 트리(tree) 구조로 바꿔서, 자바스크립트로 요소를 제어할 수 있게 해주는 시스템 Hello div └── p └── "Hello" 5.0 엄마? 아빠? 엄빠? 형제? DOM 트리는 HTML 문서를 구조화한 트리형태의 데이터 노드를 기준으로 구성되며, 각 노드들은 부모, 자식, 형제 관계를 가짐 🔍 DOM 탐색이란?자바 스크립트로 특정 요소를 기준으로 부모, 자식, 형제 노드에 접근하는 것 ❓왜 필요 할까?버튼을 클릭하면 그 부모 요소를 삭제특정 항목 옆에 새로운 항목을 주가첫 번째/ 마지막 자식을 선택하여 스타일을 준다.이러한 기..

🧪 예제 1. .style로 배경색 바꾸기div id="box1" style="width: 100px; height: 100px; background-color: gray;">div>button onclick="changeColor()">색 바꾸기button>script> function changeColor() { const box = document.getElementById("box1"); box.style.backgroundColor = "tomato"; }script> ✅ 설명 버튼 클릭시 박스의 배경색이 gray에서 tomato 로 변경box.style.backgroundColor를 사용하여 직접 인라인 스타일을 수정 🧪 예제 2. .style로 여러 스타일 적용하기p id=..

4.0 스타일 변경하기웹페이지를 다루다 보면, 사용자의 클릭, 마우스 오버 같은 이벤트에 따라 요소의 디자인을 바꾸고 싶어질때가 있다. 이때 자바 스크립트를 이용하면 HTML 요소의 스타일을 자유롭게 변경이 가능하다 이번 포스팅에선 이 두가지의 방식을 알아보도록 하자 4.1 .style 속성 - 개별 스타일을 직접 바꾸기자바스크립트에서 DOM 요소에 직접 스타일을 적용시 .style 속성을 사용인라인 스타일을 수정하는 방법으로 HTML 태그의 style 속성에 작접 작성하는 것과 같음 📌 문법element.style.스타일속성명 = "값"; ✅ 예시div id="myBox">변경될 박스div>script> const box = document.getElementById("myBox"); box.st..

3.1 내용 변경하기 예제 📝 설명 : textContent, innerText, innerHTML을 사용 하는 예제 div id="textBox">기존 텍스트입니다.div>button onclick="changeText()">텍스트 변경button>script> function changeText() { const box = document.getElementById("textBox"); box.textContent = "변경된 텍스트입니다!"; }script> 3.2 요소 속성 조작 예제 📝 설명: 이미지의 src 속성을 변경하는 예제img id="myImage" src="default.jpg" width="200" />button onclick="changeImage()">이미지 ..

3.0 요소 조작하기 DOM 요소를 자바스크립트로 다루는 핵심:요소를 "선택"하고, 내용을 변경하거나, 구조를 바꾸고, 스타일을 조작이 파트에서는 DOM 요소를 조작하는 주요 방법들을 분류별 알아보자3.1 텍스트 및 HTML 내용 조작하기HTML 요소 내부의 텍스트 또는 HTML구조를 읽거나 수정이 가능속성설명textContent요소 안의 모든 텍스트를 가져오거나 설정HTML 태그를 그대로 문자열로 취급(숨겨진 텍스트도 포함)innerText요소 안의 표시되는 텍스트만 호출Css에 따라 숨겨진 텍스트는 제외 브라우저가 렌더링한 내용을 기반으로 동작innerHTML요소 안의 HTML 코드 전체를 가져오거나 설정HTML 태그까지 포함하여 조작위험 XSS 취약 가능성이 있음 🔍 실제 사용 예시 상황 사용..

2-1.1 기본 선택 메서드🔸 getElementById설명: ID 속성값으로 하나의 요소를 선택document.getElementById("title");🔸 getElementsByClassName설명: 지정된 클래스명을 가진 모든 요소를 선택document.getElementsByClassName("item");🔸 getElementsByTagName설명: 지정된 태그명을 가진 모든 요소를 선택document.getElementsByTagName("li");🔸 querySelector설명: 지정된 태그명을 가진 모든 요소를 선택document.querySelector(".item");🔸 querySelectorAll설명: 지정된 태그명을 가진 모든 요소를 선택document.querySele..

2.0 DOM 요소 선택 메서드웹 페이지를 만들고 스크립트를 작성 시 가장 먼저 하게 되는 일 중 하나: HTML 요소를 선택하는 것이 작업이 바로 DOM 요소 선택자바스크립트는 이를 위해 다양한 메서드를 제공 이 글에서는 다음과 같이 DOM 요소를 선택하는 메서드들을 범주별로 나누어 정확하고 체계적으로 정리도록 하자 2.1 기본 선택 메서드(가장 자주 쓰이는 5가지 중요!)메서드설명반환값특징getElementById()ID로 요소 1개 선택Element가장 빠르고 단순getElementsByClassName()클래스명으로 여러 요소 선택HTMLCollection실시간 컬렉션getElementsByTagName()태그명으로 여러 요소 선택HTMLCollection전체 태그 조회querySelector()..