호다닥

Day 13. Review / DOM & CSSOM 본문

바닐라코딩

Day 13. Review / DOM & CSSOM

3jun 2018. 6. 19. 20:53

버그 수정





1. querySelector는 CSS selector를 사용하기 때문에 class를 명시해주기 위해 container 앞에 '.'을 추가해줘야 한다. 


2. getElementBy method를 className으로 가져오면 유사배열(html colleciton)을 return해주는데 유사배열에는 appendchild가 없다. 

element들이나 node들에만 있다. 


3. hello 클래스는 하나 뿐이기 때문에 이런 문제를 해결해주기 위해 인덱스 값을 주어도 무방하다. 


4. 또한 1~10까지의 숫자리스트를 만들기 위해서는 hello.length가 아닌 10으로 값을 변경해줘야한다. 


5. newEl.textContent = ' ' + i + 1; 을 하면  빈문자열에 숫자를 더하면 문자열이 출력된다. 즉 ' ' + 1 + 1 = 11이 된다. 

때문에 빈문자열을 지워줘야 한다. 


EventHandler는 for문이 끝난 뒤에 실행된다. 


return 개행?



이렇게 작성하면 list element를 하나만 만든다. 

만약에 10개의 숫자 리스트를 만들고 싶으면 createElement를 10번 했어야한다. 


HTML "marking up"

원고를 작성할 때, 어떤 식으로 인쇄되어야 하는지에 관한 지시를 적는 행위이다.

특정 기호나 단어를 사용하여 글의 서식, 구조 그리고 스타일을 정해주는 언어이다.


CSS Cascading Style Sheets

스타일 속성은 상위노드에서 하위 노드로 상속되는 습성이 있고, 그 때문에 cascading이라고 한다.


CSS Specificity

1. inline style                                    1000pt

2. ID selector                                    100pt

3. Class, Attributes, Pseudo-Classes        10pt

4. Elements, Pseudo-Elements               1pt


DOM    Document Object Model

the Document Object Model(DOM) is a progtamming API for HTML.

HTML을 위한 프로그래밍 인터페이스로 Tree 구조로 이루어져 있다. 

Rendering Process

HTML/CSS가 화면으로 다시 태어나는 과정이다.



CSSOM

HTML의 구조를 이용하여 DOM이 생성되듯, CSS도 똑같은 과정을 거쳐 CSSOM이 생성됩니다.

DOM과 CSSOM을 매칭하여 화면을 구현합니다.  이 과정을 통해 Render Tree 생성하고 화면을 구현합니다.

Render Tree는 화면에 무엇을 보여줘야할지만 결정하기 때문에 <head>,<body> 태그와 같이 보이지 않는 태그는 생략된다.

display: none은 render Tree에 없고, visibility-hidden은 render tree에 포함된다.



Render Tree를 생성한 뒤에는 layout 과정을 통해 화면을 구상한다. 이렇게 해서 완성된 결과물을 box model이라고 한다.

그리고 화면에 직접적으로 그리는 단계를 Painting이라고 한다.


Render Blocking Resources : HTML과 CSS가 없으면 사실상 의미가 없는 화면이기 때문에 이 두가지를 Render Blocking Resources라고 한다.

그래서 브라우저가 최대한 빨리 CSSOM을 완성하게 도와주기 위해 CSS는 보통 HTML 상에서 상위에 넣는다.

 



Adding Javascript

자바스크립트를 이용하여 우리는 화면을 조절할 수 있습니다.

만약 CSSOM이 완성되지 않았는데, 자바스크립트가 실행된다면 어떨까요? CSS가 완성되면 다시 CSSOM을 생성해야하고, 자바스크립트도 다시 실행해야한다.

그래서 브라우저에서는 CSSOM이 완성되지 전에는 자바스크립트를 실행시키지 않습니다. 그리고 DOM Construction은 script 태그를 만나서 실행중인 동안에는 멈춥니다.


그래서 CSS는 헤드에, 자바스크립트는 바디 최하단에 주로 넣습니다.


자바스크립트가 실행되는 동안에는 DOM Structure가 멈춘다.

자바스크립트가 DOM을 건들기 때문에 DOM을 계속 구성하는 것이 의미가 없기 때문이다. 

자바스크립트에서 에러가 발생해도 HTML화면이 구현되는 것과는 상관이 없다. 


더 자세한 내용은 Udacity Website Performance Optimization 참고

구글 개발자 홈페이지 참고



'바닐라코딩' 카테고리의 다른 글

Day 15. 마지막 리뷰  (0) 2018.06.23
Day14. ES6  (0) 2018.06.21
Day 12. Git  (0) 2018.06.16
Day 11. Event Loop  (0) 2018.06.14
Day 9,10. Server/Client/HTTP, AJAX  (0) 2018.06.14
'바닐라코딩' Related Articles more
Comments