처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈

웹에서 '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를 개선합니다.

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

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

정규반 살펴보기