지승씨앤아이 모작 (완성)

지승씨앤아이 홈페이지 바로가기

지승씨앤아이

 

2024-08-30

[테스트]

1) https://codepen.io/EONJENOG/pen/rNEZOad?editors=1000

2) https://codepen.io/EONJENOG/pen/eYwLpJM?editors=1000

3) https://codepen.io/EONJENOG/pen/QWXVjNv?editors=1000

4) https://codepen.io/EONJENOG/pen/JjQaYRx?editors=1000

5) https://codepen.io/EONJENOG/pen/qBzMOmw?editors=1100

6) https://codepen.io/EONJENOG/pen/JjQaYJV?editors=1000

 

[숙제]

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

밑줄  https://codepen.io/EONJENOG/pen/GRbXQVV?editors=1100
2차메뉴호버https://codepen.io/EONJENOG/pen/wvLEmaM?editors=1100

<완성> https://codepen.io/EONJENOG/pen/wvLEmaM?editors=1100

 

 

---

2024-09-02

- 배경 해결
https://codepen.io/EONJENOG/pen/NWZOGzp?editors=1000

 

[아이콘 애니메이션 추가]

- 시작
https://codepen.io/EONJENOG/pen/NWZOGzp?editors=1000

 

- 1단계 아이콘 만들기
https://codepen.io/EONJENOG/pen/xxoyOKW?editors=1000

 

- 2단계 아이콘 클릭 효과-호버로
https://codepen.io/EONJENOG/pen/OJeBXVJ?editors=1000

 

- 3단계 아이콘 클릭 효과-JS
https://codepen.io/EONJENOG/pen/wvLYWoM?editors=1100

 

- 4단계 아이콘 메뉴 애니메이션
https://codepen.io/EONJENOG/pen/ZEdqOLa

 

---

2024-09-03

[아이콘 애니메이션 추가]

5단계 아이콘 메뉴 구조

 

- 실패

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

 

- 1차 메뉴 호버 오류발견

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

ㄴ opacity만 조절했을 경우, 보이지 않을 뿐 그 자리에 있기 때문에

마우스가 2차메뉴의 위로 지나갈 경우 2차메뉴가 보이게 된다.

 

- 1차 메뉴 호버 오류 해결 1단계

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

ㄴ a태그가 늦게 사라짐.

 

- 1차 메뉴 호버 오류 해결 2단계 !질문

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

<해결> 

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

ㄴ transition-colors duration-200로 해결

ㄴ 테일윈드로 duration-200만 작성할 경우 모든 애니메이션에 duration이 적용되어

a태그가 늦게 사라지게 된다. 따라서 transition-colors를 함꼐 작성한다.

ㄴ visibility는 transition이 적용되지 않는다.

따라서 자연스럽게 사라지는 효과를 적용하고 싶다면 opacity를 함께 적용해야 된다.

---

5단계 아이콘 메뉴 구조: 재도전

- 재도전 시작코드

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

 

6단계 아이콘 메뉴 구조 전체 적용

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

 

7단계 아이콘 메뉴 색상 디테일

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

 

8단계 아이콘 메뉴 z-index 

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

 

ㄴ 검사를 해서 이름을 확인하면 내가 어떤 것을 선택했는지 알 수 있다.
ㄴ 확인한 후 z-index를 줘라

 

ㄴ 드래그한 부분이 막고 있었다.

 

 

9단계 아이콘 메뉴 호버 색상 커스텀

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

 

10단계 아이콘 메뉴 호버 밑줄

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

 

11단계 아이콘 메뉴 클릭 이벤트 풀기

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

 

12단계 아이콘 메뉴 클릭 시 로고 색상 변경

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

 

 

13단계 배경 필터 적용

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

 

14단계 메뉴 아이콘 나왔을때 필터 색상 변화

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

ㄴ 얘는 어쩔 수 없다. css에 써라.

 

 

15단계 메인 내용

<실패>
https://codepen.io/EONJENOG/pen/MWMzjEq
ㄴ 필터가 메인보다 밑에 있어서 아이콘 메뉴가 나왔을 때 글씨 위에 필터가 적용되지 않음
<2차도전>
https://codepen.io/EONJENOG/pen/abgQmao?editors=1100

 

 

• [추가작업]
  <2차메뉴 transition - opacity 해결>
  https://codepen.io/EONJENOG/pen/rNEQMQg?editors=1100

---

[완성]

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

 

 

+) const의 의미

ㄴ 한 번 선언한 변수를 변경 할 수 없다는 의미
ㄴ 만약 후에 실수로 변경하면 작동했을 때 오류가 뜬다.