Loading...
Back to TemplatesGraduate Gallery
Graduate Gallery
UI Skeleton
작품대장 — 졸업 전시 등록 대장
서림대학교 디자인대학 졸업 작품 등록 아카이브 — 스물네 점의 실치수를 축척 그대로 옮겨 적은 대장
0.0/0 ratings
S
Authored by Sogorox LabsTags
#graduation exhibition#art archive#gallery template
0Downloads
37Views
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-06-graduation-gallery/
├── 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/work/index.html | 등록 색인 — 전체 목록을 분야·연도로 좁혀 본다 |
pages/work/artwork.html | 작품 낱장 — 등록번호 한 건의 도판과 작업 노트 |
pages/work/artist.html | 출품자 명부 — 사람 기준으로 다시 세운 목록 |
pages/about.html | 전시 개요 — 회차·기간·장소와 관람 안내 |
pages/docs/glossary.html | 용어 — 대장에 쓰인 매체·기법 낱말 풀이 |
pages/docs/rights.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> | 작품 낱장 도판 확대 | Chrome 37 · Safari 15.4 · Firefox 98 | 도판이 제자리에서 커집니다 |
popover 속성 | 등록 색인의 좁히기 판 | Chrome 114 · Safari 17 · Firefox 125 | 판이 항상 펼쳐진 채로 섭니다 |
:has() | 고른 항목에 따른 줄 강조 | Chrome 105 · Safari 15.4 · Firefox 121 | 강조만 빠지고 값은 그대로입니다 |
color-mix() | 도판 위 겹침 색 | Chrome 111 · Safari 16.2 · Firefox 113 | 사다리의 고정값으로 떨어집니다 |
@layer | 공용 CSS 와 이 지면의 우선순위 | Chrome 99 · Safari 15.4 · Firefox 97 | 필수입니다 |
aspect-ratio | 도판 자리 예약 (CLS 0) | Chrome 88 · Safari 15 · Firefox 89 | 도판이 뜰 때 줄이 밀립니다 |
text-wrap | 표제 줄바꿈 다듬기 | Chrome 114 · Safari 17.4 · Firefox 121 | 줄바꿈 자리만 달라집니다 |
100svh | 모바일 주소창 아래 높이 | Chrome 108 · Safari 15.4 · Firefox 101 | vh 로 떨어집니다 |
| IntersectionObserver | 진입 모션·색인 따라가기 | 전 브라우저 (IE 제외) | 모션 없이 바로 보입니다 |
컨테이너 쿼리(@container)와 animation-timeline 은 쓰지 않습니다.
색 모드: 양쪽 (라이트·다크. prefers-color-scheme 을 따르고 밝기 단추로 덮어씁니다)
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 를 썼습니다. 코드와 카피는 사람이 검수했습니다.