HTML & CSS, 그리고 DOM

HTML (Hyper Text Markup Language)

웹사이트의 모습을 기술하기 위한 마크업 언어.

프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다.

• 초기에는 html만으로 문서와 뼈대의 위치를 모두 정함
• 문서에 대한 수정 사항이 발생했을 때 하나씩 수정해야 하는 문제가 발생
• HTML의 내용과 표현을 분리하여 CSS라는 별도의 양식을 만들어 표현을 위임 -> 모든 문서를 한번에 수정할 수 있게 되었다.

CSS (Cascading Style Sheets)

HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어.

• CSS가 등장함에 따라서 HTML에서 표현 용도로 사용되는 태그들은 점차 사라졌다. (center, s, u, font 등)
• 따라서 HTML은 문서의 구조와 의미로만 남게 되었다.
• CSS는 문서의 표현!

HTML 5가 등장하게 된 이유

• 기존 html이 점차 발전하는 웹을 따라잡지 못했기 때문이다.
• 텍스트만 존재했던 웹페이지가 오디오, 비디오 등이 추가되면서 등장하였다.
• 표현을 담당하던 태그가 삭제되고, 의미를 담은 태그가 추가되었다. (b -> strong)

HTML 5의 등장은 HTML이 구조와 의미가 가장 중요하다고 선언한 셈이다.

주의할 점!

• 태그마다 기본 스타일이 있다. (li, a) -> Reset CSS 사용하면 됨
• 브라우저마다 미묘하게 기본 스타일이 다르다. (button) -> Normalize.css 사용하면 됨

CSS에서 id와 class의 차이점

id는 단 하나의 Element를 지정할 때 사용하고(중복 X)
class는 여러 Element를 지정(중복 O)할 때 사용한다.

DOM (Document Object Molde)

자바스크립트로 HTML문서에 접근하여 조작할 수 있게끔 해주는 일종의 인터페이스

DOM은 왜 탄생했을까?

• JavaScript가 탄생하면서 같이 등장
• 초창기에는 접근 가능한 태그가 많지 않았다. (form)
• 표준안은 1998년에 등장했고 대다수의 브라우저에 적용되기까지 시간이 오래 걸렸다.
• 점차 발전하여 HTML 문서를 직접 수정까지도 가능하게 되었다.

DOM의 구조

DOM은 트리 구조로 이루어져있다.

• 문서 노드: 최상위 노드로 모든 노드에 접근하기 위해서는 문서 노드를 통해야한다.
• 요소 노드: html 태그 그 자체를 나타낸다. 속성, 텍스트 노드에 접근하려면 요소 노드를 찾아야 한다.
• 속성 노드: 요소 노드에 붙어있는 노드로(자식이 아님) 태그에 정의되어있는 속성들을 나타낸다.
• 텍스트 노드: 요소의 텍스트를 표시하고 자식 노드를 가질 수 없다.

추가로 DOM은 전위 순회를 통해 탐색을 진행한다.

DOM Tree의 렌더링 과정

1. 브라우저는 HTML을 읽고 파싱한 후에 DOM Tree를 구성한다.
2. Style Sheets를 파싱하여 CSSOM Tree를 만들어 Attachment 한다.
3. 그 이후에 각 노드가 어디에 위치해야 되는지 계산하는 Layout과정을 거치면서 Render Tree를 만든다.
4. 화면에 그려준다.

DOM 선택 방법

• getElementById

  DOM Tree에서 요소 노드를 id로 찾는다. 제일 먼저 찾은 요소 하나를 반환한다.

• getElementsByClassName

  DOM Tree에서 요소 노드를 class로 찾는다. 일치하는 모든 요소를 반환한다.

• getElementsByTagName

  DOM Tree에서 요소 노드를 태그 이름으로 찾는다. 일치하는 모든 요소를 반환한다.

• querySelector

  DOM Tree에서 요소 노드를 CSS Selector 문법으로 찾는다. 제일 먼저 찾은 요소 하나를 반환한다.

• querySelectorAll

  DOM Tree에서 요소 노드를 CSS Selector 문법으로 찾는다. 일치하는 모든 요소를 반환한다.

• window.[id]

  id가 있는 요소는 window 객체를 통해 찾을 수 있다. 여러 개라면 리스트로 반환된다.

DOM 탐색 방법

• parentNode

  선택한 요소 노드의 부모 노드를 불러온다. document의 부모 노드는 null이다.

• firstElementNode

  선택한 요소 노드의 자식 요소 노드 중 첫 번째를 불러온다. 얿을 경우 null을 반환한다.
  lastElementNode도 있다.

• children

  선택한 요소 노드의 모든 자식 요소 노드를 불러온다. 없다면 빈 배열을 반환한다.

• nextElementSibling

  선택한 요소 노드의 다음 형제 요소 노드를 불러온다. 없을 경우 numm을 반환한다.

• previousElementSibling

  선택한 요소 노드의 이전 형제 요소 노드를 불러온다. 없을 경우 null을 반환한다.

DOM 조작 방법

• class 접근

  선택한 요소 노드에서 className과 classList로 요소의 class 속성을 불러오고 변경할 수 있다.

• hasAttribute

  선택한 요소 노드에서 속성을 가지고 있는지 확인할 수 있다. (Boolean 값)

• getAttribute

  선택한 요소 노드에서 속성의 값을 반환한다. 없다면 null을 반환한다.

• setAttribute

  선택한 요소 노드에서 속성을 정의한다.

• removeAttribute

  선택한 요소 노드에서 속성을 제거한다.

• textContent

  선택한 요소 노드에서 텍스트 노드에 접근, 변경할 수 있다.

• innerHTML

  선택한 요소 노드 내부 HTML을 수정한다.
  XSS 위험이 있어서 추천하지 않는다.

• createElement

  요소 노드를 생성할 수 있다.

• appendChild

  선택한 요소 노드 마지막 자식 요소로 추가한다.

• removeChild

  선택한 요소 노드의 자식 노드 중 해당하는 요소를 제거한다.
  
  

Virtual DOM

만약 여러번 DOM 객체를 수정한다면?

새로운 렌더 트리가 계속해서 실시간으로 갱신되고 이는 곧 메모리 낭비로 이어진다.
이것을 Vritual DOM을 사용하여 극복할 수 있다.
Virtual DOM은 실제 돔트리를 자바스크립트 객체로 만든것으로 필요한 정보만 담아 만들어진다.
직접 돔을 수정하지 않고 가상 돔에서 변경되는 점만 수정된 후 렌더링한다.

Virtual DOM의 오해

• DOM보다 빠른것이 아니다.
• 개발 편의성을 위해 많이 사용한다.