지학사 부분모작 (완성)

https://textbook.jihak.co.kr/

지학사 2022 개정교과서

 

완성 (19단계)

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

 

 

 

---

0단계

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

 

 

1단계

- PC 상단바-로고

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

 

 

2단계

- PC 상단바-메뉴

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

 

 

3단계

- PC 상단바-메뉴-이벤트 로고(?)

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

 

 

4단계

- PC 상단바-메뉴-호버

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

 

 

5단계

- 모바일 상단바

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

 

 

6단계

- 상단바 반응형 적용

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

ㄴ 이런 상황을 대비해 상단바에도 container를 적용한다.

ㄴ 모바일 상단바는 보통 적용하지 않는다.

 

+) 질문: 바뀔 때 애니메이션?

ㄴ 이 경우 두 개를 만든 것이 아니라 너비값을 변경하고 transition을 준 것.

 

 

7단계

- 메인 섹션/배경

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

 

+) 질문: 상단바 absolute와 sticky?

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

ㄴ 해결방법: https://codepen.io/EONJENOG/pen/dyBwNRK?editors=1010

 

 

8단계

- 태블릿 탑바

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

 

 

9단계 메인

- a 태그 선생님 버전

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

- a 태그

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

 

 

10단계 메인

- 메인 캐릭터

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

- 책 캐릭터

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

 

 

11단계 메인 호버

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

 

 

12단계 플로팅

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

 

 

13단계 pc banner

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

 

 

14단계 pc banner 효과 적용

https://codepen.io/EONJENOG/pen/YzmPNJB?editors=1000 (실패)
https://codepen.io/EONJENOG/pen/RwXNKdm?editors=1000 (성공)

 

 

15단계 pc banner 효과 속도 조절

https://codepen.io/EONJENOG/pen/PoMwpZP?editors=1000
+) 설명 https://codepen.io/EONJENOG/pen/OJKPppX?editors=1000

• footer class="pc-banner wow fadeInUp" data-wow-duration="0.5s" data-wow-offset="100"

 

 

16단계 footer

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

 

 

17단계 pc banner 애니메이션 aos 적용

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

+) aos 수업페이지 

 

 

18단계 배너 반응형

https://codepen.io/EONJENOG/pen/eYqdwrj?editors=0100

 

 

19단계 반응형 효과

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