[TIL] 8/8

글 쓰던 게 다 날라갔다,,,,,또르륵,,,임시저장을 생활화하자

✏️ 새롭게 배운 것

CSS id와 class

사실 id와 class는 이미 아는 것이지만, styled-components를 사용한 뒤로 거의 안쓰기도 했고, 선택자 같은 건 거의 까먹고 있었어서 이번에 강의를 듣고 검색해보며 복기했다.
일단 id와 class의 공통점은 HTML Tag에 설정해 스타일을 지정해준다는 것이다. 그렇다면 차이점은 뭘까?

id와 class의 차이점

1. 적용가능한 객체의 수

   id는 하나의 객체에만 적용할 수 있고 = 유일해야한다, class는 이름답게 여러 객체에 적용할 수 있다.

2. 우선순위

   만약 하나의 객체에 id와 class가 둘 다 적용되어 있다면 어떤 style이 적용될까? 바로 id에 해당하는 스타일이 적용된다! 바로 id가 class보다 우선순위가 높기 때문이다. 이 부분은 명시도에 대해 더 찾아봐야하는데, 간략하게 말하자면 !important > Inline Style > id > class > tag 순으로 스타일이 우선적으로 적용된다.

3. 선택자 기호

   id 속성은 #으로 선언한 스타일과 연결되고, class 속성은 .으로 선언한 스타일로 연결된다. 여기서도 #이 .보다 상위 선택자라는데 이게 선택자의 우선순위 때문에 id, class의 우선순위가 생긴건지, id, class의 우선순위 때문에 선택자의 우선순위가 생긴건지 아직 모르겠다.

class의 특징

id와 class의 차이점에 대해 찾아보다가 class만이 가지고 있는 특징을 발견했다. 하나의 객체에만 적용할 수 있고 객체 당 하나의 id만 가지고 있을 수 있는 것과는 달리, class는 여러 객체에 적용할 수 있는 것은 물론이고 하나의 객체가 여러 개의 class를 가질 수도 있다!
그렇다면 하나의 객체에 여러 class가 설정되어 있을 때 어떤 style이 적용될까? 바로 class 속성이 설정된 순서와는 무관하게 나중에 정의된 css가 적용된다.

<style>
.blue {background-color:blue;}
.red {background-color:red;}
</style>

<button class='red blue'>button</button>
<button class='blue red'>button</button>

위 코드를 실행해보면 두 버튼 모두 빨간색이 되는 걸 볼 수 있다. 두 버튼의 class 순서는 다르지만 red가 blue보다 나중에 선언되었기 때문이다.

DOM tree

브라우저는 HTML 문서를 파싱해서 해당 문서에 대한 모델을 메모리에 생성한다. 이때 HTML의 각 Tag가 객체로서 트리를 구성하는데 이것을 DOM Tree라고 한다

DOM tree의 노드

DOM tree에는 네 종류의 노드가 있다.

• 문서 노드
  • 트리의 최상위에 있는 노드로, 모든 노드에 접근하기 위해서는 문서 노드를 거쳐야한다.
• 요소 노드
  • HTML Tag 그 자체를 의미한다.
  • 요소 노드는 HTML 문서 서술 구조를 그대로 표현한다.
  • 어트리뷰트 노드나 텍스트 노드에 접근하기 위해서는 요소 노드를 찾아야한다.
• 어트리뷰트 노드
  • 요소 노드에 붙어있는 노드로, 요소 노드의 자식 노드는 아니다.
  • Tag에 정의되어있는 속성들이 여기에 속한다.
• 텍스트 노드
  • 요소 노드의 자식이며 요소의 텍스트를 표현한다.
  • 자식 노드를 가질 수 없기 때문에 단말 노드가 된다.

DOM의 각 요소는 확실하게 프로토타입 객체로 정의되어있다.

렌더링

브라우저는 여러가지 요소로 구성되어있는데, 통신, 자바스크립트 해석기 등등은 다음에 알아보기로 했고 오늘은 렌더렝 엔진에 대해 공부해봤다. 렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시하는 역할을 한다. 크롬의 경우 Webkit에서 파생된 레이아웃 엔진인 Blink를 사용한다.

렌더링 과정

렌더링 엔진의 동작 과정은 다음과 같다.

1. DOM 파싱 & DOM tree 구축

   HTML 읽고 파싱한 뒤 DOM tree를 구축한다.

2. CSS 파싱 & CSSOM tree 구축

   CSS를 파싱하여 style rule을 만들고 CSSOM tree를 구축한다.

3. Attachment & Render tree 생성

   DOM tree와 CSSOM tree를 결합하여 Render tree를 생성한다. 이때, HTML의 일부 노드 (ex) script, meta tag)와 CSS를 통해 숨겨지는 일부 노드(ex) display: none이 적용된 노드) 등은 렌더링된 출력에 반영되지 않아서 Render tree에서 생략된다.

4. Render tree 배치

   layout 혹은 reflow라는 과정을 통해 DOM 요소의 위치를 정한다.

5. Render tree 페인팅

   Render tree를 통해 개별 노드를 화면에 그려준다.

🔥 더 공부해 볼 것

파싱 과정

스터디 발표 시간에 참석했다가 우연히 파싱에도 순서가 있다는 것을 알게 됐다! 다음에는 이 파싱 과정에 대해서도 자세히 알아봐야겠다.

브라우저의 구조

아까 말했듯이 브라우저는 렌더링 엔진 뿐만 아니라 다른 여러 요소로 구성되어있는데 이들의 역할에 대해서도 알아보고 싶다.

명시도

명시도에 대해서 검색하다가 !important는 절대 사용하지 말라고 나와있는 글을 얼핏 본 거 같은데 이 부분에 대해서도 더 검색해보자!

마무리

프론트엔드 개발자가 되기 위해 본격적으로 Javascript 공부를 시작하고 나서 느낀 건,, 코드만 잘 작성한다고 되는 게 아닌 거 같다. 언어 자체에 대한 이해도도 높아야되고, 웹개발이 하고 싶으니깐 브라우저, 네트워크 등에 대해서도 엄청 공부해야된다,, 아직 갈 길이 멀게 느껴지지만 꾸준히 하다보면 언젠가 멋있는 개발자가 되어있지 않을까~?! 🤔

출처

• 렌더링 트리 생성, 레이아웃 및 페인트
• 브라우저는 어떻게 동작하는가?
• 문서 객체 모델(Document Object Model)
• DOM(Document Object Model) 이란? DOM Tree 란?
• id, class 선택자
• id, class 차이점