목차와 등장 모션 확인용 템플릿

이 글은 확인용 템플릿입니다. 오른쪽 목차가 어떻게 계층을 보여주는지, 스크롤하면서 현재 절이 어떻게 따라오는지 보려고 만들었습니다.

draft: true 라서 로컬에서만 보이고 배포에는 나가지 않습니다. 확인이 끝나면 지우시거나, 새 글 쓸 때 틀로 복사해 쓰세요.

목차에서 볼 것 #

오른쪽 목차는 두 가지만 합니다.

1. 하위 항목은 들여쓰고 앞에 짧은 선을 붙입니다
2. 지금 읽는 절은 강조색으로 표시됩니다

처음에는 세로 안내선과 서체 구분, 왼쪽 막대까지 넣었는데 목차가 본문보다 시끄러웠습니다. 표시는 하나로 충분합니다.

기호를 글자로 넣지 않은 이유 #

목차의 하위 항목 앞에 붙은 짧은 선은 - 문자가 아닙니다. 1px 도형입니다.

.wr-toc li.lv3 > a::before {
  content: "";          /* 글자가 아니라 빈 도형 */
  width: 0.5em;
  height: 1px;
  background: var(--line2);
}

content: "–" 로 넣으면 스크린리더가 항목마다 "대시"를 읽습니다. 목차가 20개면 스무 번 읽습니다. 도형으로 넣으면 눈에만 보입니다.

현재 위치는 aria-current 로 알립니다 #

클래스가 아니라 aria-current="true" 를 씁니다. 그러면 화면과 스크린리더가 같은 것을 "현재"로 인식합니다. 색만 바꾸면 눈으로 보는 사람만 압니다.

등장 모션은 섹션마다 다릅니다 #

data-flow 로 스크롤 속도만큼 기울이던 효과는 없앴습니다. 대신 자리마다 다른 결로 나타납니다.

TIL 잔디는 처음에 판 전체를 살짝 띄웠는데, 큰 덩어리가 조금 움직이는 것은 눈에 걸리지 않았습니다. 열(주) 단위로 순서를 주니 "채워지는" 것이 보입니다.

곡선은 하나만 씁니다 #

길이만 바꾸고 곡선은 --ease 하나입니다. 이건 design.md 5절 그대로입니다.

$$\text{ease} = \mathrm{cubic\text{-}bezier}(0.22,\ 1,\ 0.36,\ 1)$$

clip-path 를 0 으로 닫지 않는 이유 #

닦아내는 효과(wipe)의 끝 상태를 inset(0) 으로 두면 자기 경계에서 정확히 자릅니다. 그러면 제목의 .thin 획이나 포커스 링이 깎입니다. 그래서 살짝 음수로 둡니다.

.js [data-reveal="wipe"].is-in {
  clip-path: inset(-0.4em -0.4em -0.4em -0.4em);
}

본문 요소 한 번에 보기 #

인용과 목록 #

인용은 왼쪽 선으로만 표시합니다. 배경을 깔면 코드 블록과 헷갈립니다.

• 첫째 항목
• 둘째 항목
  • 안쪽 항목
  • 또 안쪽 항목
• 셋째 항목

코드 #

코드 블록 위에서 휠을 굴려 보세요. 예전에는 페이지가 걸렸습니다. overflow-y 를 명시해서 고쳤습니다.

// 가로로 아주 긴 줄입니다. 가로 스크롤은 되고, 세로 휠은 페이지로 넘어갑니다.
const example = { alpha: 1, beta: 2, gamma: 3, delta: 4, epsilon: 5, zeta: 6, eta: 7, theta: 8 };

수식 #

인라인으로는 $e^{i\pi} + 1 = 0$ 이렇게 들어갑니다. Notion 처럼 $x^2 + y^2 = r^2$ 로 써도 인라인으로 나옵니다.

별행은 이렇게 나옵니다.

$$\sum_{k=1}^{n} k^3 = \left(\frac{n(n+1)}{2}\right)^2$$

표 #

표 위에서도 세로 휠이 걸리지 않아야 합니다.

마지막 절 #

여기까지 내려오면 목차의 마지막 항목이 켜져 있어야 합니다. 그리고 아래 "지난 글 / 최신 글" 이 왼쪽이 지난 글, 오른쪽이 최신 글로 놓여 있는지 확인해 주세요.