CSS-L2-081 / 반응형 레이아웃

모바일 우선 카드 목록

초급

문제

.cards는 600px 이하 화면에서 Flex 세로, 그보다 넓으면 Flex 가로입니다.

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

확인할 조건

좁은 화면 · 390px
넓은 화면 · 960px

준비된 HTML

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<div class="cards"><div>첫 카드</div><div>둘째 카드</div></div>
</body>
</html>

목표 화면

힌트

좁은 화면의 조건만 미디어쿼리로 덮어쓰세요.

해설·정답 보기

두 화면 너비에서 각각 검사하므로 한쪽 배치만 맞추면 통과하지 못합니다.

.cards{display:flex;flex-direction:row;gap:16px}@media(max-width:600px){.cards{flex-direction:column}}

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

style.css화면·구조 확인

풀이 코드

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

풀이 결과

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

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

← 같은 난이도 목록