일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- 웹디자인기능사
- PROJECT
- 코딩독학
- 프론트엔드
- 비전공자
- react
- JavaScript
- 자바스크립트
- CSS
- JS
- 웹디자인기능사실기
- web
- 실기
- 코드공유
- Supabase
- 깃
- 연산자
- 리액트
- 세로메뉴바
- 생활코딩
- 정보처리기사
- HTML
- 타입스크립트
- jQuery
- 웹퍼블리셔
- 렛츠기릿자바스크립트
- 슬라이드전환
- git
- 웹디실기
- github
Archives
- Today
- Total
목록카드뒤집히는효과 (1)
코딩하는라민

[CSS] 카드 뒤집히는 효과 만들기 포트폴리오에 사용한 효과중에 하나인 카드 뒤집히는 효과입니다. 앞면에는 타이틀을 적고 뒷면에는 내용을 적어 마우스를 올리면 카드가 회전하면서 뒷면의 내용을 볼 수 있게 해주는 효과입니다. CSS 만으로도 간단하게 표현 가능한 효과. 디자인 요소를 추가해서 타로카드를 뒤집는 것과 같은 연출을 만들어낼 수 있습니다. 1. 마크업 앞면 뒷면 앞면 뒷면 앞면 뒷면 ✅ wrap 안에 박스(card)를 해주고싶은 카드 수 만큼 만든다. ✅ card 안에 card_box 를 만들고 그 안에 카드의 앞면(front)과 뒷면(back)을 만들어준다. 2. CSS *{ font-size: 30px; font-weight: bold; } #wrap{ width: 800px; height..
Styling/CSS
2022. 11. 21. 12:23