README.md

🌟 MAV 웹사이트

성균관대학교 MAV 동아리 공식 웹사이트
MAV 동아리를 소개하고, 활동 내용, 구성원 정보, 모집 공고를 제공.

📂 프로젝트 구조

📁 프로젝트 루트
├── index.html                # 메인 페이지
├── activities.html           # 동아리 활동 페이지
├── recruitment.html          # 동아리 모집 페이지
├── members.html              # 동아리 구성원 페이지
├── styles/                   # CSS 스타일 파일 저장 폴더
│   ├── index.css             # 메인 페이지 스타일
│   ├── members.css           # 구성원 페이지 스타일
│   ├── recruitment.css       # 모집 페이지 스타일
│   ├── activities.css        # 활동 페이지 스타일
│   ├── shared.css            # 공통 스타일
│   └── subpages.css          # 서브 페이지 스타일
├── javascript/               # JavaScript 파일 저장 폴더
│   ├── index.js              # 메인 페이지 스크립트
│   ├── members.js            # 구성원 페이지 스크립트
├── images/                   # 이미지 및 동영상 파일 저장 폴더
│   ├── mav_anime2.mp4        # 메인 배경 동영상
│   ├── mav_anime2_length.mp4 # 대체 배경 동영상
│   ├── logo.svg              # MAV 로고
│   ├── placeholder.jpg       # 동영상 대체 이미지
│   └── 기타 이미지 파일
└── README.md                 # 프로젝트 설명 파일

🛠️ 기능 설명

1. 메인 페이지 (index.html):

   • MAV 동아리의 비전과 정체성을 소개.
   • 배경 동영상을 통해 시각적 몰입감을 제공.
   • 8기 모집 정보 및 지원 버튼 포함.

2. 동아리 활동 페이지 (activities.html):

   • MAV의 주요 활동 내용 소개.
   • 텍스트와 이미지 조화를 통해 정보 전달.

3. 동아리 구성원 페이지 (members.html):

   • 멤버 리스트 및 역할 정보 제공.
   • 특정 멤버의 상세 정보를 JavaScript로 탐색 가능.

4. 동아리 모집 페이지 (recruitment.html):

   • 모집 일정, 방법, 요구사항 안내.
   • Google Form 링크를 통해 지원서 제출.

🚀 설치 및 실행 방법

1. 프로젝트 클론:

   git clone https://github.com/SKKU-MAV/mav-website.git

2. 프로젝트 루트 디렉토리로 이동:

   cd mav-website

3. 브라우저에서 실행:

   • index.html 파일을 더블 클릭하거나,
   • IDE(예: VS Code)의 Live Server를 통해 실행합니다.

🧩 사용된 기술

• HTML5: 웹사이트 구조 설계
• CSS3: 디자인 및 애니메이션
  • Google Fonts를 활용한 커스텀 폰트
• JavaScript: 동적 콘텐츠 및 상호작용
• GitHub: 코드 버전 관리

📍 MAV 동아리 위치

• 주소:
  성균관대학교 자연과학캠퍼스 반도체관 400617
  네이버 지도 보기

• 문의:

  • MAV 카카오톡 채널
  • GitHub 리포지토리

🔗 추가 링크

MAV 웹사이트 바로가기