CSS-L4-031 / 고급 반응형

컨테이너 단위 리듬

고급

문제

.host를 inline-size 컨테이너로 지정하고 .title의 글꼴 크기를 10cqw로 설정하세요. 컨테이너 폭 300px에서는 30px, 600px에서는 60px입니다.

준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.

확인할 조건

작은 컨테이너 글꼴 · 300px
큰 컨테이너 글꼴 · 600px

준비된 HTML

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<div class="host"><h1 class="title">가변 제목</h1></div>
</body>
</html>

목표 화면

힌트

cqw는 컨테이너 너비의 1퍼센트입니다.

해설·정답 보기

측정 가능한 조상 컨테이너를 명시해야 뷰포트 크기에 의존하지 않습니다.

body{margin:0}.host{container-type:inline-size}.title{font-size:10cqw}

모르는 문법은 코드 사전에서 ↗

style.css화면·구조 확인

풀이 코드

코드는 이 브라우저에 자동 저장돼요.

풀이 결과

코드를 작성하고 채점하기를 눌러보세요.

학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.

← 같은 난이도 목록 다음 문제: 문제은행 반응형 화면 →