애드리절트(ADRESULT) 공식 웹사이트를 완벽하게 재현한 프로젝트입니다.
- 반응형 디자인: 모바일, 태블릿, 데스크톱 모든 기기에서 최적화
- 스크롤 애니메이션: 부드러운 페이드인, 슬라이드, 스케일 애니메이션 효과
- 인터랙티브 요소: 통계 카운터, 차트, 슬라이더 등 다양한 동적 요소
- 현대적 UI/UX: 애드리절트 브랜드 컬러와 디자인 언어 완벽 재현
- HTML5: 시맨틱 마크업
- CSS3: Flexbox, Grid, 애니메이션, 반응형 디자인
- JavaScript (ES6+): DOM 조작, Intersection Observer API, Canvas API
- Google Fonts: Noto Sans KR 폰트
- Font Awesome: 아이콘
-
헤더 네비게이션
- 고정 헤더 (스크롤 시 투명도 변화)
- 드롭다운 메뉴
- 모바일 햄버거 메뉴
-
히어로 섹션
- 회사 소개 및 브랜딩
-
통계 섹션
- 132개월 최장수 고객 계약기간
- 150+ 병원 고객 수
- 1,272곳 누적 고객 수
- 15,000+ 월간 콘텐츠 발행량
- 애니메이션 카운터 효과
-
고객 후기 슬라이더
- 무한 스크롤 효과
- 6개 고객 후기 자동 롤링
-
맞춤 전략 섹션
- 양방향 슬라이드 애니메이션
-
성공 사례
- 4개 병원 사례
- 인터랙티브 차트
- 성과 지표 시각화
-
커스터마이제이션 전략
- Canvas 기반 파이 차트
- 비교 분석 시각화
-
결과 중심 관리
- 원형 다이어그램
- 중앙 집중식 관리 체계 시각화
-
유튜브 섹션
- 고객 인터뷰 비디오 그리드
- 플레이 버튼 오버레이
-
푸터
- 회사 정보
- CTA 버튼
- 연락처 정보
- fade-in: 아래에서 위로 떠오르는 효과
- fade-in-left: 왼쪽에서 슬라이드인
- fade-in-right: 오른쪽에서 슬라이드인
- scale-in: 확대되며 나타나는 효과
- slide-up: 큰 거리에서 위로 슬라이드
- 시차 효과: 순차적 애니메이션 (0.1초 딜레이)
- 플로팅 버튼: 채팅(녹색), 전화(파란색), 이메일(노란색)
- 스크롤 헤더: 스크롤 시 배경 투명도 변화
- 호버 효과: 모든 버튼과 카드에 호버 애니메이션
- 통계 카운터: 뷰포트 진입 시 숫자 카운트업 애니메이션
- 무한 슬라이더: 고객 후기 자동 롤링 (호버 시 일시정지)
- 회사명: 애드리절트 (ADRESULT)
- 대표자: 이승민
- 전화: 02-1661-4829
- 주소: 서울시 강남구 헌릉로618길 9 (세곡동)
- 사업자등록번호: 889-88-00231
-
저장소 클론
git clone [repository-url] cd adresult-website -
로컬 서버 실행
python -m http.server 8000
-
브라우저에서 확인
http://localhost:8000
adresult-website/
├── index.html # 메인 HTML 파일
├── styles.css # CSS 스타일시트
├── script.js # JavaScript 로직
└── README.md # 프로젝트 문서
- 브라우저: Chrome, Firefox, Safari, Edge (최신 버전)
- 모바일: iOS Safari, Chrome Mobile
- 해상도: 320px ~ 1920px+ 반응형 지원
이 프로젝트는 애드리절트 공식 웹사이트를 학습 목적으로 클론한 것입니다.
Copyright© 2025 애드리절트 클론 프로젝트. All Rights reserved.