2025. 03. 06 블로그 A/S 프로젝트🚧 로 업데이트한 글입니다.1. 브라우저 렌더링 과정사용자가 브라우저를 통해 웹사이트에 접속하고, 브라우저가 리소스를 다운받으면서 시작된다. (HTML, CSS, JS 등)Parsing: 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만듦Style: 렌더링 엔진이 CSS를 파싱해 CSSOM 트리를 만듦. 다양한 상대적인 값들이 px로 치환되어 계산.DOM 트리 + CSSOM 트리 = Render 트리 구축.Layout: 각 요소의 배치 결정Paint: 구축된 Render 트리를 화면에 어떻게 그릴 지 결정하는 페인트 레코드 생성 (이때 그리는건 아니다)Layerize: Paint 결과물을 사용해서 특정한 레이어들로 쪼갬Commit: Layerize 결과물을 ..
vendor prefix란? CSS를 작성하면서 위와 같은 코드를 본 적이 있을 것이다. -webkit/-moz 등이 바로 벤더 프리픽스이다. 벤더 프리픽스(vendor prefix)란, 주요 웹 브라우저 공급자(vendor)가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹브라우저에 해당 기능을 알리기 위해 사용하는 접두사(prefix)를 의미한다. 주요 브라우저와 vendor prefix 브라우저 prefix Chrome, Safari 등 크로미움 기반 브라우저 -webkit 파이어폭스 -moz 엣지 (크로미움 이전) -ms 오페라 -o 지금까지는 남발했던 vendor prefix 나는 지금까지 이렇게 벤더 프리픽스를 활용했다. caniuse 를 활용해서 확인 (특이한 속성 이용할 경우) 크로스 브..