학급 진도 대시보드 만들기
학생 진도 추적기
모든 학생의 현황을 한눈에 파악하는 것은 교사에게 가장 강력한 도구 중 하나입니다. 깔끔한 진도 대시보드는 숫자로 가득한 스프레드시트를 몇 초 만에 읽을 수 있는 화면으로 바꿔 줍니다. 이 레슨에서는 AI의 안내를 받으며 단계별로 대시보드를 만들어 봅니다.
학생 목록을 표시하고, 각 학생의 진도를 시각적인 막대로 보여 주며, 상태 배지를 달아 누가 잘 따라오고 있는지, 누가 도움이 필요한지 즉시 확인할 수 있는 표를 만들 거예요. 어떤 학급, 어떤 과목에도 응용할 수 있는 도구입니다.
단계를 따라가며 실시간 미리보기를 확인하면, 월요일 아침에 바로 쓸 수 있는 대시보드가 완성됩니다!
안내
'Class Progress'라는 텍스트가 담긴 대시보드 제목을 rounded-xl 카드 컨테이너 안에 추가하세요.
힌트: `<h1>Class Progress</h1>`을 `<div class="... rounded-xl ...">` 안에 감싸 보세요.
어디에 작성하나요?
<!-- Build your class progress dashboard here -->11번째 줄에 작성하세요 — 그 주석 아래, 이미 추가한 코드 다음입니다.
Student, Progress, Status 열 헤더가 있는 표를 만드세요.
각 학생 행에 진도를 나타내는 초록색 채우기 div가 있는 진도 막대를 추가하세요. 너비는 진도율을 반영해야 합니다.
각 행에 span을 사용해 상태 배지를 추가하세요. 최소 하나는 'On Track'이라고 표시되어야 합니다.
내 코드
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: 'Class Progress'라는 텍스트가 담긴 대시보드 제목을 rounded-xl 카드 컨테이너 안에 추가하세요.