Ted's Codding study

렌더링의 원리 초간단 요약!1. HTML 파싱과 DOM 트리 구축HTML 파싱: 브라우저는 HTML 파일을 받고 태그들을 해석하여 파싱 DOM 트리 구축: 파싱된 HTML 요소들은 DOM(Document Object Model) 트리로 변환 이 트리는 문서의 구조적 표현이며, JavaScript를 통해 동적으로 조작 가능2. CSS 파싱과 CSSOM 트리 구축CSS 파싱: 브라우저는 모든 CSS를 읽고 CSS 규칙(선택자와 속성)을 파싱 CSSOM 트리 구축: 파싱된 CSS는 CSS 객체 모델(CSSOM) 트리로 변환 CSSOM은 각 DOM 요소에 적용될 스타일을 결정하고, DOM과 병합되어 렌더 트리를 형성하는 데 기여3. 렌더 트리 구축렌더 트리 생성: DOM 트리와 CSSOM 트리가 결합하여 렌더 ..

1.inline/inline-block 요소 간의 수직 정렬 (이전 글)2.테이블 셀 요소 내부의 수직 정렬 (다음 글)기본 구문 : vertical-align: middle; (top, middle, botom 등이 있으며) default 값은 middle이다.2.테이블 셀 요소 내부의 수직 정렬vertical-align 속성을 사용하지 않은 default 값인 middle인 상태제일 왼쪽 셀에 글자가 많아지면서 자연스럽게 셀의 길이가 늘어난 상태가 되고다른 셀의 글자가 자동으로 가운데로 들어가 있음// 전체 소스 코드는 길어서 제일 아래에 첨부 자차카타 vertical-align: top; 을 하게되면, 셀 안의 글자가 위로 정렬 자차카타vertical-align: bottom; 을 하게되면, ..

1.inline/inline-block 요소 간의 수직 정렬2.테이블 셀 요소 내부의 수직 정렬 (다음 글)기본 구문 : vertical-align: middle; (top, middle, botom 등이 있으며) default 값은 middle이다.1.inline/inline-block 요소 간의 수직 정렬 vertical-align을 적용하지 않았을 때의 default 값은 middle로 설정 되어 있다 vertical-align정렬 top을 주었을 때 정렬이 위로 올라간 것을 확인 vertical-align정렬 bottom을 주었을 때 정렬이 아래로 올라간 것을 확인 vertical-align정렬 이러한 특성을 이용하면 2의 제곱 이런 형태도 쉽게 표현 가능 22 노션으로 보고 싶다면..