브라우저의 렌더링 원리 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(webkit)이나 게코(Gecko)등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML,CSS,Javascript로 렌더링할 때 CRP라는 프로세스를 사용하며 다음 단계들로 이루어진다. 1. HTML를 파싱 후 , DOM 트리를 구축한다. 2. CSS를 파싱 후 , CSSOM 트리를 구축한다. 3. javascript를 실행한다. * 주의할 점 ! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단 된다. 4. DOM과 CSSOM을 조합해 렌더 트리를 구축한다. * 주의할 점 ! display: none 속성과 같이 화면에서 보이지도 않고, 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다. 5. 뷰포트 기반으로 ..
Javascript
Mobile First 모바일 화면을 먼저 구성하고 반응형 웹페이지로 확장시켜 만든다. 화면 구성 헤더 비디오 플레이어 화면 비디오에 관련된 정보 화면 (타이틀 -> 2줄 / 버튼 클릭 시 3줄로 변환) 스크롤링 화면 (비디오는 움직이지 않고 고정) 브라우저 사이즈가 커지면 화면이 유동적으로 움직이다가 재배치
