모집일람

오늘 기준으로 다시 세는 연합 동아리 모집 일람

Quick Start

index.html 을 더블클릭하면 열립니다. 설치도 빌드도 필요 없습니다 — Node 도 npm 도 쓰지 않는 순수 HTML · CSS · JavaScript 입니다.

서버에 올릴 때는 폴더째 업로드하면 됩니다. 서비스 워커와 PWA 매니페스트는 http(s) 에서만 켜지므로, 로컬에서 파일로 열어도 콘솔에 오류가 나지 않습니다.

Folder Structure

stu-04-club-directory/
├── index.html              첫 화면
├── pages/                  나머지 모든 쪽
├── styles/                 tokens · base · components · sections · theme (순서 고정)
├── scripts/                main.js + logic/(순수 계산 · DOM 을 모른다)
├── assets/                 images · icons · fonts · data
├── contract/               백엔드 이관 계약 — 스키마 · 엔드포인트 · 컴포넌트 매핑
├── manifest.webmanifest    PWA
└── sw.js                   오프라인 캐시

Customize

Brand colors

styles/tokens.css 의 CSS 변수만 바꾸면 전체 색이 따라옵니다. styles/theme.css 상단 §1 에 이 템플릿의 팔레트와 대비 실측표가 있습니다. 색을 바꿀 때는 그 표의 수치를 다시 재세요 — 본문 4.5:1, 큰 글자 3:1 이 기준입니다.

Fonts

assets/fonts/fonts.css 에서 바꿉니다. 서체 파일은 전부 이 폴더에 들어 있고 외부 CDN 을 호출하지 않습니다.

Unique design

styles/theme.css 가 이 템플릿의 개성입니다. 레이아웃 골격 · 형태 · 밀도 · 시그니처 인터랙션이 모두 여기 있고, 파일 안에 왜 그 값인지가 주석으로 적혀 있습니다.

Pages

Browser Support

Chrome · Edge · Safari · Firefox 최신 2개 버전.

이 템플릿이 의존하는 것: <dialog>(상세 시트) · CSS 논리 속성 (inline-size · border-block-start 등) · clamp() · CSS 사용자 정의 속성 · :has()(공용 reset 한 곳) · color-mix()(토큰 파생값) · Service Worker(오프라인). 컨테이너 쿼리 · animation-timeline · backdrop-filter 는 쓰지 않습니다.

색 모드: 양쪽 — 기본은 밝게이고, OS 설정을 따라가며 화면 위 전환 단추로 바꿀 수 있습니다. 선택은 브라우저에 저장됩니다.

Accessibility

• 색 대비 — 본문 4.5:1 이상, 큰 글자 3:1 이상. 라이트와 다크 양쪽에서 쟀습니다 (실측)
• 터치 타깃 44×44px 이상, 인접 컨트롤은 간격까지 포함해 판정
• 키보드 — Tab 순서, 모달 포커스 트랩, 본문 건너뛰기 링크
• prefers-reduced-motion 대응 (모든 진입 모션과 키워드 색인 전이)
• prefers-reduced-data 대응 (웹폰트를 물지 않고 시스템 서체로 갑니다)
• 모든 이미지에 alt 와 명시적 width/height (레이아웃 이동 0)

Credits / License

서체와 이미지의 출처·라이선스는 CREDITS.md, 템플릿 자체의 이용 범위는 LICENSE.md 를 보세요.

이 압축 파일에 함께 들어온 것

템플릿 소스 외에 패키징 단계에서 넣은 파일입니다.

이 템플릿은 일부 과정에 AI 를 썼습니다. 코드와 카피는 사람이 검수했습니다.

Built with Sogorox Factory