편집 요약 없음 태그: 되돌려진 기여 |
편집 요약 없음 태그: 되돌려진 기여 |
||
| 1번째 줄: | 1번째 줄: | ||
여러모로 CSS로 꾸며보자 | 여러모로 CSS로 꾸며보자 | ||
<!-- 커스텀 배경 라이트/다크 겸용 --> | |||
<div class="CustomBackground bg-red-50 dark:bg-red-950"></div> | <div class="CustomBackground bg-red-50 dark:bg-red-950"></div> | ||
{{#CSS: | {{#CSS: | ||
| 11번째 줄: | 12번째 줄: | ||
} | } | ||
}} | }} | ||
<!-- 카드 뒤집기 효과 --> | |||
<div class="flip"> | |||
<div class="card"> | |||
<!-- 앞면 --> | |||
<div class="front"> | |||
<h1>앞면</h1> | |||
</div> | |||
<!-- 뒷면 --> | |||
<div class="back"> | |||
<h1>뒷면</h1> | |||
</div> | |||
</div> | |||
</div> | |||
{{#CSS: | |||
.flip { | |||
width: 200px; | |||
height: 250px; | |||
position: relative; | |||
perspective: 1100px; | |||
margin: 2rem; | |||
} | |||
.card { | |||
width: 100%; | |||
height: 100%; | |||
position: relative; | |||
transition: .4s; | |||
transform-style: preserve-3d; | |||
} | |||
.front, .back { | |||
position: absolute; | |||
width: 100%; | |||
height: 100%; | |||
backface-visibility: hidden; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
color: #fff; | |||
} | |||
.front { | |||
background: tomato; | |||
} | |||
.back { | |||
background: royalblue; | |||
transform: rotateY(180deg); | |||
} | |||
.flip:hover .card { | |||
transform: rotateY(180deg); | |||
} | |||
}} | |||
{{#CSS: | {{#CSS: | ||
.Liberty .content-wrapper { display: block !important; } | .Liberty .content-wrapper { display: block !important; } | ||
2024년 1월 9일 (화) 21:31 판
여러모로 CSS로 꾸며보자
앞면
뒷면