/* ═══════════════════════════════════════════════════════════════ 🔤 세종 표 그리기 — ㅅ표(θ) · ㄷ표(ð) · ㄹ표(r) 원장 정함 2026-08-31 (my_memo/소리글자_구성_20260830.md §2-4) ① 「ㅅ [θ] — 위 선 아래선 사이에 ㅅ」 ② 「ㄷ [ð] — 위 선 아래선 사이에 ㄷ」 → 획을 «왼쪽 밖» 으로 ③ 「ㄹ [l] 에는 한국어처럼, ㄹ [r] 은 동그라미 안에 ㄹ」 ■ 왜 글꼴이 아니라 그림인가 ㆄ·ㅸ·ㅿ 는 세종이 만들어 둔 것이라 유니코드 번호가 있지만, ㅅ·ㄷ·ㄹ 의 표는 2026-08-31 에 새로 지은 것이라 «칠» 수가 없습니다. 글꼴을 지으면 그 글꼴이 없는 기기에서 깨집니다. 줄·획·동그라미를 CSS 로 얹으면 어디서나 나오고, 글자 크기를 따라 같이 커집니다. ■ 줄은 글자 폭의 «절반쯤» — 넓게 그으면 글자에 붙은 획처럼 보입니다 (78% 로 그었다가 48% 로 줄인 자리입니다). ■ ㄷ 만 획을 «밖» 으로 빼는 까닭 ★ ㅅ 은 위아래에 줄을 얹어도 다른 글자가 안 됩니다. 그런데 ㄷ 은 윗줄 하나만 붙어도 그대로 «ㅌ» 입니다 — 아이가 they 를 「테이」로 읽게 됩니다. ㅌ 은 획이 «안», 이것은 «밖». 그 하나로 갈립니다. 겸해서 「혀가 이 사이로 나온」 그림도 됩니다. ■ 쓰는 법 ㅅ ㄷ ㄹ 한 글자로 합쳐진 것에도 그대로 씌웁니다 — 데이 ═══════════════════════════════════════════════════════════════ */ .소리표{ position: relative; display: inline-block; line-height: 1; font-style: normal; } /* ── θ · ㅅ 위아래에 짧은 줄 ────────────────────────────────────── 두 줄은 «윗니·아랫니», 그 사이에 낀 것이 «혀» 입니다 */ .소리표.ㅅ::before, .소리표.ㅅ::after{ content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: .48em; /* ★ 글자 폭의 절반쯤 — 넓히지 마세요 */ height: .055em; min-height: 1px; background: currentColor; border-radius: 1px; } .소리표.ㅅ::before{ top: -.13em; } .소리표.ㅅ::after { bottom: -.13em; } /* ── ð · ㄷ 가운데 획이 «왼쪽 밖» 으로 이어져 나옴 ──────────────── ㅌ 은 획이 안, 이것은 밖. 그 하나로 갈립니다 */ /* ★ 획이 왼쪽 «밖» 으로 나오므로 그만큼 자리를 비워 둡니다. 안 비우면 낱말 가운데에서 앞 글자에 먹힙니다 — together 의 «더» 가 앞의 «게» 와 겹쳐 표가 통째로 안 보였습니다 (2026-09-08 에 잡음). */ .소리표.ㄷ{ margin-left: .26em; } .소리표.ㄷ::before{ content: ''; position: absolute; /* ★ 왼쪽 «밖» 으로 나옵니다 — 떠.png 에서 이 획은 글자 몸통보다 왼쪽으로 한참 나와 있습니다. 안으로 들어가면 그냥 ㅌ 입니다. */ left: -.22em; /* ★ 글자 상자의 한가운데가 아니라 «ㄷ 세로줄» 의 한가운데입니다. 한글 낱자는 상자 아래쪽에 앉으므로 50% 로 두면 획이 위로 뜹니다 (원장이 보낸 떠.png 와 견주어 58% 로 내렸습니다). */ top: 58%; transform: translateY(-50%); /* ★ 굵기 — 떠.png 에서 이 획은 ㄷ 의 «검은 획과 같은 굵기» 입니다 (글자 높이의 1/6쯤). 한때 .075em 짜리 실선으로 그렸다가 원장이 보낸 그림과 견주어 굵혔습니다 (2026-09-08). 얇으면 밑줄처럼 보이고, 굵어야 «획» 으로 읽힙니다. */ width: .52em; height: .13em; min-height: 3px; /* ★ 먹으로 찍습니다 (원장 정함 2026-09-08 — 「먹으로 가 주세요」). 떠.png 에서는 이 획이 빨갛지만, 그건 «어느 획을 더한 것인지» 보여 주려고 그리신 것입니다. 판에서는 빨강이 이미 악센트 몫이고 (2026-09-07 「악센트가 들어가면 빨간색」), 그것도 홀소리에만 붙습니다. 소리표까지 빨강이면 ㅁ어ㅅ(mouth)·ㄷ이ㅅ(this) 처럼 겹치는 자리에서 아이가 「여기가 센 칸」 으로 읽습니다. 색은 한 뜻만 지녀야 합니다 — 빨강은 «힘», 먹은 «소리». */ background: currentColor; border-radius: .01em; } /* ══ ð · ㄷ표를 «끊어» 그립니다 (원장 그림 2026-09-08) ═══════════════ 원장이 그려 보내신 꼴 — ⌈ — L ㄷ 을 위아래로 «끊고» 그 사이로 획이 왼쪽 밖으로 지나갑니다. ■ 왜 얹는 것으로는 모자란가 위의 .소리표.ㄷ 는 글꼴의 ㄷ 에 획만 «얹는» 것입니다. 그러면 세로줄이 이어진 채라 획 하나만 더해진 ㅌ 으로 읽힙니다. 빨강일 때는 색이 갈라 줬는데 먹으로 정하고 나니(2026-09-08) 붙어 보였습니다. 끊어야 «다른 글자» 가 됩니다. ■ 그래서 글자를 통째로 그립니다 mask 로 그리므로 빛깔은 currentColor 를 따라가고, 크기는 font-size 를 따라 같이 커집니다. 글꼴이 없는 기기에서도 같습니다. ■ ★ 그린 글자라 뒤 홀소리와 «못 합쳐집니다» ㆄ·ㅸ·ㅿ 와 같은 자리입니다 — ㆄㅐㄴ 처럼 갈라 적습니다. they ㄷ표 ㅔ이 this ㄷ표 ㅣㅅ the ㄷ표 ㅓ 원장이 손으로 적어 두신 「ㄷㅔ이」·「ㅅㅣㅇㅋ」·「ㄹㅏ이ㅅ」 이 이미 이 꼴이었습니다 — 기계만 「데이」로 합치고 있었습니다. ■ 쓰는 법 ㅔ이 (글자 없이 빈 span) ═══════════════════════════════════════════════════════════════ */ .ㄷ표{ display: inline-block; width: .78em; height: 1em; vertical-align: -.13em; margin-left: .16em; /* 왼쪽으로 나온 획이 앉을 자리 */ background: currentColor; -webkit-mask: var(--ㄷ표그림) no-repeat center/contain; mask: var(--ㄷ표그림) no-repeat center/contain; } :root{ /* 위 조각 · 획 · 아래 조각 — 사이의 «틈» 이 이 글자의 전부입니다. 틈을 좁히면 ㅌ 으로 보입니다 (43-29=14 · 71-57=14 를 지킬 것) */ --ㄷ표그림: url('data:image/svg+xml;utf8,'); } /* ── r · 동그라미로 둘러 «띄운» ㄹ ──────────────────────────────── 혀가 어디에도 안 닿고 떠 있다는 그림입니다. [l] 에는 표가 없습니다 — rice ↔ lice 가 덩어리째 갈립니다 */ .소리표.ㄹ{ border: .05em solid currentColor; border-radius: 50%; padding: .10em .13em; margin: 0 .04em; } /* 크게 보여 줄 때 — 검사지·칠판용 */ .소리표.큼{ font-size: 1.5em; } /* ── 🔴 악센트 — 힘이 들어가는 칸 (원장 지시 2026-09-07) ────────────── 「악센트가 들어가면 빨간색으로 표시해 주세요」 영어는 힘을 어디에 주느냐로 낱말이 갈립니다. 우리 아이들은 소리를 «다 고르게» 내서 원어민이 못 알아듣는 일이 많습니다 — 그 자리를 눈으로 보이게 합니다. 바탕 문서의 적는 법 6 「센 칸은 크게, 약한 칸은 작게」 와 같은 자리이니, 색과 크기를 함께 씁니다. 센 — 가장 센 칸 (발음사전의 1) 조금 — 그다음 센 칸 (발음사전의 2) ★ 액센트는 «홀소리» 에만 붙습니다 (원장 바로잡음 2026-09-07 — 「리메ㅁ버 — ㅁ 은 액센트 안 들어감. 액센트는 모음만 해당」). 한때 「cat 캐ㅌ — 캐 다음이라도 빨간색」 을 «음절 통째» 로 읽고 끝소리 닿소리까지 넓혔다가 물렸습니다. cat 의 «캐» 가 빨간 것은 그 안에 홀소리 ㅐ 가 들어 있어서지 음절이라서가 아닙니다. cat «캐»ㅌ · fan ㆄ«ㅐ»ㄴ · remember 리«메»ㅁ버 겹홀소리는 «앞만» 빨갛습니다 (원장 2026-09-07 「어바우ㅌ — 바 는 길게, 우는 아님」). 길게 끄는 것은 앞이고 꼬리는 짧게 스칩니다 — about 어«바»우ㅌ · like «라»이ㅋ · play ㅍ«레»이 다만 «약한» 칸은 꼬리까지 다 흐립니다. 힘이 빠진 것은 통째로 빠지니까요 — video 디«오우» · yellow 로«우» */ .센, .조금, .약{ font-style: normal; display: inline-block; } .센{ color: #C62828; /* 빨강 — 여기에 힘을 줍니다 */ font-weight: 800; font-size: 1.12em; } .조금{ color: #C62828; opacity: .62; font-weight: 700; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .센, :root:not([data-theme="light"]) .조금{ color: #FF7A6B; } } :root[data-theme="dark"] .센, :root[data-theme="dark"] .조금{ color: #FF7A6B; } /* ── 🔉 약한 칸 — 힘 없는 홀소리는 «작게» (원장 지시 2026-09-07) ────── 「슈와 소리는 작게 적어 주세요」 「터게더 — 터를 작게 더를 작게」 「remember 의 리를 메보다는 작게 / 발음이 약한 것은 작게」 힘이 빠진 홀소리는 거의 안 들립니다 — about 의 첫 「어」, together 의 「터·더」, remember 의 「리」. 크게 적어 두면 아이가 또박또박 냅니다. 그러면 영어의 «가락» 이 무너져 원어민이 못 알아듣습니다. ★ 잣대는 «어느 홀소리냐» 가 아니라 «힘이 있느냐» 입니다. 처음엔 슈와(ə·ər)만 작게 했는데 remember 의 「리」(ɪ)가 안 걸렸습니다. 발음사전이 0 으로 적어 둔 홀소리는 «다» 약한 칸입니다. 바탕 문서 적는 법 6 「센 칸은 크게, 약한 칸은 작게」 의 «작은» 쪽입니다. 빨강(.센)과 짝을 이룹니다 — 한 낱말 안에서 크고 빨간 칸 하나, 작고 흐린 칸 여럿. */ .약{ font-size: .68em; opacity: .58; font-weight: 500; vertical-align: baseline; } /* ── 🌈 포물선 — 악센트를 «꼭대기» 로 칸들이 아치를 그립니다 ────────── 원장 정함 2026-09-15 — 「엑센트가 있는 말에 굵은 빨간 표시하고 다른 것들은 조금 작게해서 엑센트 중심으로 포물선 그리는 말로 표현 하기로 했습니다」 ■ 색·크기만으로는 «가락» 이 안 보였습니다 빨강(.센)과 작게(.약)는 어느 칸이 센지를 말해 주지만, 낱말은 여전히 한 줄로 반듯이 서 있습니다. 영어는 힘이 한 칸에서 «솟았다 내려오는» 소리라, 그 오르내림을 눈으로 보이면 아이가 가락째 흉내 냅니다. ■ 진짜 포물선입니다 — y = k·x² x 는 악센트 칸에서 «몇 칸» 떨어졌나(--멀), y 는 내려앉는 깊이입니다. 멀 0 0 ← 악센트. 꼭대기 멀 1 .115em 멀 2 .46em 제곱이라 바로 옆 칸은 살짝, 먼 칸은 뚝 떨어져 아치가 섭니다. 크기도 멀어질수록 조금씩 작아집니다 (1 → .95 → .90) — 원장 말 「다른 것들은 조금 작게」 가 이 자리입니다. ■ «칸» 은 홀소리가 있는 자리입니다 닿소리 낱자(ㅌ·ㅁ·ㅋ)는 홀소리가 없으니 제 칸이 아니라 «앞 칸에 얹혀» 갑니다 — 데ㅅㅋ 는 한 칸, 커ㅁㅍ유우터 는 네 칸입니다. 세는 것은 common/sori_draw.js 의 소리글자HTML() 이 합니다. (적는 법 5 「음절 사이에 가운뎃점 — 애·퍼ㄹㅿ 는 소리 다섯에 박자 둘」 과 같은 셈입니다. 포물선도 «박자» 를 따라 섭니다.) ■ ★ 켠 화면에서만 섭니다 겉에 class="포물선" 을 두른 «안» 에서만 아치가 서고, 밖에서는 .칸 이 여느 글자와 똑같이 한 줄로 갑니다. 낱말표·시험지처럼 «반듯해야» 하는 자리를 건드리지 않으려고 이렇게 갈랐습니다. ■ 쓰는 법
… 소리글자HTML('터게Đㅓ', 표, 센) …
*/ .포물선{ /* 아래로 내려앉는 칸이 다음 줄을 밀지 않게 자리를 넉넉히 둡니다. ★ 선을 «내려» 글자 뒤에 두었으므로(2026-09-15) 위쪽 여백은 조금만 있으면 됩니다 — 양 끝이 삐져나올 만큼만. */ line-height: 2.05; padding-top: .16em; } /* 한 낱말 덩이 — 선을 그으려면 왼끝·오른끝·꼭대기를 여기서 잽니다 */ .포물선 .소리낱말{ position: relative; display: inline-block; } /* ── 🌈 그어 놓은 선 (원장 그림 2026-09-15 — 「포물선을 그어 주세요」) ── common/sori_draw.js 의 포물선그리기() 가 낱말마다 하나씩 넣습니다. ★ 파랑으로 긋습니다 (원장 정함 2026-09-15 — 「파란색 선 색을 넣어 주세요」). 처음엔 먹으로 두었습니다. 빨강이 이미 «힘» 의 몫이라(2026-09-07) 선까지 빨가면 어느 칸이 센지가 흐려지기 때문입니다. 파랑은 그 걱정이 없고, 오히려 뜻이 하나 더 섭니다 — 🔴 빨강 힘이 «어느 칸» 에 있나 (점) 🔵 파랑 소리가 «어떻게 흐르나» (길) ⚫ 먹 소리 그 자체 (ㅅ표·ㄷ표·ㄹ표) 색마다 뜻이 하나씩이라는 잣대는 그대로입니다. 표기표의 발음기호도 이미 이 남빛이라 한 집안으로 보입니다. */ .포물선 .소리활{ color: var(--소리활빛, #1F6FB2); opacity: .62; z-index: 0; /* ⬇️ 글자 «뒤» 로 (원장 지시 2026-09-15) */ } /* 글자가 선 «앞» 에 섭니다 — 선은 뒤로 지나갑니다 */ .포물선 .칸{ position: relative; z-index: 1; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .포물선 .소리활{ color: #6FB6EA; opacity: .58; } } :root[data-theme="dark"] .포물선 .소리활{ color: #6FB6EA; opacity: .58; } .포물선 .칸{ display: inline-block; /* 인라인에는 translateY 가 안 먹습니다 */ vertical-align: baseline; transform: translateY(calc(var(--멀, 0) * var(--멀, 0) * .115em)); font-size: calc(1em - var(--멀, 0) * .05em); } /* 포물선 밖에서는 아무 일도 안 합니다 — 여느 글자 그대로 */ .칸{ font-style: normal; } /* ── 🔴 문장 악센트 — 힘이 들어가는 «낱말» (원장 지시 2026-09-16) ───── 「문장 엑센트는 (명동형부의지) 중심으로 빨간 긴 점선 와 단어 엑센트(파란 점선 포물선)」 ■ ★ 두 층을 갈라 둡니다 — 서로 안 가리게 낱말 악센트 파란 점선 «포물선» 낱말 «안» 의 어느 칸에 힘이 오나 (.소리활 — 글자 «위» 로 지나갑니다) 문장 악센트 빨간 긴 «점선» 문장에서 어느 «낱말» 에 힘이 오나 (여기 — 낱말 «아래» 로 깔립니다) 위아래로 갈랐으니 한 화면에 둘이 같이 서도 겹치지 않습니다. 색도 뜻이 하나씩입니다 — 🔵 파랑은 «가락», 🔴 빨강은 «힘». ■ ★ 왜 «낱말» 단위라서 보기에 얹어도 답이 안 새나 읽기 검사는 한 문장을 소리 셋으로 내밀고 고르게 합니다 (아이 매ㅋ 어 케이ㅋ / 아이 메이ㅋ 어 케이ㅋ / 아이 메이ㅋ 에이 케이ㅋ). 낱말 악센트는 «음절» 자리라 보기마다 음절 수가 달라(매ㅋ 1 · 메이ㅋ 2) 정답 보기에만 붙습니다 — 그러면 답이 새어 나갑니다. 문장 악센트는 «낱말» 자리라 **보기 셋에 똑같이** 붙습니다. 그래서 이것만 고르기 «전» 에 보여 줄 수 있습니다. ■ 긴 점선은 낱말 폭을 다 덮습니다 — 한 낱말이 한 덩이로 보이게. */ .문장센{ border-bottom: 2px dashed var(--inju, #B23A20); padding-bottom: 2px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .문장센{ border-bottom-color: #E8735A; } } :root[data-theme="dark"] .문장센{ border-bottom-color: #E8735A; }