웹 프론트엔드를 처음 배울 때는 HTML, CSS를 같이 배우고,
Javascipt를 따로 공부하다가 어느 시점이 되면 그 셋을 연결하는 방법에 대해 배우게 된다.
오늘은 그 하모니(Harmony)에 대해 이야기해 보고자 한다.
1. What is HTML, CSS, Javascript?
문서를 집에 비유한다면, 위와 같이 표현 가능하다.
HTML이 집의 건축 골격이라면 CSS는 그 집을 예쁘게 꾸미는 인테리어 도구고,
자바스크립트는 도어락, 엘레베이터 등 집 내부 특정 부분을 동적으로 만들어 기능을 구현하는 역할을 한다.
따라서 HTML과 CSS는 프로그래밍 언어가 아닌 마크업 언어로 분류된다.
마크업 언어란, 태그로 둘러쌓여 문서의 구조와 스타일을 담당하는 언어를 말한다.
자, 그럼 여기서 자바스크립트와 마크업 언어와의 너와! 나의! 연결고리!가 무엇인지 알아보자!
2. DOM
DOM은 Document Object Model의 준말로서,
HTML 문서 구조를 계층화하여 트리 구조로 나타낸 객체이다.
우리가 태그를 쓸 때 마다 저렇게 가지치기하듯 뻗쳐 나가는 것이다.
따라서 자바스크립트는 이 DOM을 통하여 HTML 요소에 접근할 수 있게 된다. 어떻게?
DOM 트리 구조의 가장 최상위에 위치한 documnet 객체를 이용해서 말이다.
(위의 사진에선 document가 보이지 않지만 사실상 html보다 상위 요소다.)
이제 자바스크립트로 document 객체를 통해 HTML 요소에 접근하는 방식에 대해 알아보자.
[index.html] //HTML 부분. <body> <h1 class = "title">여기가 타이틀입니다."</h1> <script src = "script.js"></script> </body> . [script.js] //자바스크립트 부분. 여기를 눈여겨 봐주세요. #1 const h1TagOfHtml = document.getElementsByTagName("h1")[0] #2 const h1TagOfHtml = documnet.querySelector(".title")
[script.js]를 보면 document 객체를 새로운 변수에 담은 것을 알 수 있다.
getElementsByTagName()와 querySelector() 메서드는 이미 document 객체에 내장된 메서드다.
~ByTagName()은 특정 태그명이 쓰인 요소들을 DOM에서 찾아 배열로 반환하여 접근하는 것이고,
querySelector는 구분자를 이용해 태그든, 클래스든, id든 담아 HTML의 한 요소에만 접근하는 것이다.
즉, 방식의 차이일 뿐 자바스크립트로 HTML에 접근하는 원리임은 동일하다.
querySelector() 내 구분자는 다음과 같다.
태그 : querySelector("div")
id : querySelector("#id")
클래스 : querySelector(".class")
3. Event
Event란, 사용자가 발생시키는 동작이라고 볼 수 있다.
click, submit, keyup, keydown과 같은 동작이 발생할 때, 어떻게 응답할지를 어디서 정할까?
바로 자바스크립트다.
특정 이미지를 클릭했을 때 그 이미지가 확대되고, 특정 버튼을 눌렀을 때 글자색이 변하는 등의 Awesome한 일을 이제 자바스크립트를 이용해 할 수 있게 됐다는 말이다.
사용되는 자바스크립트 문법 형식이 위와 같다.
EventTarget은 이벤트를 발생시키고 싶은 대상(특정 HTML 요소)를 말한다.
아까 위에서 우리가 선언한 변수 h1TagOfHtml를 이용하면 되는 것이다.
그렇다면 addEventListener 메서드는 무엇일까?
그대로 직역하면, "추가한다. 이벤트를 듣는 사람을." 이다. 맞는 얘기다.
이벤트 대상에게 특정 이벤트가 발생했을 때, 어떤 동작을 추가할지 들어주는 매개의 역할을 한다고 볼 수 있다.
eventType이 바로 그 특정 이벤트 타입을, functionName이 추가할 동작을 알려주는 부분이다.
h1TagOfHtml.addEventListener("click", changeColor) . function changeColor() { h1TgaOfHtml.style.color = "red" };
자, 무슨 동작을 추가했을까?
어떠한 흐름으로 저런 코드가 짜였는지 파악할 수 있어야 한다.
h1 요소에 클릭이라는 이벤트가 발생했을 때 색상을 바꾼다는 아주 간단한 표현이다.
색상을 바꾸는 것은 어떤한 '기능'이므로 이것을 함수로 만들어줘야 한다.
따라서 문서상에 '여기가 타이틀입니다.' 부분을 클릭하면 글자색이 빨간색으로 바뀌게 된다.
이제 html, css, javascript의 화려한 콜라보레이션에 감이 좀 잡혔을지 모르겠다.
의외로 단순하고 직관적이다.
DOM과 Event만 이해한다면 우리는 얼마든지 HTML에 접근하여 동적인 웹을 만들 수 있게 된다.
그러한 즐거움을 몇 번이고 연습해보며 누려보자!
