Add Korean literature puzzle, make it the default tab
site/korean.html 을 추가하고 셸의 첫 탭이자 기본값으로 두었다. 한글 사이트이니 빈 해시로 들어오면 한국 문학이 열리는 편이 자연스럽다. 9x9 41칸 15항목으로 다섯 편 중 항목이 가장 많다. 근현대 주류 정전으로만 골라 1917년 《무정》(영채)에서 한강 《채식주의자》까지 걸친다. 나도향 · 염상섭 · 이광수 · 이효석 · 현진건 · 채만식 · 이상 · 황순원 · 전광용 · 이청준 · 황석영 · 조세희 · 이문열. 탭이 다섯이 되어 560px 이하에서는 탭 이름의 '문학'을 접고 나라 이름만 남긴다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -9,19 +9,21 @@
|
||||
|
||||
| 탭 | 경로 | 격자 | 항목 |
|
||||
|---|---|---|---|
|
||||
| 한국 문학 | `/korean.html` | 9 × 9 · 41칸 | 15 |
|
||||
| 러시아 문학 | `/russian.html` | 9 × 9 · 40칸 | 13 |
|
||||
| 영국 문학 | `/british.html` | 9 × 9 · 39칸 | 12 |
|
||||
| 독일 문학 | `/german.html` | 9 × 9 · 41칸 | 14 |
|
||||
| 일본 문학 | `/japanese.html` | 9 × 9 · 44칸 | 14 |
|
||||
|
||||
각 페이지는 단독으로 열어도 동작한다. 셸(`/`)의 탭은 해시로 상태를 남기므로
|
||||
`/#russian`, `/#british`, `/#german`, `/#japanese` 로 바로 들어갈 수 있고, 탭을 다시 눌러도 풀던 내용은 유지된다.
|
||||
기본으로 열리는 탭은 한국 문학이다. 각 페이지는 단독으로 열어도 동작한다. 셸(`/`)의 탭은 해시로 상태를 남기므로
|
||||
`/#korean`, `/#russian`, `/#british`, `/#german`, `/#japanese` 로 바로 들어갈 수 있고, 탭을 다시 눌러도 풀던 내용은 유지된다.
|
||||
|
||||
## 구성
|
||||
|
||||
| 경로 | 설명 |
|
||||
|---|---|
|
||||
| `site/index.html` | 셸 — 왼쪽 탭(좁은 화면에서는 위쪽 탭) + 게임을 띄우는 iframe |
|
||||
| `site/korean.html` | 한국 문학 편 (머리말 + 퍼즐 데이터) — 기본 탭 |
|
||||
| `site/russian.html` | 러시아 문학 편 (머리말 + 퍼즐 데이터) |
|
||||
| `site/british.html` | 영국 문학 편 (머리말 + 퍼즐 데이터) |
|
||||
| `site/german.html` | 독일 문학 편 (머리말 + 퍼즐 데이터) |
|
||||
|
||||
+14
-8
@@ -104,8 +104,9 @@ body{
|
||||
/* 아주 좁은 화면: 탭이 셋 이상이면 상표를 접고 탭에 폭을 몰아 준다 */
|
||||
@media (max-width:560px){
|
||||
.brand{display:none}
|
||||
.nav a{padding:10px 6px}
|
||||
.nav a .kr{font-size:13px}
|
||||
.nav a{padding:10px 4px}
|
||||
.nav a .kr{font-size:13px;white-space:nowrap}
|
||||
.nav a .suffix{display:none} /* 탭이 다섯이면 나라 이름만 남긴다 */
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
*{animation:none !important;transition:none !important}
|
||||
@@ -122,26 +123,30 @@ body{
|
||||
|
||||
<div class="nav">
|
||||
<div class="label">문학 편</div>
|
||||
<a href="korean.html" target="stage" data-key="korean">
|
||||
<span class="kr">한국<span class="suffix"> 문학</span></span>
|
||||
<span class="og">Korean literature</span>
|
||||
</a>
|
||||
<a href="russian.html" target="stage" data-key="russian">
|
||||
<span class="kr">러시아 문학</span>
|
||||
<span class="kr">러시아<span class="suffix"> 문학</span></span>
|
||||
<span class="og">Русская литература</span>
|
||||
</a>
|
||||
<a href="british.html" target="stage" data-key="british">
|
||||
<span class="kr">영국 문학</span>
|
||||
<span class="kr">영국<span class="suffix"> 문학</span></span>
|
||||
<span class="og">British literature</span>
|
||||
</a>
|
||||
<a href="german.html" target="stage" data-key="german">
|
||||
<span class="kr">독일 문학</span>
|
||||
<span class="kr">독일<span class="suffix"> 문학</span></span>
|
||||
<span class="og">Deutsche Literatur</span>
|
||||
</a>
|
||||
<a href="japanese.html" target="stage" data-key="japanese">
|
||||
<span class="kr">일본 문학</span>
|
||||
<span class="kr">일본<span class="suffix"> 문학</span></span>
|
||||
<span class="og">日本文学</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="rail-foot">
|
||||
<a id="popout" href="russian.html" target="_blank" rel="noopener">새 창에서 열기 ↗</a>
|
||||
<a id="popout" href="korean.html" target="_blank" rel="noopener">새 창에서 열기 ↗</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -153,12 +158,13 @@ body{
|
||||
"use strict";
|
||||
|
||||
var PAGES = {
|
||||
korean: {file:'korean.html', name:'한국 문학'},
|
||||
russian: {file:'russian.html', name:'러시아 문학'},
|
||||
british: {file:'british.html', name:'영국 문학'},
|
||||
german: {file:'german.html', name:'독일 문학'},
|
||||
japanese:{file:'japanese.html', name:'일본 문학'}
|
||||
};
|
||||
var DEFAULT = 'russian';
|
||||
var DEFAULT = 'korean';
|
||||
|
||||
var stage = document.getElementById('stage');
|
||||
var popout = document.getElementById('popout');
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>가로세로 낱말풀이 · 한국 문학</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gothic+A1:wght@300;500;700;900&family=Nanum+Myeongjo:wght@400;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/crossword.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<header class="head">
|
||||
<div class="eyebrow">한국 근현대문학 · 9 × 9</div>
|
||||
<h1>한국 문학<em>가로세로 낱말풀이</em></h1>
|
||||
<div class="meta">
|
||||
<div><b id="timer">00:00</b><span>경과 시간</span></div>
|
||||
<div><b id="progress">0/41</b><span>채운 칸</span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="stage">
|
||||
<section>
|
||||
<div class="cluebar">
|
||||
<span class="cb-num" id="cbNum">–</span>
|
||||
<span class="cb-dir" id="cbDir">가로</span>
|
||||
<span class="cb-text" id="cbText">칸을 눌러 시작하세요.</span>
|
||||
</div>
|
||||
|
||||
<div class="board-frame">
|
||||
<div class="board" id="board" role="grid" aria-label="가로세로 낱말풀이 격자"></div>
|
||||
<input id="ime" type="text" lang="ko" inputmode="text"
|
||||
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
|
||||
aria-label="글자 입력">
|
||||
</div>
|
||||
|
||||
<div class="tools">
|
||||
<button type="button" data-act="flip">가로 ↔ 세로</button>
|
||||
<button type="button" data-act="check">검사</button>
|
||||
<button type="button" data-act="hint">이 칸 힌트</button>
|
||||
<button type="button" data-act="reveal">정답 보기</button>
|
||||
<button type="button" data-act="clear">전부 지우기</button>
|
||||
</div>
|
||||
|
||||
<p class="tip">
|
||||
같은 칸을 한 번 더 누르면 가로 ↔ 세로가 바뀌고, 오른쪽 단서도 그에 맞춰 바뀝니다.<br>
|
||||
<kbd>화살표</kbd> 이동 · <kbd>Space</kbd> 방향 전환 · <kbd>Tab</kbd> 다음 단어 · <kbd>Backspace</kbd> 지우고 뒤로
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<aside>
|
||||
<section class="cluegroup">
|
||||
<h2>가로 열쇠</h2>
|
||||
<ol id="listA"></ol>
|
||||
</section>
|
||||
<section class="cluegroup">
|
||||
<h2>세로 열쇠</h2>
|
||||
<ol id="listD"></ol>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="done" id="done" hidden>
|
||||
<span id="doneMsg">전부 맞혔습니다.</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const PUZZLE = {"size": 9, "grid": [["벙", "어", "리", "삼", "룡", "이", null, null, "젊"], [null, null, null, "대", null, "광", null, null, "은"], ["난", "장", "이", null, "운", "수", "좋", "은", "날"], [null, null, "효", null, null, null, null, null, "의"], [null, "황", "석", "영", null, "채", null, null, "초"], [null, "순", null, "채", "만", "식", null, "이", "상"], [null, "원", null, null, null, "주", null, "인", null], [null, null, "당", "신", "들", "의", "천", "국", null], [null, null, null, null, null, "자", null, null, null]], "nums": [[1, 0, 0, 2, 0, 3, 0, 0, 4], [0, 0, 0, 0, 0, 0, 0, 0, 0], [5, 0, 6, 0, 7, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 8, 0, 9, 0, 10, 0, 0, 0], [0, 0, 0, 11, 0, 0, 0, 12, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 13, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0]], "entries": [{"num": 1, "dir": "A", "r": 0, "c": 0, "answer": "벙어리삼룡이", "clue": "말 못 하는 하인이 불 속으로 뛰어드는 이야기", "kind": "작품"}, {"num": 2, "dir": "D", "r": 0, "c": 3, "answer": "삼대", "clue": "조의관에서 덕기까지 세 세대의 어긋남을 그린 장편", "kind": "작품"}, {"num": 3, "dir": "D", "r": 0, "c": 5, "answer": "이광수", "clue": "《무정》으로 근대 장편소설의 문을 연 작가", "kind": "작가"}, {"num": 4, "dir": "D", "r": 0, "c": 8, "answer": "젊은날의초상", "clue": "방황하는 청년의 세 시절을 그린 연작 장편", "kind": "작품"}, {"num": 5, "dir": "A", "r": 2, "c": 0, "answer": "난장이", "clue": "개발 시대의 그늘에 선, 조세희 연작의 표제 인물", "kind": "인물"}, {"num": 6, "dir": "D", "r": 2, "c": 2, "answer": "이효석", "clue": "《메밀꽃 필 무렵》의 작가", "kind": "작가"}, {"num": 7, "dir": "A", "r": 2, "c": 4, "answer": "운수좋은날", "clue": "비 오는 날 인력거를 끌고 벌이가 좋았던 김첨지의 하루", "kind": "작품"}, {"num": 8, "dir": "A", "r": 4, "c": 1, "answer": "황석영", "clue": "《장길산》 《삼포 가는 길》의 작가", "kind": "작가"}, {"num": 8, "dir": "D", "r": 4, "c": 1, "answer": "황순원", "clue": "《소나기》 《학》을 쓴 절제된 문장의 작가", "kind": "작가"}, {"num": 9, "dir": "D", "r": 4, "c": 3, "answer": "영채", "clue": "무정에서 이형식을 기다리다 길을 떠난 여인", "kind": "인물"}, {"num": 10, "dir": "D", "r": 4, "c": 5, "answer": "채식주의자", "clue": "고기를 끊은 여자와 그 주변이 무너지는 연작", "kind": "작품"}, {"num": 11, "dir": "A", "r": 5, "c": 3, "answer": "채만식", "clue": "《탁류》 《태평천하》의 풍자 작가", "kind": "작가"}, {"num": 12, "dir": "A", "r": 5, "c": 7, "answer": "이상", "clue": "〈오감도〉와 〈날개〉를 남긴 1930년대의 모던보이", "kind": "작가"}, {"num": 12, "dir": "D", "r": 5, "c": 7, "answer": "이인국", "clue": "시대마다 편을 갈아타 살아남은 꺼삐딴 리의 의사", "kind": "인물"}, {"num": 13, "dir": "A", "r": 7, "c": 2, "answer": "당신들의천국", "clue": "나환자 섬에 낙원을 세우려는 원장과 사람들", "kind": "작품"}]};
|
||||
</script>
|
||||
<script src="assets/crossword.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user