웹에서 'Critical CSS'란 무엇인가요?

어려움 freeCodeCamp

보기 및 정답

A 초기 뷰포트에 보이는 콘텐츠(Above-the-fold)를 렌더링하는 데 필요한 최소한의 CSS를 인라인으로 삽입하는 최적화 기법이다

B CSS 파일의 문법 에러를 자동으로 검출하고 수정 제안을 제공하는 린팅(linting) 도구로, 빌드 파이프라인에 통합된다

C 웹 프로젝트에서 반드시 사용해야 하는 필수 CSS 속성(display, position, box-sizing 등)의 목록을 정의한 표준이다

D 웹 애플리케이션의 보안에 중요한 CSS 설정(Content-Security-Policy 관련 스타일 제한)을 정의하는 보안 가이드이다

해설

Critical CSS는 페이지 로드 시 처음 화면에 보이는 부분을 렌더링하는 데 필요한 CSS만 <style> 태그로 HTML에 인라인 삽입하고, 나머지 CSS는 비동기로 로드하는 기법입니다. 렌더링 차단(render-blocking)을 줄여 FCP와 LCP를 개선합니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

웹에서 'Critical CSS'란 무엇인가요?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

시장과 사람의 답을 봤다면,다음 결과물의 구조를 고릅니다.

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.