07.08 CSS Animation_2

김민지·2021년 7월 8일

개발일지

목록 보기

9/13

CSS ANIMATION 실습_2 ✍️

어제 배운 CSS 애니메이션을 바탕으로 텐바이텐 사이트를 클론코딩 해보았다.

✔️ 제일 큰 이미지를 감싸고 있는 div에는 내용물이 넘치지 않도록 overfolw : hidden
✔️ 마우스 오버시 커서가 손가락모양으로 바뀌게 하고(cursor : pointer), 이미지가 1.1배 확대되도록 scale을 조정한다. 움직임 부드럽게 하기 위해 transition 입력
✔️ 작은 이미지 세개는 일정한 간격으로 정렬 (이미지 감싸고 있는 div에 flex사용)
<style>
.tbt-img2 {
    display: flex;
    justify-content: space-between;
    width: 490px;
}
</style>
✔️ 우측 상단 모서리에 붉은색 할인 표시는 span을 사용해 사각형을 만들고 rotate를 활용해서 각도 조절을 하였다. 그리고 display속성을 absolute로 하여 위치값을 지정하였다. 마우스오버 했을때는 사라지게 하기 위하여 가상선택자 hover의 위치값은 마이너스로 지정.
<style>
.tbt>span {
    position: absolute;
    right: -25px;
    top: -25px;
    width: 50px;
    height: 50px;
    transform: rotate(45deg);
    background-color: rgb(255, 49, 49);
    transition: all 0.3s;
}
.tbt-img2>div:hover>span {
    right: -100px;
    top: -100px;
}
</style>
✔️ 반대로 상품명과 가격은 마우스오버 했을 때 나타나도록 설정하였다.
<style>
.desc {
    position: absolute;
    left: 0;
    bottom: -70px;
    width: 150px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #fff;
    transition: bottom 0.3s;
}
.tbt-img2>div:hover>.desc {
    bottom: 0;
}
</style>

animate.css 활용

animate.css

수많은 예시들중에서 움직임을 살펴보고 주소를 카피해서 바로 적용해볼 수 있다.

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>

적용하고자하는 태그의 클래스명에 다음과 같이 복사 붙여넣기를 해주면 된다.

<h1 class="animate__animated animate__bounce">An animated element</h1>

Code Pen - CSS 애니메이션 활용

코드펜에서 css라고 검색하면 다양한 레퍼런스들을 만나볼 수 있다.
자바스크립트를 활용하여 만들었다고 생각했었는데 생각과는 다르게 CSS코드로만 만든 것들이 많아서 신기했다. 웹사이트를 만들 때 참고하면 좋을 것 같다.

학습 소감

수업을 들으면서 코딩을 따라서 타이핑할 때는 내가 이해를 잘 하고있는가에 대해서 확신이 서지 않았는데, 배운 내용을 바탕으로 직접 클론코딩을 해보니 어느 부분을 이해하고있는지 혹은 어느 부분에서 막히는지 알 수 있었다. 텐바이텐 실습 중 작은 이미지 오른쪽 모퉁이에 가격할인표를 어떻게 만들어야할지 고민이 되었다. 개발자 도구로 원사이트를 살펴보니 span을 이용하여 사각형을 만들고 rotate로 각도 조절을 하고 위치 지정을하였다. hover 애니메이션에 대해서는 딱히 어려웠던 점은 없었다. 앞으로도 기존에 있는 많은 사이트들을 참고해서 따라 만드는 연습을 꾸준히 해야할 것 같다.

김민지

프론트엔드개발자 지망생

이전 포스트

07.07 CSS Animation

다음 포스트

07.09 미디어쿼리

1개의 댓글

Yesol Lee

2021년 7월 8일

저도 자극 받아서 텐바이텐 연습해봤어요 좋은 연습예제 배워갑니다!

답글 달기