아이들나라 부분모작 (완성)

https://www.i-nara.co.kr/

볼 때마다 자란다 아이들나라

 

완성 코드펜

https://codepen.io/EONJENOG/pen/VwJNyNg?editors=1100

아이들나라 부분모작 18단계

 

 

---

0단계

https://codepen.io/EONJENOG/pen/VwJBdaB

 

 

1단계: 상단바 구조잡기

https://codepen.io/EONJENOG/pen/xxoJzOP

 

 

2단계: 로고

https://codepen.io/EONJENOG/pen/mdZjKrv?editors=1100

 

 

3단계: 사용자메뉴

- 구조

https://codepen.io/EONJENOG/pen/YzojvVR?editors=1100

- 검색

https://codepen.io/EONJENOG/pen/yLdqEzg?editors=1000

- 버튼 1

https://codepen.io/EONJENOG/pen/XWLBYYV?editors=1000

- 버튼 2

https://codepen.io/EONJENOG/pen/GRbBGVg?editors=1000

- 아이콘

https://codepen.io/EONJENOG/pen/bGPxNqj?editors=1000

 

 

4단계: 호버

https://codepen.io/EONJENOG/pen/gONdbWo?editors=1000

 

 

5단계: 배경

https://codepen.io/EONJENOG/pen/NWZomPP?editors=1000

ㄴ 부모에 relative를 빼기

ㄴ absolute 한 후 위치 속성 top-0 left-0 잊지 않기

 

 

6단계: 메인 텍스트

https://codepen.io/EONJENOG/pen/PorVgNM?editors=1000

 

 

7단계: 메인 버튼&스크롤 다운 버튼

https://codepen.io/EONJENOG/pen/BagMEdN?editors=1000

 

+) 가상요소 호버 처리 방법

+) 질문: 스크롤다운 버튼 움직이는 거 할 수 있는지?

    ㄴ html과 css로 할 수 있음

    ㄴ animation

+) 배경 동영상 크기 달라짐

 

 

 

 

8단계: 슬라이더

<설명>

https://codepen.io/EONJENOG/pen/XWLOLop?editors=1000

 

1차시도 실패

 

2차시도

https://codepen.io/EONJENOG/pen/qBzgeBo?editors=1100

 

3차시도- 1페이지 성공

https://codepen.io/EONJENOG/pen/PorLKaw?editors=1100

ㄴ 버튼 전체 화면 앱솔루트 없애기

  ㄴ 페이지네이션을 막아버리기 때문에

ㄴ 페이지네이션은 css로 처리

 

 

9단계: 슬라이더 모두 적용

https://codepen.io/EONJENOG/pen/jOjJLRm?editors=1100

 

 

10단계: 슬라이더 배경 필터

https://codepen.io/EONJENOG/pen/vYqPeBY?editors=1000

 

 

11단계: 상단바 합치기

https://codepen.io/EONJENOG/pen/gONEGar?editors=1000

 

 

12단계: 슬라이더 페이드 효과

https://codepen.io/EONJENOG/pen/MWMxEjG?editors=1000

 

 

13단계: 슬라이더 자동 전환

https://codepen.io/EONJENOG/pen/mdZoBWP?editors=1100

 

 

14단계: 스크롤 다운 버튼 애니메이션

https://codepen.io/EONJENOG/pen/poXYWPV?editors=1010

 

 

15단계: 슬라이더 드래그 없애기

 

 

16단계 사이드바

- 사이드바 배경 나왔다 없어지기

https://codepen.io/EONJENOG/pen/eYwoNEj?editors=1010

- 사이드바 콘텐츠

https://codepen.io/EONJENOG/pen/ZEdZvXB?editors=1010

- 사이드바 콘텐츠 헤더

https://codepen.io/EONJENOG/pen/BagEJmg?editors=1000

 

 

17단계 사이드바 바디

ㄴ JS와 CSS 효과 잠시 해제 후 진행

 

https://codepen.io/EONJENOG/pen/xxoepJY?editors=1000

 

 

 

18단계 사이드바 바디 호버

https://codepen.io/EONJENOG/pen/VwJNyNg?editors=1000