[SASS] 클래스101 클론코딩
본 프로젝트는 Sass(SCSS)를 학습하고 적용하기 위한 목적으로 진행한 클래스101 클론코딩 프로젝트입니다.
CSS 전처리기를 활용하여 유지보수성 높은 스타일 구조를 설계했습니다.
클래스101(Class101)은 온라인 클래스 플랫폼으로, 다양한 분야의 강의를 제공하는 서비스입니다.
클론코딩은 다음의 목표를 중점으로 설계되었습니다
- - Sass 변수, 믹스인, 중첩 규칙을 활용한 모듈화된 스타일 작성
- - 컴포넌트 기반의 재사용 가능한 CSS 구조 설계
- - 실제 서비스와 유사한 레이아웃 및 인터랙션 구현
프로젝트 바로가기
제작 일정
주요 기능
📌 메인 페이지
- 헤더 & 네비게이션로고, 카테고리 메뉴, 검색 및 로그인 영역으로 구성된 상단 헤더
- 메인 비주얼프로모션 배너 슬라이더와 핵심 카피가 포함된 히어로 영역
- 추천 클래스카드형 레이아웃으로 인기 강의와 신규 강의 목록 제공
- 푸터사이트 정보, 정책 링크, SNS 연결을 포함한 풀 푸터
📌 카테고리
- 카테고리 탭드로잉, 공예, 요리 등 분야별 카테고리 탭 필터
- 강의 목록선택한 카테고리에 해당하는 강의 카드 목록 표시
📌 슬라이더
- 배너 슬라이더자동 재생과 네비게이션 버튼이 있는 메인 배너
- 강의 슬라이더다수의 강의 카드를 좌우 스크롤로 탐색하는 카드 슬라이더
사용 기술 및 도구
- 개발 HTML5, CSS3, Sass(SCSS), JavaScript
- 디자인 Figma
- 개발 환경 VS Code