[TIL 8] HTML, CSS, DOM...

HTML, CSS

markup language

html은 프로그래밍 언어가 아니다?
=> 실제 계산이 되지 않아서 프로그래밍 언어라고 할 수 없다.
브라우저에서 문서를 표현하기 위한 언어

html은 문서 구조와 의미를 담당한다.
css는 그 문서를 표현하기 위해 사용한다.

HTML5

2014년에 표준안 확정, 기존 문서에서 표현하기 힘든 것을 표현하고자 만들어짐

• 영상과 음성을 처리하기 위한 멀티미디어 요소(audio, video,canvas)
• 구조적인 요소(header, nav, article, section, aside, footer...)
• 표현을 담당하던 태그가 삭제되고 의미를 담은 태그가 추가됨(s -> del, b -> strong)

=> 구조와 의미를 더 잘 표현할 수 있도록 바뀌었다!

• 태그마다 default 속성이 있다. reset하려면 reset css를 사용하면 된다!
• 브라우저마다 스타일을 다르게 표현한다. 통일하려면 normalizase.cs 스타일을 사용하면 된다.

css3

• css 사용 방법
  style tag - head내에 style tag로 사용
  inline - html 태그 내의 style 속성
  link - 외부 파일 불러오기

공부하는 법

사례외우기가 가장 빠르다! 익숙해질 것

LINK = https://codepen.io/

더 알아볼 문제

css에서 id와 class의 차이는?

id가 하나 이상 있으면?

id는 하나만, class는 여러개에 스타일 적용. id는 문서 안에 있는 단 하나의 요소에 스타일 적용. class는 class명을 가지고 있으면 스타일 적용.

css의 선택자 종류 알아보기

css선택자는 어느 요소에 스타일을 적용할 지 알려주는 방식

LINK = https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

DOM(Document Object Model)

문서 객체 모델
모델이란? 현실에 있는 것을 추상화해 만든 객체
dom은 dcument의 model이다.

-javscript가 탄생하면서 같이 등장

• html문서와 상호작용이 가능하게 되었다.
• 초창기엔 접근 가능한 태그가 많지 않았다.
• 표준안은 1998년에 등장했고 대다수의 브라우저에 적용되기까지 시간이 오래 걸렸다,
• 점차 발전해 html문서를 직접 수정까지도 가능하게 되었다.

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

문서노드

• 최상위노드
• 모든 노드의 요소를 접근하기 위해서는 문서 노드에 접근해야 한다.
• 돔 트리의 시작 부분

요소노드

• HTML 태그 그 자체
• 속성 노드나 텍스트 노드에 접근하려면 요소 노드에 접근해야 한다.

속성 노드

• 요소노드에 붙어 있는 노드. 테그에 붙어있는 속성들이 속성 노드. 자식 노드 아님!

텍스트 노드
-요소 노드의 텍스트 표현. 자식을 가질 수 없기 때문에 단말 노드가 된다.

DOM 트리에서 요소는 전위순회(preorder) 방식으로 이루어진다. 우리가 보고 있는 문서 구조 자체가 전위 순회 방식이다.

DOM 트리의 렌더링 과정

브라우저는 html을 읽고 parsing해 DOM tree를 만든다.
다음으로 style sheet를 읽고 parsing해서 Style Rules를 만든다. CSSOM.
=> attachment

그 이후에는 render Tree를 만든다.
레이아웃 과정을 통해 DOM위치를 잡고, 실제화면에 그려준다.

DOM 선택

• javascript

getElementById
getElementByClassName
getElementByTagName

(css selector문접으로 찾음)
querySelector
querySelectorAll

window.[id]
id가 있는 요소는 window로도 찾을 수 있음. 여러개면 list로 반환

DOM 탐색

parentNode
부모요소를 불러온다. 없으면 null
firstElementNode /lastElementNode
선택한 요소의 자식노드 중 첫번째/마지막 번째 불러옴. 없으면 null
childeren
선택한 요소의 자식노드들을 불러옴. 없으면 빈배열
nextElementSibling / previousElementSibling
이전/다음 형제 불러옴. 없으면 null

DOM 조작

class 접근
선택한 요소 노드에서 className과 classList요소의 class속성을 불러오고 변경할 수 있다.
hasAttribute
선택한 요소 노드에서 속성을 가지고 있는지 확인한다.
getAttribute
선택한 요소 노드에서 속성의 값을 반환한다. 없으면 null을 반환한다
setAttribute
속성 정의
removeAttribue
속성 삭제
tectContent
선택한 요소 노드에서 텍스트 노드에 접근, 변경 가능
innerHTML
선택한 요소 노드 내부 HTML을 수정한다. XSS위험이 있다.
createElement
요소 노드를 생성할 수 있다.
appendChild
선택한 요소 노드 마지막 자식 요소로 추가한다.
removeCHild
선택한 요소 노드 자식 노드 중 해당하는 요소를 제거한다.

Virtual DOM

가상 돔
한 번에 여러개의 dom 생성한다면?

DOM을 바꾸면 다시 렌더링 후 디스플레이 해야 한다.
100개 수정 => 100번 다시 렌더링

개발자가 최적화하기는 한계가 있다.
=> 가상돔!
필요한 정보만 담아 객체로 만든다.

=>직접 돔을 수정하지 않고 바뀌는 부분만 수정해서 렌더링 한다.
react, vue 에서도

virtual dom 이 dom보다 빠르진 않다.
virtual dom 과 dom을 탐색하고 사용할 때 2배씩 들기 때문에 실제로는 더 느리다.
그냥 렌더링 횟수를 줄여줄 뿐.
하지만 개발편의성이 더 중요하다.

만약 정말 빠른 성능이 필요할 때 가상 돔을 쓰지 않고 최적화를 해야 한다면?
document.createDocumentFragment
=>