DOM(Document Object Model)을 이해하고, 자바스크립트로 HTML 문서의 구조, 내용, 스타일을 변경할 수 있어요.
HTML, CSS, JavaScript
프론트엔드 웹 개발자는 HTML, CSS, 그리고 JavaScript(이하 자바스크립트)이 세 가지에 능숙해야 해요. 여기서 주요 역할은 사용자가 웹 사이트를 보고 상호작용할 수 있도록 웹 애플리케이션을 만드는 것입니다.
HTML과 CSS는 주로 구조와 스타일을 담당하지만, 상호작용을 가능하게 하는 기능은 자바스크립트에서 주로 담당해요.
DOM(Document Object Model) 살짝 맛보기
위에서 설명한 상호작용을 가능하게 만드는 것은 DOM과 밀접하게 연관되어 있어요. DOM은 다음과 같이 두 가지 중요한 역할을 합니다:
1.
브라우저 렌더링
2.
HTML 문서의 조작을 위한 인터페이스 역할
브라우저는 HTML을 읽어 DOM이라는 트리 구조를 만들고, 자바스크립트는 이 DOM을 통해 웹 페이지의 내용을 변경하거나, 새로 추가하거나, 삭제할 수 있어요.
다시 말해, DOM은 자바스크립트가 웹 페이지의 구조와 내용을 조작할 수 있는 인터페이스 역할을 하면서, 브라우저가 페이지를 렌더링하는 데 필요한 기본 구조를 제공해요.(CSS를 읽어 생성하는 CSSOM도 있어요. 렌더링의 자세한 내용은 여기선 다루지 않을게요.)
DOM에 대한 자세한 내용은 역시 MDN을 참고해주세요.
기억해야 할 세 가지
실습하기 전, 이 세 가지를 기억해 주세요:
1.
요소 검색 → querySelector
2.
상호작용 만들기 → addEventListener
3.
CSS 변경 → style 속성(property)
코드로 표현하면 다음과 같아요:
<p id="myParagraph">버튼을 클릭하면 글자색이 바뀝니다.</p>
<button id="colorButton">글자색 변경</button>
<script>
// 1. 요소 검색
const paragraph = document.querySelector("#myParagraph");
const button = document.querySelector("#colorButton");
// 2. 상호작용 만들기(이벤트 등록)
button.addEventListener("click", () => {
// 3. CSS 변경
paragraph.style.color = "violet";
});
</script>
HTML
복사
처음부터 모두 깊게 이해할 필요는 없어요. 이론부터 달달 외우면 재미도 없고, 쉽게 지칠 수 있어요. 대강 이해가 됐다면, 직접 해보면서 습득해 보세요. 훨씬 이해가 빨라지고, 디테일한 것들이 궁금해지기 시작할 거에요. 그때마다 하나씩 검색하고, 찾아보면서 검색 실력도 키우는 것을 추천드려요. 직접 경험이 가장 중요합니다.
여기까지 오느라 고생하셨습니다. 직접 경험을 해보는 것이 가장 중요해요. 과제를 시작해 볼게요.
할 일 목록(To Do List) 만들기
1.
할 일을 추가 할 수 있는 투두 리스트를 만듭니다.
2.
HTML로 기본 구조를 만듭니다.
3.
자바스크립트로 할 일 추가 기능을 구현합니다.
a.
입력 필드와 “추가” 버튼을 통해 새로운 할 일을 추가합니다.
4.
(선택 사항) CSS로 간단한 스타일을 적용합니다.
5.
(선택 사항) 할 일 항목의 완료 표시, 삭제 기능을 구현합니다.
힌트1
힌트2
힌트3
아직은 어려운 것 같아요.
과제를 완료하셨나요?
•
전체코드를 복사하여 퀘스트로 제출해주세요
•
•
과제를 수행하며 고민하고 검색 했던 내용을 모아 TIL을 작성해주세요.