|
|
| 1번째 줄: |
1번째 줄: |
|
| |
|
| 여러모로 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; }
| |
| }}
| |