CSS-L4-091 / 종합 설계
문제은행 반응형 화면
고급문제
.layout을 700px 이하에서 한 열, 넓은 화면에서는 sidebar 200px과 나머지 본문 두 열로 만드세요. gap은 20px이고 내용 넘침을 막으세요.
준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.
확인할 조건
- 모바일 한 열 · 390px
- 데스크톱 두 열 · 960px
- 열 간격
준비된 HTML
<!doctype html> <html lang="ko"> <head><meta charset="utf-8"><title>실습</title></head> <body> <div class="layout"><aside>문제 필터</aside><main>문제 목록</main></div> </body> </html>
목표 화면
힌트
넓은 화면의 고정 열과 유동 열을 분리하세요.
해설·정답 보기
minmax(0,1fr)와 자식 min-width:0으로 긴 내용의 최소 너비가 레이아웃을 밀지 않게 합니다.
.layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px}.layout>*{min-width:0}@media(max-width:700px){.layout{grid-template-columns:minmax(0,1fr)}}style.css화면·구조 확인
코드는 이 브라우저에 자동 저장돼요.
풀이 결과
코드를 작성하고 채점하기를 눌러보세요.
학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.