연습장:Sakura/2 문서 원본 보기

윤대표가 사랑합니다
https://cdn.discordapp.com/attachments/1188919942188372030/1196376908905066538/e716e85a33d322ed9c35f3be4b7ed7441259f45515f38cafe2f10032929ed9eb.png

여러모로 CSS로 꾸며보자
<!-- 커스텀 배경 라이트/다크 겸용 -->
<div class="CustomBackground bg-red-50 dark:bg-red-950"></div>
{{#CSS:
.CustomBackground {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1000;
}
}}

<!-- 카드 뒤집기 효과 -->
<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:
.Liberty .content-wrapper { display: block !important; }
.Liberty .content-wrapper .liberty-sidebar { display: none !important; }
.Liberty .content-wrapper .liberty-content .liberty-content-main { border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
.Liberty .content-wrapper .liberty-footer { display: none !important; }
}}