국비 지원 IT(웹앱개발) 취업반 강의 42일차 (HTML, CSS, JS)

See the Pen 카카오 페이증권 모작; by qBlackBirdp (@qBlackBirdp) on CodePen.

어제 하던 카카오증권 사이트 모작인데 난 일단 이까지 했다. 근데 이게 고객센터가 내려 앉는데 대체 이유가 뭔지 몰라서 막혔다. 왜 내려앉는지 이해가 안되서 어디서부터 뭘 고쳐야될지 모르겠다. li가 많아서 그런 것 같긴한데 강사님이 이까지 구현하는 것을 보여주실 땐 아무문제 없이 잘 됐다. 나랑 코드도 거의 유사한 것 같은데 일단 원인을 찾아야될 것 같다.

아 플렉스가 없었다.

See the Pen 카카오 페이증권 모작; by qBlackBirdp (@qBlackBirdp) on CodePen.

해결 완료 이제는 2차 메뉴가 열릴 때 뒷 배경이 매뉴의 개수에 맞춘 높이가 설정되게끔 하면 된다.

이거 한참 했는데 뭐 잘못 건드려서 갑자기 탑바가 겹쳐서 나온다. 나중에 수정하고 따로 올려야겠다.

아무튼 다음

See the Pen 로딩 화면 구현, masonry, imagesloaded by qBlackBirdp (@qBlackBirdp) on CodePen.

masonry, imagesloaded를 사용해서 로딩화면 구현과 이미지를 임의대로 정리하게끔 하는 것을 배웠다.

다음으로 ScrollTrigger/GSAP 이라는 사이트를 한번 보라고 하셔서 살펴봤다. JS를 사용해서 스크롤로 트리거를 만들고, 그 트리거가 작동하면 화면상 어떤 행동을 하게끔 만들어주는 것 같다.

스크롤트리거를 사용하려면 앞서 사용했던 이미지로디드도 꼭 같이 사용해야된다고 하셨다.

사용예제

See the Pen 스크롤트리거에 꼭 같이 써야하는 imagesLoaded by qBlackBirdp (@qBlackBirdp) on CodePen.

다음으로 또 cndjs에서 가져온 niceScroll이라는 것을 써봤다.
(이쁜 백그라운드 컬러까지 써봤다. webgradients)

See the Pen niceScroll 사용. by qBlackBirdp (@qBlackBirdp) on CodePen.

근데 이게 스마트폰같이 터치하는 환경이면 불편하게 된다고 한다. 그래서 js에 코드를 추가해준다.

See the Pen niceScroll 사용. 터치 환경조작 by qBlackBirdp (@qBlackBirdp) on CodePen.

범용 나이스스크롤바 라이브러리 적용 및 사용법을 써둔 것이다.

See the Pen 범용 나이스스크롤바 라이브러리 1, 소개 및 사용법 by qBlackBirdp (@qBlackBirdp) on CodePen.

이렇게 하면 스마트폰 같은 기기로도 터치 스크롤을 컨트롤 가능하게 해준다.

css keyframes

css keyframes

CSS @keyframes는 애니메이션을 정의하는데 사용된다. 특정 CSS 속성 값이 어떻게 변하는지를 단계별로 지정할 수 있다. @keyframes를 사용하여 애니메이션을 정의한 후, 이를 animation 속성을 통해 HTML 요소에 적용할 수 있다.

예제

See the Pen keyframes 사용 예제 by qBlackBirdp (@qBlackBirdp) on CodePen.

잘 다루면 복잡한 애니메이션도 구현이 가능하다.

animation 속성

@keyframes와 함께 사용되는 animation 속성에는 여러 서브 속성이 있다.

• animation-name: 사용할 애니메이션의 이름 (@keyframes에서 정의한 이름).
• animation-duration: 애니메이션의 지속 시간 (예: 2s, 3s, 500ms).
• animation-timing-function: 애니메이션의 속도 곡선 (예: linear, ease, ease-in, ease-out, ease-in-out).
• animation-delay: 애니메이션이 시작하기 전의 지연 시간 (예: 1s, 500ms).
• animation-iteration-count: 애니메이션 반복 횟수 (예: infinite, 1, 2).
• animation-direction: 애니메이션 반복 방향 (예: normal, reverse, alternate, alternate-reverse).
• animation-fill-mode: 애니메이션의 끝난 후 상태 (예: none, forwards, backwards, both).

See the Pen keyframes 종합 사용 예제 by qBlackBirdp (@qBlackBirdp) on CodePen.

죄다 사용하면 이런 것도 만들 수 있다.

svg로 도형까지 그릴 수 있는데 이건 엄청 복잡하다.
말 그대로 코드로 한땀한땀 도형을 그려야되는 것이다. 이건 챗 gpt한테 부탁해서 간단한 것을 만들어보자.
(직접 할 엄두도 안난다.)

from 태그까지 배우고 수업은 끝이 났다. fromspree에 가입 후 해당 코드를 복사해오면 내 사이트를 보고 메일을 남길 수 있게 해준다.