TIL - Day9

HTML

• Hyper Text Markup Language

  마크업 언어(markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 우리가 책에 밑줄을 긋거나 형광펜으로 표시를 하는 것을 마크업이라고 생각하면 된다!!

📌 예전에는 수정 사항이 발생하면 비슷한 문서들을 한번에 수정하지 못했다. 즉, 하나하나씩 처리해줘야한다;;

👍 HTML의 내용과 표현을 분리 CSS라는 별도 양식을 만들었다.

• 문서에 대한 표현이 해당 파일로 위임됨
• 모든 문서를 한 번에 수정 가능!!

CSS

• Cascading Style Sheets
• 스타일 담당 Ex) 스타일리스트?

HTML은 문서 구조(Structure)와 의미(Semantic)로만 남게 되었다!
✔ HTML은 문서의 의미와 전체구조, CSS는 그 문서의 표현

HTML5

• 기존 HTML이 점차 발전하는 웹을 따라잡지 못해 생기게 되었다.
• 영상과 음성을 처리하기 위한 멀티미디어 요소가 추가
  • audio, video, canvas
• 구조적인 요소도 추가
  • header, nav, article, section, aside, footer 등
• 표현 태그가 삭제되고 의미를 담은 태그가 추가
  • s -> del(취소선), b -> strong(굵게) 등
• 특수한 태그들은 미리 구성되어져 있는 방식이 있기 때문에 파악할 필요가 있다 (ul,il)
  • Reset CSS를 이용해 모든 HTML 태그의 속성을 없애버릴 수 있다.
  • 하지만 모든 태그의 스타일을 직접 만들어야한다..
• 브라우저마다 스타일이 조금씩 다르다!!
  • Normalize.css를 사용해 해결!! -> 브라우저 간 차이점을 통일시켜줌

CSS3

selector{
	property : value;
	...
}

• selector : 어디에 스타일을 적용할 것인가?
• property : 어떤 스타일을 적용할 것인가?
• value : 어떻게 스타일을 적용할 것인가?

DOM

DOM 이란?
브라우저란?

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 (last도 있음!!)
  • 선택한 요소의 자식 요소 중 첫번째를 불러온다. 없을 경우는 null
• children
  • 선택한 요소의 모든 자식 노드를 불러온다. 없을 경우는 빈 배열 반환
• nextElementSibling
  • 선택한 요소의 다음 형제 요소를 불러온다. 없을 경우 null
• perviousElementSibling
  • 선택한 요소의 이전 형제 요소를 불러온다. 없을 경우 null

DOM 접근

• class 접근
  • 선택한 요소에서 className과 classList로 요소의 class속성을 불러오고 변경할 수 있다.
• hasAttribute
  • 선택한 요소에서 속성을 가지고 있는지 확인할 수 있다.
• getAttribute
  • 선택한 요소에서 속성 값을 반환한다. 없다면 null
• setAttribute
  • 선택한 요소에서 속성을 정의한다.
• removeAttribute
  • 선택한 요소에서 속성을 제거한다.
• textContent
  • 선택한 요소에서 텍스트 노드에 접근하고 변경할 수 있다.
• innerHTML
  • 선택한 요소 내부 HTML을 수정한다. -> 사용을 자제하자!
• createElement
  • 요소 노드를 생성할 수 있다 (태그이름으로)
• appendChild
  • 선택한 요소 마지막 자식 요소로 추가한다.
• removeChild
  • 선택한 요소 자식 중 해당하는 요소를 제거한다.

Virtual DOM (가상 돔)

한 번에 여러 개의 DOM 객체를 수정한다면 어떨까?

• DOM을 조작할 때 마다 레이아웃을 다시 잡고 재 렌더링을 해야한다..

가상 돔을 이용하면?

• 실제 DOM 트리를 JS 객체로 만든 것!!
• 필요한 정보만 담아 만들어진다.
• 이벤트가 발생하면 직접 DOM을 수정하지 않고 가상 돔을 바뀌는 부분만 수정한 후 렌더링을 한다. (변경된 부분만 렌더링) -> React, Vue

그럼 가상 돔이 DOM 보다 빠르겠네?

• 가상 돔과 진짜 돔에서 탐색을 해야하기 때문에 브라우저 렌더링 횟수를 줄여줄 뿐 빠르진 않다. (메모리도)

document.createDocumentFragment 란?

간단한 에디터 만들어보기