[Toy Project] 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기 [CSS 애니메이션과 JavaScrip- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를yermi.tistory.com- 떨어지는 픽셀이 바닥에 쌓이는 애니메이션 구현하기이번에는 화면 상단에서 떨어지는 랜덤한 색상의 픽셀이 바닥에 쌓이는 애니메이션을 구현해보려고 한다.- stacking-pixels.htmlpixel-container를 포함한 HTML 기본 구조를 설정한다.이 컨테이너는 픽셀들이 쌓이는 공간이 된다. - stacking-pixels.csspixel-con..

- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를 사용하여 간단하게 만들어 볼 것이다.- falling-pixels.htmlHTML 파일에서는 기본적인 구조와 컨테이너 요소(pixel-container)를 정의한다.pixel-container는 픽셀들이 떨어질 영역을 지정한다. -falling-pixels.csspixel-container와 pixel 클래스에 대한 스타일을 지정한다.픽셀의 크기, 초기 위치, 애니메이션 키프레임(@keyframes fall)을 설정하여 픽셀들이 떨어지는 동작을 구현한다.body { margin: 0; p..

- div 가운데 정렬하기 [position: absolute일 때 가운데 정렬하는 방법] div를 사용하다 보면 가운데 정렬하고 싶을 때가 많다. 아래와 같은 div가 있고, child를 가운데 정렬하고 싶다고 보자. 눈으로 볼 수 있도록 아래와 같은 스타일을 추가해준다. 이렇게 하면 왼쪽 상단에 갈색 네모가 위치해 있다. .parent { background-color: white; border: solid 1px black; width: 200px; height: 200px; } .child { background-color: brown; width: 50px; height: 50px; } HTML 삽입 미리보기할 수 없는 소스 - 상단 가운데 정렬 이 위치를 상단 가운데로 정렬해보려고 한다. ch..

- Flex와 Grid 개념 정리 사이트 CSS 레이아웃 관련해서 찾아보던 중 1분코딩이라는 블로그가 개념을 잘 정리해놔서 포스팅한다. 아래의 게시글들이 Flex와 Grid에 대해 가장 잘 정리해놓았다고 생각한다. - CSS Flex, Grid 관련 게시글 이번에야말로 CSS Flex를 익혀보자 studiomeal.com 이번에야말로 CSS Grid를 익혀보자 studiomeal.com 이 분 인프런에서 Flex와 Grid 관련 강의도 하신 거 같다. 관심 있으신 분은 수강하시길! (따로 돈 받은 거 아님) CSS Flex와 Grid 제대로 익히기 강의 - 인프런 현재, 그리고 미래의 표준이 될 CSS 레이아웃 작성 방식인 Flex와 Grid에 대해 배울 수 있습니다., 당신이 웹 퍼블리셔, 프론트엔드 ..

- 자동 롤링 배너 만드는 법 무한 롤링 배너는 원본배너와 복제배너를 한 방향으로 이동시켜주면서 배너 2개가 번갈아가며 뷰포트에 나타나는 형식으로 실제 화면상에서 보이는 동작은 하나의 배너가 무한 롤링하는 것처럼 보이게 된다.