Loading...
Back to TemplatesStudent Activity
Student Activity
UI Skeleton
마감판 — 대외활동·공모전 안내판
이번 달 대외활동과 공모전을 마감 순서대로 세워 둔 판 — 마감일 말고 언제 시작해야 하는지까지 적는다
0.0/0 ratings
S
Authored by Sogorox LabsTags
#activity deadline dashboard html template#contest listing template free#vanilla js dashboard template no framework
0Downloads
44Views
1
Select a Plan
Select a plan on the left to review order details and complete your purchase on the right.
Selected
Free
$0
Free to use. Footer credit link required.
Free to use. Footer credit link required.
Community support
2
Order Summary
Selected Item
Free
$0
Free to use. Footer credit link required.
Subtotal$0
Total$0
Free During Beta · Attribution Required
Footer credit preview
Built with Sogorox
This link will appear in your site footer. Remove with Pro license.
Readme
마감판 — 대외활동·공모전 안내판
마감일에서 준비 기간을 빼서 언제 시작해야 하는지까지 적는 활동 안내판. 공항 출발 안내판처럼 마감 순서대로 줄이 서고, 마감이 지난 편은 판에서 내려갑니다.
Quick Start
index.html 을 더블클릭하면 열립니다. 설치도 빌드도 필요 없습니다 —
Node 도 npm 도 쓰지 않는 순수 HTML · CSS · JavaScript 입니다.
서버에 올릴 때는 폴더째 업로드하면 됩니다. 서비스 워커와 PWA 매니페스트는
http(s) 에서만 켜지므로, 로컬에서 파일로 열어도 콘솔에 오류가 나지 않습니다.
Folder Structure
stu-07-activity-dashboard/
├── 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
| 쪽 | 용도 |
|---|---|
index.html | 안내판. 열다섯 편이 마감 순서대로 서고, 고른 편이 그 자리에서 값이 됩니다 |
pages/directory/activity.html | 요강 별지. 편마다 자격 요건 · 혜택 · 낼 것 · 접수 방법 전문 |
pages/docs/checklist.html | 준비 체크리스트. 준비 소요일을 세는 표와 파일 규격 |
pages/docs/glossary.html | 용어 안내. 대외활동 · 공모전 · D-day 의 뜻과 판의 상태 표기 |
pages/about.html | 발행 안내. 판이 만들어지는 절차와 정정 기록 |
pages/legal/privacy.html | 개인정보 처리방침 |
pages/legal/terms.html | 이용약관 |
pages/system/404.html | 없는 쪽 |
pages/system/offline.html | 오프라인 (서비스 워커가 띄웁니다) |
Browser Support
Chrome · Edge · Safari · Firefox 최신 2개 버전.
이 템플릿이 의존하는 것 (실측):
| 기능 | 쓰는 곳 | 없으면 |
|---|---|---|
<dialog> + showModal() | 요강 전문 시트 (index.html) | 시트를 여는 버튼이 숨고 요강은 pages/directory/activity.html 에서 읽힙니다 |
@property 로 등록한 커스텀 프로퍼티 | 접수 기간 소진 링의 값 전이 | 링이 전이 없이 값만 바뀝니다 |
:has() | 고른 행의 배경 표시 | 라디오는 그대로 켜지고 행 배경만 강조되지 않습니다 |
논리 속성 (inline-size · border-block-start) | 전 지면 | 지원하지 않는 브라우저가 없습니다 (Baseline 2023) |
text-wrap: balance · pretty | 제목과 문단의 줄바꿈 | 줄바꿈이 조금 거칠어집니다 |
svh 단위 | 시트의 최대 높이 | vh 로 떨어집니다 |
| 서비스 워커 | 오프라인 열람 | 온라인에서만 열립니다 |
컨테이너 쿼리 · animation-timeline · color-mix() 는 쓰지 않습니다.
색 모드: 양쪽. OS 설정을 따르고, 판 머리 오른쪽의 전환 버튼으로 바꿉니다 (선택은 브라우저에 저장됩니다).
Accessibility
- 색 대비 — 본문 4.5:1 이상, 큰 글자 3:1 이상. 라이트와 다크 양쪽에서 쟀습니다 (실측)
- 터치 타깃 44×44px 이상, 인접 컨트롤은 간격까지 포함해 판정
- 키보드 — Tab 순서, 모달 포커스 트랩, 본문 건너뛰기 링크
prefers-reduced-motion·prefers-reduced-transparency·prefers-reduced-data대응- 모든 이미지에
alt와 명시적width/height(레이아웃 이동 0)
Credits / License
서체와 이미지의 출처·라이선스는 CREDITS.md, 템플릿 자체의 이용 범위는
LICENSE.md 를 보세요.
이 압축 파일에 함께 들어온 것
템플릿 소스 외에 패키징 단계에서 넣은 파일입니다.
| 파일 | 내용 |
|---|---|
LICENSE.md | pro 에디션 이용 약관 — 재배포·재판매 범위가 여기 있습니다 |
CREDITS.md | 서체와 이미지의 출처·라이선스 |
CHANGELOG.md | 이 템플릿의 변경 이력 |
.cursorrules | AI 편집기(Cursor · Claude Code · Cline)가 읽는 편집 규칙 — 디자인 토큰만 쓰기, BEM 이름, WCAG 2.2 AA 기준을 어시스턴트가 따릅니다 |
.provenance.json | 빌드 출처와 지문 (저작권 증빙용. 지워도 템플릿은 그대로 동작합니다) |
assets/preview.webp | 맨 위의 첫 화면 캡처 |
이 템플릿은 일부 과정에 AI 를 썼습니다. 코드와 카피는 사람이 검수했습니다.