[데브코스 FE] 1주차 세번째 수업 2024/07/18

3번째 수업에서는 악명높은 css의 grid, position에 대해 배웠다.그리고 알고있었지만 낯설었던 가상요소와 transform에 대해서도 배웠다. grid를 사용하면 레이아웃을 좀 더 자유롭고 유연하게 할 수 있고position과 가상요소, transform을 이용하면 이미지나 아이콘등을 자유롭게 원하는 위치에 배치할 수 있다. 참고로 실습시간에 진행했던 카드뒤집기는 따로 블로그 글으로 작성해두었다!2024.07.18 - [CSS] - CSS 만으로 카드 뒤집기 애니메이션 구현해보기(transform) CSS 만으로 카드 뒤집기 애니메이션 구현해보기(transform)오늘은 카드에 마우스를 올렸을때, 카드가 뒤집히는 애니메이션을 구현해보고자 합니다. 카드 3개를 만들기 위한 기본적인 html 뼈대..

• format_list_bulleted TIL(Today I Learn)
• · 2024. 7. 22.
• textsms

CSS 만으로 카드 뒤집기 애니메이션 구현해보기(transform)

오늘은 카드에 마우스를 올렸을때, 카드가 뒤집히는 애니메이션을 구현해보고자 합니다. 카드 3개를 만들기 위한 기본적인 html 뼈대 구조,애니메이션을 구현하기 위한 사전 css 지식, 마지막으로 완성된 css 코드 이렇게 3개의 순서로 살펴보고자 합니다.html 구조최상위 컴포넌트 └ div class="card" 3개 └ 각 카드당 2개 (각각 앞 뒷면 담당) └ (카드 이미지 담당) 카드 뒤집기 ..

• format_list_bulleted CSS
• · 2024. 7. 18.
• textsms