레이아웃2 [Browser]브라우저 렌더링 과정 브라우저 렌더링 과정1. HTML파일을 파싱해서 DOM 트리를 생성한다.2. CSS파일을 파싱해서 CSSOM트리를 생성한다.3. 생성된 DOM트리와 CSSOM트리를 합쳐서 렌더 트리를 생성한다. (display: none 같은 경우 렌더 트리에 포함되지 않는다.)4. 레이아웃 단계에서 렌더 트리의 각 요소의 크기와 위치를 계산해서 화면에 배치한다.5. 페인트 단계에서 배치된 요소들을 화면에 그린다.기본적으로 알던 일련의 브라우저 렌더링 과정에 대한 설명좀 더 세분화해서 보면1. DOM트리 생성HTML의 원시 바이트를 읽는다. (8비트의 데이터 형태, 바이트 스트림) ->HTML에 정의된 인코딩(ex. utf-8)에 따라 개별 문자로 변환 -> 변환한 문자와 가지고 있는 토큰을 비교해 HTML코드인지 확인.. 2024. 7. 17. [React Native] Layout system RN에서는 Flexbox를 사용한다. 주의 Flexbox는 웹의 CSS에서와 같은 방식으로 리액트 네이티브에서 몇 가지 예외를 제외하고 작동합니다. 기본값은 다릅니다. flexDirection이 행 대신 열로 기본 설정되어 있고, alignContent가 stretch 대신 flex-start로 기본 설정되어 있고, flexShrink가 1 대신 0으로 기본 설정되어 있으며, flex parameter는 단일 숫자만 지원합니다. 참조 : https://reactnative.dev/docs/flexbox Layout with Flexbox · React Native A component can specify the layout of its children using the Flexbox algorithm... 2024. 3. 15. 이전 1 다음