(TIL Day06-1)HTML과 CSS, DOM

HTML

• Hyper Text MarUp Language
• 로직이 실행되지 않기 때문에 HTML은 언어가 아니다.(계산이 되지 않는다!)
• 스타일의 수정 사항이 발생했을 때, 각각의 파일을 수정해야 했기 때문에 오랜 시간이 걸렸다.
• 그러나 CSS를 통해 HTML의 스타일을 한꺼번에 수정할 수 있다.(HTML 파일과 CSS 파일을 분리하여 수정 가능)
• HTML5
  1. 영상과 음성을 처리하기 위한 멀티미디어 요소가 추가되었다.(audio, video, canvas)
  2. 구조적인 요소가 추가되었다.(header, nav, article, section 등..)
  3. 표현을 담당하던 태그 대신 의미를 담은 태그가 추가되었다.

 

---

 

CSS

• HTML에 스타일을 추가하여 더욱 더 동적이고 멋진(?) 웹을 표현할 수 있다.
• HTML은 문서 구조의 의미를 나타내고, CSS는 문서의 표현을 나타낸다.
• Reset CSS를 통해 브라우저의 모든 스타일을 제거한 후 코딩 가능하다.
• Normalize.css는 브라우저 간(크롬, 파이어폭스, 사파리 등..) css 파일을 통일시켜준다.
• 스타일 적용 방법 3가지
  1. HTML 파일의 head 태그 안에 style 태그를 이용하여 적용
  2. HTML 파일 내부의 태그에서 인라인 속성 이용
  3. CSS 파일을 분리해 HTML 파일에 링크를 건다.

CSS에서 id와 class의 차이점은?

• id(#)는 한 요소에만 사용하며 한 태그에 여러 id가 존재하는 경우, 가장 앞에있는 id 스타일만 적용된다.
• class(.)는 여러 요소에 중복으로 사용 가능하다.

 

CSS 선택자 우선순위

• !important > inline > id > class > 요소

 

---

 

 

DOM

• Document Object Model
• 추상적인 HTML 문서를 모델링하여 객체로 만든 결과
• Key와 Value로 구성
• 트리 구조로 구성
  1. 문서 노드 : 최상위 노드. 모든 노드에 접근하기 위해서 문서 노드를 통해야 한다(root)
  2. 요소 노드 : HTML 태그를 나타낸다. 속성 노드나 텍스트 노드에 접근하려면 요소 노드를 통해야 한다.
  3. 속성 노드 : 요소 노드에 붙어있는 노드. 자식 노드가 아닌 형제 노드. 태그에 정의된 속성들이 저장.
  4. 텍스트 노드 : 요소의 텍스트를 표현. 자식 노드를 담을 수 없어 DOM 트리의 단말 노드다.
• DOM 트리 렌더링 과정
  1. 브라우저가 HTML 파일을 읽고 파싱.
  2. 스타일 sheet를 파싱하여 스타일 룰을 만들고 DOM 요소에 적용.(attachment)
  3. 렌더 트리를 만들어 Layout 또는 Relpy라는 과정을 통해 노드의 위치를 정함
  4. 화면에 렌더링
• HTML을 파싱하여 만든 트리가 DOM, CSS를 파싱하여 만든 트리가 CSSOM이며, 이 둘을 합쳐 Render Tree가 형성된다.

 

 

Virtual Dom

• 한 번에 여러 DOM 객체를 수정하게 된다면 렌더링 과정을 계속 반복하게 된다.
• 개발자가 직접 최적화하는 어려움이 있어 이를 해결하고자 Virtual DOM 등장.
• 실제 DOM 트리를 JS 객체로 만들고 필요한 정보만 생성한다.
• 변경되는 부분을 가상 DOM에서 변경하고, 나중에 실제 DOM에 렌더링.