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

CSS 속성 image-rendering의 값 중 'pixelated'의 효과는?

보통 MDN Web Docs
보기 및 정답
A 이미지를 확대할 때 안티앨리어싱 없이 픽셀이 그대로 보이도록 하여 도트 그래픽 느낌을 준다
B @supports 규칙은 JavaScript를 통해서만 해석 가능하며 순수 CSS 환경에서는 동작하지 않는다
C CSS의 clamp() 함수는 내부에 calc() 표현식을 사용할 수 없다는 제한이 있다
D overflow-x와 overflow-y를 개별 설정하면 서로 완전히 독립적으로 작동한다

해설

image-rendering: pixelated는 이미지를 확대할 때 최근접 이웃 보간법(nearest-neighbor)을 사용하여 각 픽셀의 경계를 선명하게 유지합니다. 레트로 게임 그래픽이나 QR 코드 등 픽셀이 뚜렷해야 하는 이미지에 유용합니다.

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

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

정규반 살펴보기