처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
더보기
인사이트 FAQ 유튜브 카페

로그인

| 비밀번호찾기

추가 정보 입력

서비스 이용을 위해 휴대전화 번호를 입력해주세요.

회원가입

무료 회원가입 가입비 없이 무료로 가입할 수 있습니다

이미 계정이 있으신가요?

비밀번호 찾기

퀴즈 / CSS / 문제

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

보통 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 transform 속성으로 할 수 있는 것에 해당하지 않는 것은?
CSS
CSS에서 text-decoration-thickness 속성의 역할은?
CSS
CSS oklch() 색상 함수의 특징으로 올바른 것은?
CSS
CSS isolation: isolate 속성의 용도는?
CSS
CSS의 개별 변환 속성(translate, rotate, scale)이 기존 transform 속성과 다른 점으로 올바른 것은?
CSS