[오블완 챌린지] 시작

티스토리에서 3주 동안 블로그 글을 쓰는 챌린지를 시작했다.

https://www.tistory.com/event/write-challenge-2024

작심삼주 오블완 챌린지

오블완 챌린지

단 3주동안만 진행되는데 한동안 쉬엄쉬엄 했던 블로그를 매일 써볼까 한다.

---

오블완 챌린지 기념 이벤트 페이지 CSS 뜯어보기

 

 

개발자 도구 HTML

 
class 명을 보면 style_strip_text라고 적혀있다. 이 class를 가진 것들이 돌아가는 것이라 볼 수 있다.
그리고 위의 div를 보면 style_strip이라고 적혀있고 style에 적힌것을 확인할 수 있는데 이것은 div의 위치와 왼쪽에 살짝 접힌 부분에 대한 것을 설정한 것이다.

style_strip_text

keyframe을 보면 왼쪽 스크롤은 TranslateX 0 부터 -100%으로 이동하도록 하고 있다.
그리고 style_strip_text에서 animation3s linear 그리고 infinite를 통해서 무한 반복을 하고 있다.
이 코드들을 참고하면 무한 스크롤 화면을 만들 수 있을 것이다.
 
다음에 시간 되면 직접 만들어서 테스트 해볼 예정이다.