CSS @font-face에서 font-display 속성의 'swap' 값이 의미하는 것은?

Q: CSS @font-face에서 font-display 속성의 'swap' 값이 의미하는 것은?

웹 폰트 로딩 전에는 대체 폰트를 먼저 보여주고, 로딩 완료 시 웹 폰트로 교체한다 font-display: swap은 웹 폰트 다운로드 중에도 대체 폰트(fallback)로 텍스트를 즉시 표시하고, 웹 폰트가 준비되면 교체합니다. 이를 통해 FOIT(Flash of Invisible Text) 현상을 방지하고 사용자 경험을 개선합니다.

보통 MDN Web Docs

보기 및 정답

A 웹 폰트 로딩 전에는 대체 폰트를 먼저 보여주고, 로딩 완료 시 웹 폰트로 교체한다

B font-display: swap은 웹 폰트 로딩 중 텍스트를 아예 숨기는 전략이다

C vertical-align 속성은 블록 요소의 수직 정렬에 사용할 수 있는 속성이다

D display: contents를 적용하면 자식 요소도 함께 레이아웃에서 제거된다

해설

font-display: swap은 웹 폰트 다운로드 중에도 대체 폰트(fallback)로 텍스트를 즉시 표시하고, 웹 폰트가 준비되면 교체합니다. 이를 통해 FOIT(Flash of Invisible Text) 현상을 방지하고 사용자 경험을 개선합니다.

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

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

정규반 살펴보기

CSS @font-face에서 font-display 속성의 'swap' 값이 의미하는 것은?

해설

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

관련 문제

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

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