CSS-L3-011 / 컨테이너 쿼리
카드 컨테이너 설정
중급문제
.host를 inline-size 컨테이너로 만드세요. 폭 280px에서는 .card가 column, 700px에서는 row가 되도록 500px 기준 컨테이너 쿼리를 작성하세요.
준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.
확인할 조건
- 작은 컨테이너 · 280px
- 큰 컨테이너 · 700px
- 컨테이너 타입
준비된 HTML
<!doctype html> <html lang="ko"> <head><meta charset="utf-8"><title>실습</title></head> <body> <div class="host"><div class="card"><span>설명</span><button>확인</button></div></div> </body> </html>
목표 화면
힌트
뷰포트 대신 조상 컨테이너의 너비를 기준으로 하세요.
해설·정답 보기
container-type으로 측정 대상을 만들고 @container에서 자식 배치를 변경합니다.
.host{container-type:inline-size}.card{display:flex;flex-direction:column}@container(min-width:500px){.card{flex-direction:row}}style.css화면·구조 확인
코드는 이 브라우저에 자동 저장돼요.
풀이 결과
코드를 작성하고 채점하기를 눌러보세요.
학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.