상세 페이지

상세 페이지는 항목 하나를 보여 줍니다. 머리 영역, front matter에서 읽은 정보 목록, 본문, 행동 유도 링크 하나로 구성됩니다. 이 레이아웃들은 자기 페이지에서만 modootoday-detail.css를 불러오고 JavaScript는 추가하지 않습니다. 같은 front matter로 schema.org 주요 개체를 출력하며, schema: 맵에 적은 속성이 우선합니다. 선택 항목인 image: {path, alt, width, height}를 주면 머리 영역 아래에 표지 이미지를 보여 줍니다.

레이아웃	정보	행동 유도	구조화 데이터	데모
`project`	고객, 역할, 연도, 기술, 링크	`cta`	CreativeWork	프로젝트
`case-study`	고객, 역할, 연도, 기술, 링크	`cta`	Article	사례 연구
`job`	근무지, 고용 형태, 급여, 게시일, 마감일	지원하기 (`apply`)	JobPosting	채용
`event`	시작, 종료, 장소, 온라인	티켓과 .ics 파일	Event	행사
`episode`	시즌과 회차, 게시일, 길이, 오디오 플레이어	`cta`	PodcastEpisode	에피소드

채용 공고

---
layout: job
title: 테크니컬 라이터
description: 제품 문서를 쓰고 관리합니다.
date: 2026-10-01          # datePosted
deadline: 2026-12-01      # validThrough
employment: full-time     # full-time, part-time, contractor, temporary, intern, volunteer, per-diem, other
location: 서울            # 또는 remote: South Korea (지원자가 거주해야 하는 국가)
salary: {min: 50000000, max: 70000000, currency: KRW, unit: year}
apply: mailto:jobs@example.com
---

채용 기관은 사이트 발행자(modootoday.schema.publisher)입니다. date가 없거나, location과 remote가 모두 없거나, 알 수 없는 employment 값이면 modootoday-check가 알려 줍니다.

행사

---
layout: event
title: 테마 밋업
starts: 2026-11-20 19:00:00 +0900
ends: 2026-11-20 21:00:00 +0900
venue: A홀               # 장소, 온라인 URL, 또는 둘 다
address: 서울시 중구 세종대로 1
online: https://example.com/live
tickets: https://example.com/tickets
---

캘린더 링크는 data: URL에 담긴 .ics 파일이라 서버 없이 동작합니다.

에피소드

---
layout: episode
title: 첫 방송
date: 2026-10-10
season: 1
episode: 3
duration: 42              # 분
audio: /media/ep3.mp3
transcript: /podcast/3/transcript/
---

플레이어는 브라우저 기본 <audio controls>이며, 재생하기 전에는 아무것도 내려받지 않습니다.

프로젝트와 사례 연구

---
layout: project           # 또는 case-study (저자와 날짜가 있는 Article)
title: 아틀라스
client: ACME
role: 디자인과 개발
year: 2026
stack: [Jekyll, Sass]
links:
  - {label: 저장소, url: "https://example.com/atlas"}
cta: {label: 문의하기, url: /contact/}
---

접근성

글은 제목으로 이름이 붙고, 정보는 설명 목록(dl)이며, 반복되는 링크(지원하기, 티켓)는 스크린 리더에 페이지 제목을 함께 알려 줍니다. 인쇄할 때는 행동 유도와 플레이어를 숨깁니다.