위의 사진은 반응형 웹으로 만들어졌다.
우선 반응형 웹을 만들기 전에,
브라우저 렌더링 과정을 한 번 살펴보자면,
렌더링 과정 🐦
- 사용자가 브라우저를 통해 접속하면
- 브라우저는 html, css, js같은 리소스를 다운받는다
- 렌더링 엔진은 html 문서를 파싱해 dom트리를 만든다
- 외부 css 파일과 스타일요소를 파싱 후 cssom 트리를 만든다
- dom + cssom 트리를 결합해 트리를 구축
- 레이아웃 과정을 통해 각 요소를 어디에 배치할지 결정
- paint (ui 백엔드에서 render트리를 화면에 그리는 과정)
파싱이란? 🐤
프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문분석을 하는것!
파서는 html 파일의 코드를 문법적 의미를 갖는 최소 단위인 token으로 분해하고,
이 토큰들을 모아서 노드 라는 요소로 만든다.
노드들은 모여서 상하 관계에 따라 트리를 혀엉하는데, 이것은 파스 트리 혹은 문법 트리로 부른다.
그렇다면 문서파싱이란? 🐧
브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것.
- html로 dom 트리를 구축하고
- css로 cssom 트리를 만드는 것!
( 렌더링에서의 ) 레이아웃
-
렌더 트리를 기반으로 html 요소의 레이아웃을 계산하여 브라우저 화면 어디에 배치할지 결정하는것
-
렌더 트리를 위에서부터 아래로 읽어가면서 절대적 단위인 px 값으로 변환한다.
페인팅
- 레이아웃에서 결정된 대로 그림을 그리는것!
리플로우와 리페인트에 대해 알아보자
리플로우
- 렌더링 과정의 레이아웃을 반복해 수행하는 것
리페인트
- 페인트 과정을 반복해서 수행하는 것
초당 60 프레임을 지켜라
최적화하려면 불필요한 레이아웃을 줄일 필요가 있다.
DOM은 변경되면 렌더 트리를 다시 구축하기 때문에, 변경될때마다 리플로우, 리페인트를 다시 한다.
리플로우를 많이 하면 배치연산을 많이하게 되고 => cpu를 많이 차지하게된다.
리페인트를 많이 하면 다시 화면에 찍어그려야 되므로 => gpu를 많이 차지하게된다.
css에서 레이아웃과 페인트를 발생시키는 속성들을 주의하고 최적화된 세팅으로 만들자!
리페인트가 일어나는 대표적인 css 속성
리플로우가 일어나는 대표적인 css 속성
미디어쿼리
- 뷰포트에 따라 다른 조판을 생성할 수 있다! 🐼
미디어 쿼리를 적용하는 두 가지 방법!
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">
//head 태그안에 link 태그를 위치시킨다.
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
/* 여기 css를 작성합니다. */
</style>
//head 안에서 style 태그를 열어서 작성
실제 미디어 쿼리 작성 예제
위의 작성 예제를 참고하여 반응형 웹을 만들어 보았다.
App.js에 컴포넌트에 따른 미디어쿼리를 각각 작성해주었다.
const BREAK_POINT_PC = 1200;
@media only screen and (min-width: ${BREAK_POINT_PC}px) {
//컴포넌트에 따른 css작성
}
//1200px 이상의 창일때 반응하는 미디어쿼리를 작성했다.-
브라우저가 1200px 이상일때 네비게이션 바가 오른쪽에 위치한다.
-
1200px 미만이면 네비게이션이 아래로 정렬된다.
