소프트웨어 마이스터 고등학교의 연례 축제인 **'다솔제(Dasol Festival)'**를 홍보하고 안내하기 위한 공식 반응형 랜딩 페이지 프로젝트입니다.
본 프로젝트는 10대들의 감성을 저격하는 미래지향적인 사이버 네온/다크 테마 디자인과 함께, 사용자 편의를 돕는 직관적이고 세련된 인터랙션을 구현하였습니다.
- Markup: HTML5 (시맨틱 마크업 설계로 SEO 및 웹 접근성 향상)
- Styling: CSS3 (CSS Variable을 이용한 테마 관리, Flexbox & CSS Grid, Media Query 기반 반응형 웹 디자인)
- Script: Vanilla JavaScript (ES6+, Intersection Observer API 활용 스크롤 페이드인 및 동적 인터랙션)
- Assets: AI 생성 고품질 그래픽 이미지 리소스 5종 적용
- 메인 히어로 섹션 (Hero Section)
- 사이버펑크 무드의 네온 타이포그래피와 축제 핵심 정보(날짜, 장소) 제공.
- 마우스 스크롤 유도 애니메이션을 포함한 세련된 사용자 경험(UX).
- 배경 이미지 대비 명도 확보를 위해 서브타이틀 텍스트 가독성 최적화(소프트 드롭 섀도우 적용).
- 페스티벌 타임라인 (Timeline Section)
- 시간 순서대로 주요 행사 일정을 확인할 수 있는 인터랙티브 버티컬 타임라인 UI.
- 모바일 환경에서는 터치 및 뷰포트 폭에 맞춰 유연하게 1열 형태로 자동 리레이아웃.
- 부스 및 공연 라인업 소개 (Card UI & Filter)
- 체계적인 동아리 부스 및 화려한 무대 공연 소개 카드 구성.
- Vanilla JS를 활용해 새로고침 없이 동작하는 카테고리 실시간 필터링 탭 탑재.
- 오시는 길 및 문의하기 (Location & Contact)
- 교통편 및 비상 연락망 정보를 시각적 카드로 배치.
- 사이버 네온 스타일의 유효성 검사 지원 문의 전송 폼 마크업 및 알림 이벤트 스크립트 연동.
- 반응형 내비게이션 & 햄버거 메뉴
- 스크롤 위치에 따라 헤더의 불투명도 및 얇은 보더가 유기적으로 전환되는 스크롤 헤더 액션.
- 모바일 뷰포트에서 내비게이션 바가 감추어지고 우측 상단 햄버거 버튼 터치 시 슬라이딩으로 부드럽게 열리는 트랜지션 애니메이션 메뉴 지원.
AI lec/
├── assets/ # 축제 비주얼 에셋 폴더
│ ├── hero_bg.png # 메인 히어로 네온 배경 이미지
│ ├── booth_coding.png # 코딩 동아리 부스 카드 이미지
│ ├── booth_game.png # 게임 개발 동아리 부스 카드 이미지
│ ├── performance_band.png # 밴드 공연 라인업 카드 이미지
│ └── performance_dance.png # 댄스 크루 라인업 카드 이미지
├── index.html # 축제 랜딩 페이지 메인 HTML 마크업
├── style.css # 네온 테마 스타일시트 및 미디어 쿼리
├── script.js # 인터랙티브 모션 및 카드 필터링 자바스크립트
└── README.md # 프로젝트 안내 및 명세서 (현재 파일)
- 본 프로젝트의 최상위 폴더 내에 있는 index.html 파일을 마우스 더블클릭하여 Chrome, Edge, Safari 등 최신 웹 브라우저에서 실행합니다.
- VS Code 등의 에디터를 이용하는 경우
Live Server확장을 통해 로컬 서버 주소(http://127.0.0.1:5500/)로 실시간 개발 환경 브라우징을 지원합니다.