CSS env() 함수에서 safe-area-inset-*을 사용하는 이유로 올바른 것은?

Q: CSS env() 함수에서 safe-area-inset-*을 사용하는 이유로 올바른 것은?

노치(notch)나 둥근 모서리가 있는 기기에서 콘텐츠가 잘리지 않도록 안전 영역 여백을 적용한다 env(safe-area-inset-top) 등은 아이폰의 노치(notch), Dynamic Island, 둥근 모서리 등으로 인해 콘텐츠가 가려질 수 있는 영역의 크기를 반환합니다. padding: env(safe-area-inset-top)처럼 적용하면 모든 기기에서 콘텐츠가 안전하게 표시됩니다. 에 viewport-fit=cover를 설정해야 동작합니다.

보통 MDN Web Docs

보기 및 정답

A 노치(notch)나 둥근 모서리가 있는 기기에서 콘텐츠가 잘리지 않도록 안전 영역 여백을 적용한다

B scroll-behavior: smooth는 JavaScript의 scrollTo에는 적용되지 않는다

C @supports 규칙은 JavaScript로만 해석되며 순수 CSS로는 동작하지 않는다

D CSS의 clamp() 함수는 내부에 calc() 표현식을 사용할 수 없다는 제한이 있다

해설

env(safe-area-inset-top) 등은 아이폰의 노치(notch), Dynamic Island, 둥근 모서리 등으로 인해 콘텐츠가 가려질 수 있는 영역의 크기를 반환합니다. padding: env(safe-area-inset-top)처럼 적용하면 모든 기기에서 콘텐츠가 안전하게 표시됩니다. <meta name="viewport">에 viewport-fit=cover를 설정해야 동작합니다.

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

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

정규반 살펴보기

CSS env() 함수에서 safe-area-inset-*을 사용하는 이유로 올바른 것은?

해설

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

관련 문제

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

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