[TIL]Day8

팀원분이 이미지도 만들어주셨다!

배운 내용

• HTML
  • Hyper Test MarkUp Language.
  • 로직이 실행되지 않기때문에 프로그래밍 언어는 아니다.
  • 구조(Structure)와 의미(Semantic)로만 남아있다.
• CSS
  • Cascading Style Sheets
  • 마크업 언어가 실제 표시된는 방법을 기술하는 스타일 언어다.
  • ID와 Class
    • 이름을 불러오는 방식의 차이가 있다. 클래스명은 앞에 마침표(.)를 찍는다. 아이디는 앞에 샵(#)을 사용한다.
    • 클래스는 중복 사용이 가능하지만 아이디는 한 페이지에서 딱 한번 사용해야한다. 중복 ID가 여러 개 존재할 경우 정상적으로 작동하지 않는다.
    • 한 요소에 여러개의 클래스명이 적용될 수 있다. 그러나 아이디는 하나만 적용이 가능하다. 여러개의 id를 적용할 경우 정상적으로 작동하지 않는다. id는 공백까지 포함해서 id로 인식한다.
  • 선택자 종류
    • 전체 선택자(*) : 모든 형태의 모든 요소를 선택한다.
      • ns|* : 네임스페이스 'ns'안의 모든 요소 선택
      • *|* : 모든 요소 선택
      • |* : 네임스페이스 없는 모든 요소 선택
    • 유형 선택자 : 노드의 이름을 사용해 요소를 선택한다. element
    • 클래스 선택자 : 요소의 class 특성에 기반해 요소를 선택한다.
    • ID 선택자 : 요소의 id 특성 값을 비교하여, 완전히 동일한 id를 가진 요소를 선택한다.
    • 특성 선택자 : 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택한다.
    • https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

특성 선택자 - CSS: Cascading Style Sheets | MDN

 

• DOM
  • Document Object Model 
  • 추상적인 개념의 HTML 태그가 모델링되어 객체로 만들어진것.
  • 트리 구조로 되어있다.
  • DOM 트리 랜더링
    • HTML을 읽고 파싱하여 DOM Tree를 구성한다.
    • Style Sheets를 파싱하여 스타일 Rules를 마늘어 DOM Tree에 입힌다.(Attachment)
    • Render Tree를 만든다. (layout)
    • 랜더 트리가 완성되면 실제 화면에 표시한다.
• Virtual DOM
  • DOM을 JS객체로 필요한 정보만 담아서 만들어진것이다.
  • 수정사항들은 모아서 한번에 적용시킨다.
  • 유지보수가 용이하고 대부분의 유스케이스에 충분히 빠르다. 개발 편이성의 좋다.
  • 브라우저 렌더링 횟수를 줄여줄뿐 실제로는 더 느릴 수 있다. 메모리도 더 많이 차지한다.
• DocumentFragment
  • DOM Tree의 일부가 아닌, 경량화된 Document 객체이다. 메모리상으로만 존재하는 빈 문서 템플릿으로 자식 노드를 메모리상에서 쉽게 조작한 후, 라이브 DOM에 추가할 수 있다.
  • DocumentFragment를 수정해도 DOM Tree에는 영향이 없다.
  • 수정사항들을 모아서 반영할 수 있기때문에 리플로우가 적어진다.
  • 다른 방법에 비해 속도도 빠르고, DOM에 렌더링 되지 않는다는 장점이 있다.

보충 해야할 내용들

• DocumentFragment, Virtaul DOM ..........흠.........