CSS

lingodingo·2020년 5월 31일
0

frontend

목록 보기
3/5

1. 정의

HTML이나 XML(SVG, XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다.
CSS는 오픈 웹의 핵심 언어 중 하나이며 W3C 명세에 따라 브라우저끼리 표준을 맞춥니다. 레벨 단위로 개발한 CSS1은 더 이상 사용하지 않고, 다음 레벨인 CSS2.1은 권고안이며, 레벨보다 작은 단위인 모듈로 나뉜 CSS3은 표준화 과정을 밟고 있습니다.

2. CSS in Browser

1. Blocking Rendering

TL;DR

  1. 기본적으로, CSS는 렌더링 차단 리소스로 취급됩니다.
  2. 미디어 유형과 미디어 쿼리를 통해 일부 CSS 리소스를 렌더링을 비차단 리소스로 표시할 수 있습니다.
  3. 브라우저는 차단 동작이든 비차단 동작이든 관계없이 모든 CSS 리소스를 다운로드합니다.

기본적으로, CSS는 렌더링 차단 리소스로 취급됩니다. 즉, CSSOM이 생성될 때까지 브라우저는 처리되는 모든 콘텐츠를 렌더링하지 않습니다. CSS를 간단하게 유지하고 가능한 한 빨리 제공하고, 미디어 유형과 미디어 쿼리를 사용하여 렌더링의 차단을 해제해야 합니다.

렌더링 트리 생성에서 우리는 렌더링 트리를 생성하는 데 DOM 및 CSSOM이 둘다 필요하다는 점을 확인했습니다. 이것은 성능에 중요한 영향을 미칩니다. HTML 및 CSS는 둘다 렌더링 차단 리소스입니다.

2. Media Query & Media Type

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

미디어 쿼리는 하나의 미디어 유형과 특정 미디어 기능의 조건을 확인하는 0개 이상의 식으로 구성됩니다.

  1. 첫 번째 스타일시트 선언은 미디어 유형이나 미디어 쿼리를 제공하지 않으며, 따라서 모든 경우에 적용됩니다. 다시 말해서, 항상 렌더링을 차단합니다.
  2. 두 번째 스타일시트 선언은 콘텐츠가 인쇄될 때만 적용됩니다.
  3. 세 번째 스타일시트 선언은 브라우저가 실행하는 미디어 쿼리를 제공합니다. 조건이 일치하면 스타일시트가 다운로드되고 처리될 때까지 브라우저가 렌더링을 차단합니다.

미디어 쿼리를 사용하면 우리가 특정한 사용 사례와 동적인 조건에 맞게 뷰를 조정할 수 있습니다. 스타일시트 자산을 선언할 때 미디어 유형과 미디어 쿼리에 세심한 주의를 기울여야 합니다. 이러한 요소들은 주요 렌더링 경로의 성능에 큰 영향을 미칩니다.

profile
Frontend developer

0개의 댓글