프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]

• 장1 페이지 레이아웃
• 1-1 프로젝트 설명
• 1-2 로그인 등록 레이아웃 구축
• 1-3 목록 레이아웃 구성
• 1-4 로고와 검색창
• 1-5 제품 카테고리 탐색 레이아웃
• 1-6 경로 탐색 레이아웃
• 1-7 경로 탐색 데이터의 동적 렌더링
• 장2 돋보기 효과
• 2-1 왼쪽 돋보기 레이아웃 구성
• 2-2 돋보기 마우스 이동 효과
• 2-3 돋보기 마우스를 움직여 마스크 요소의 드래그 효과를 구현하세요.
• 2-4 마스크 요소 이동을 위한 경계 제어
• 2-5 돋보기를 움직이면 큰 그림 요소를 같은 비율로 움직이는 효과가 나타납니다.
• 2-6 돋보기 썸네일 레이아웃 구성 효과
• 2-7 돋보기 썸네일 데이터의 동적 렌더링
• 2-8 축소판을 클릭하면 이미지가 더 작거나 큰 이미지로 변경됩니다.
• 2-9 썸네일의 좌우 화살표 클릭을 통한 이미지 캐러셀 효과 원리 분석
• 2-10 각 그림 이동 거리와 UL 이동 거리를 계산합니다.
• 장3 오른쪽의 제품
• 3-1 오른쪽 제품 상단의 상세 소개 레이아웃
• 3-2 오른쪽 제품 상단에 대한 자세한 설명은 데이터의 동적 렌더링을 소개합니다.
• 3-3 오른쪽 제품 하단에 대한 제품 매개변수 레이아웃 구성
• 3-4 오른쪽 제품 하단에 제품 매개변수 데이터의 동적 렌더링
• 장4 제품 매개변수
• 4-1 독점 효과를 보려면 제품 매개변수 첫 번째 행의 텍스트 색상을 클릭하세요.
• 4-2 클로저 함수를 사용하여 루프 내 이벤트의 변수 문제 해결
• 4-3 선택 결과의 레이아웃 구성 구현
• 4-4 해당 결과를 동적으로 추가하려면 제품 매개변수를 클릭하세요.
• 4-5 해당 매개변수 데이터를 삭제하려면 삭제 버튼을 클릭하세요.
• 4-6 패키지 가격 변경 기능
• 장5 중앙 왼쪽 탭
• 5-1 장바구니 및 구매가격 레이아웃 구축
• 5-2 왼쪽 가운데 탭의 전체 구조 레이아웃
• 5-3 왼쪽 중간 탭의 특정 콘텐츠 레이아웃 구성
• 장6 중앙 오른쪽 탭
• 6-1 중앙의 오른쪽에 일치하도록 전체 구조 레이아웃을 선택하십시오.
• 6-2 코로케이션에서 체크박스 선택 시 패키지 가격 연계 효과 선택
• 6-3 오른쪽 가운데 탭 레이아웃 만들기
• 장7 오른쪽 탐색 모음
• 7-1 공개 탭 기능을 캡슐화하고 호출
• 7-2 오른쪽 네비게이션 바의 작업 부분 구성
• 7-3 오른쪽 탐색 모음의 중간 레이아웃 구성
• 7-4 오른쪽 탐색 모음을 클릭하여 상태 전환 구현