무엇을 먼저 읽어야 하는지 보이게 합니다
글의 역할을 구분하면 수업을 따라가면서 필요한 부분을 다시 찾을 수 있습니다.
한 절에서는 하나의 개념이나 단계를 다룹니다.
설명으로 이해하고, 예시와 실행으로 확인하고, 짧은 기준으로 기억합니다.
이 페이지 자체가 공통 스타일을 사용하는 예시입니다. 게임엔진 7주차에서 사용한 학습 위계를 과목이나 주차 이름에 묶이지 않는 구성으로 정리했습니다.
제목과 도입문
제목은 배울 내용을 짧게 말하고, 바로 아래의 도입문은 왜 읽거나 무엇을 확인할지 알려 줍니다. 본문에서 개념과 판단의 이유를 설명한 뒤 예시로 넘어갑니다.
글씨와 여백
전체 제목은 최대 64px, 절 제목은 23px, 소제목은 19px입니다. 본문은 15.5px와 1.78의 줄 간격을 사용합니다. 절 사이는 넓게, 제목과 도입은 가깝게 묶습니다.
표와 도해는 설명을 돕습니다
비교와 순서가 더 잘 보일 때만 사용합니다.
표는 반복해서 찾아볼 조건이나 차이를 정리합니다. 낮은 대비의 머리글과 작은 글씨로 본문을 보조합니다.
| 역할 | 표현 | 읽는 목적 |
|---|---|---|
| 설명 | 본문 문단 | 개념과 이유 이해 |
| 참고 | 옅은 표와 도해 | 조건과 차이 비교 |
| 실행 | 코드 패널 | 설명한 동작 확인 |
- 설명개념과 입력을 이해
- 예시구체적인 경우와 비교
- 실행코드와 실제 출력 확인
- 판단확인한 것과 다음 질문
코드와 요청문, 결과를 구분합니다
어디에 입력하고 무엇이 나와야 하는지 함께 표시합니다.
아래 코드는 세 개의 이름을 담은 목록에서 항목 수를 확인합니다. 실행할 코드는 어두운 패널에 두고, 실제 출력은 그 아래에 분리합니다.
places = ["도서관", "미술관", "공연장"]
print(len(places))3
3은 예시 목록의 항목 수입니다. 이 출력이 실제 도시의 시설 수를 나타내는 것은 아닙니다.
목록의 항목 수를 확인했어.
이 숫자가 말해 주는 것과 아직 알 수 없는 것을 구분하자.
다음에 확인할 질문 두 가지를 제안해줘.질문으로 확인하고 짧게 남깁니다
핵심 설명을 읽은 뒤 스스로 답해 볼 질문을 둡니다.
펼침 영역에는 해설이나 선택 참고 내용을 둡니다. 수업을 이해하는 데 꼭 필요한 설명은 본문에서 바로 읽을 수 있게 합니다.
목록의 항목 수와 실제 시설 수는 같을까요?
이 예시는 임의로 작성한 세 항목의 목록입니다. 실제 시설 수를 말하려면 출처, 수집 범위, 중복 여부와 기록 단위를 확인해야 합니다.
실행이 끝났는지와 결과를 어떻게 해석할지는 각각 확인합니다.
같은 구조를 다음 주차에도 사용합니다
내용을 바꾸고 공통 스타일 연결을 유지합니다.
아래 문서는 과목별 CSS 없이 작동하는 최소 예시입니다. 제목과 설명을 바꾸고 필요한 예시·코드·질문을 절 안에 추가합니다. 공통 CSS는 기존 기본 스타일과 주차별 CSS 뒤에 불러옵니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>자료를 읽고 질문하기 | 수업명</title>
<link rel="stylesheet" href="/assets/teaching.css?v=teaching1">
<link rel="stylesheet" href="/assets/accessibility.css">
<link rel="stylesheet" href="/assets/lesson-handout.css?v=2">
</head>
<body class="teaching-document lesson-handout" data-handout="v1">
<a class="skip-link" href="#main-content">본문 바로가기</a>
<header class="hero"><div class="hero-inner"><div>
<p class="eyebrow">수업명 / 주차 / 교시</p>
<h1>자료를 읽고 질문합니다</h1>
<p class="lead">실제 기록에서 확인할 질문을 고릅니다.</p>
</div></div></header>
<main id="main-content" class="layout">
<article class="article">
<section class="handout-section" aria-labelledby="read-data">
<header>
<h2 id="read-data">기록의 단위를 확인합니다</h2>
<p class="handout-intro">한 행이 무엇을 나타내는지 설명합니다.</p>
</header>
<p>한 행이 시설 하나인지, 방문 한 번인지에 따라 개수의 의미가 달라집니다.</p>
<div class="handout-takeaway">
<strong>기억할 기준</strong>
<p>개수를 해석하기 전에 기록의 단위를 확인합니다.</p>
</div>
</section>
</article>
<details class="handout-toc" open>
<summary class="toc-title">이 페이지의 목차</summary>
<nav aria-label="단원 바로가기"><ol class="handout-toc-groups">
<li><span class="handout-toc-label">자료 읽기</span><ol>
<li><a href="#read-data">기록의 단위</a></li>
</ol></li>
</ol></nav>
</details>
</main>
<script src="/assets/lesson-handout.js?v=2" defer></script>
<script src="/assets/details-motion.js" defer></script>
</body>
</html>Python 생성기는 scripts/lesson_handout.py의 section()과 toc()를 사용할 수 있습니다. 기존 교안은 scripts/apply-contents-handout.py로 변환하고 검사합니다. 콘텐츠 프로그래밍 전체 45개 교안이 같은 공통 스타일을 사용합니다.
공통 규칙과 수업 고유 요소를 나눕니다
주차별 파일에는 그 수업의 도해와 상호작용만 둡니다.
- 공통 스타일에서 제목·도입·본문·표·코드·확인·목차의 크기와 간격을 관리합니다.
- 목차는 주제별로 묶고 본문 순서대로 연결합니다. 번호는 실제 실행 순서가 필요할 때만 사용합니다.
- 코드, AI 요청문, 출력은 역할에 맞는 클래스를 선택합니다. 모든 절에 모든 요소를 넣지는 않습니다.
- 휴대폰 화면에서도 본문은 가로로 밀리지 않고, 넓은 표는 표 안에서 스크롤합니다.
- 수정 후 목차 이동, 키보드, 복사, 접힘과 기존 실습 기능을 확인합니다.