WEB/front-end
-
웹 브라우저의 렌더링 과정WEB/front-end 2021. 2. 7. 23:16
항상 궁금하면서도 제대로 정리하지 못했던,브라우저에 HTML 문서가 렌더링 되는 과정을 간단하게 정리해보았다. 렌더링 (Rendering)브라우저에서 요청 받은 컨텐츠나 데이터를 화면에 그리는 과정을 말한다. 렌더링 엔진 (Rendering engine)브라우저는 사용자 인터페이스, 브라우저 엔진, 자바스크립트 해석기 등 다양한 구성요소를 갖고 있다. 그 중에서 렌더링 엔진은 이름 그대로 렌더링을 하는 역할이다. 즉, 요청한 HTML나 CSS를 파싱해서 화면을 그리는 과정을 담당한다. 브라우저마다 다른 렌더링 엔진을 사용하는데,파이어폭스는 게코(Gecko) 엔진을 사용하고 사파리와 크롬은 웹킷(Webkit) 엔진을 사용한다. 따라서 렌더링 엔진마다 자세한 과정은 다를 수 있지만 기본적인 동작 과정은 아래..
-
[CSS] Flex(Flexible box) 사용 가이드WEB/front-end 2021. 2. 7. 21:00
본 게시물은 NHN 최민호 선임님과 김부승 전임님의 HTML/CSS 기초 강의와 MDN Web Docs를 참고하여 작성하였습니다. Flexible box란? flexible box는 아이템간 공간 배분과 정렬 기능을 제공하기 위한 기능으로서, HTML5의 새로운 display 속성이다. 성능면에서도 이전 레이아웃 모델과 비교해서 렌더링 시간이 빨라졌다. 주의할 점은 부모와 자식 모두에게 속성을 부여해야 적용된다. display: flex flex-direction: 중심축 설정 flexbox의 가장 강력한 기능은 수직(column, 위-아래)과 수평(row, 좌-우) 방향으로의 자유로운 정렬이다. 정렬 방향은 flex-direction 속성을 이용해 정렬될 방향으로 중심축을 설정할 수 있다. flex-d..