내용 텍스트 뒤에 <style>...</style> 태그로 CSS 스타일을 지정할 수 있습니다.
참고로 <style>에 포함되는 {ID}는 빼거나 수정하면 안됩니다
- 예시 :
[[FlipCard(완전한 커스텀 디자인|CSS를 직접 제어합니다.|<style>{ID} { border-radius: 20px;}{ID} .flip-front { background: linear-gradient(45deg, #6a11cb, #2575fc); color: white; font-family: 'Verdana', sans-serif; font-weight: bold;}{ID} .flip-back { background: #f1f3f5; color: #343a40; border: 2px dashed #868e96;}</style>)]]
FlipCard 매크로의 주요 CSS 클래스
1. {ID}
설명: 카드 전체를 감싸는 최상위 컨테이너입니다. 카드의 전체적인 크기, 위치, 3D 효과의 깊이 등을 제어합니다.
주요 기본 속성 및 역할:
width, height: 카드의 너비와 높이를 결정합니다.
perspective: 3D 뒤집기 효과의 원근감(깊이)을 설정합니다. 값이 클수록 효과가 밋밋해지고, 작을수록 왜곡이 심해집니다.
cursor: pointer: 마우스를 올렸을 때 클릭할 수 있다는 것을 알려주는 손가락 모양 커서입니다.
margin: 카드 주변의 바깥 여백입니다.
2. {ID} .flip-inner
설명: 카드 앞면과 뒷면을 실제로 감싸고, 회전 애니메이션이 일어나는 핵심 요소입니다.
주요 기본 속성 및 역할:
transition: 뒤집히는 애니메이션의 속도를 제어합니다. (예: transition: transform 0.6s;는 0.6초 동안 뒤집힌다는 의미)
transform-style: preserve-3d: 자식 요소들(앞면, 뒷면)이 3D 공간에 함께 있도록 만듭니다. 이 속성이 없으면 카드가 평면적으로 뒤집힙니다.
3. {ID} .flip-front, {ID} .flip-back
설명: 앞면과 뒷면 모두에게 공통으로 적용되는 스타일을 정의하는 부분입니다. 여기서 글자의 정렬, 테두리, 그림자, 안쪽 여백 등을 한 번에 제어할 수 있습니다.
주요 기본 속성 및 역할:
border: 카드의 테두리 스타일입니다.
border-radius: 카드의 모서리를 둥글게 만듭니다.
box-shadow: 카드에 그림자 효과를 줍니다.
display: flex, align-items: center, justify-content: center: 카드 안의 텍스트를 수직/수평 중앙에 정렬시킵니다.
padding: 카드 테두리와 내부 텍스트 사이의 안쪽 여백입니다.
font-size: 기본 글자 크기입니다.
4. {ID} .flip-front
설명: 앞면에만 적용되는 스타일을 정의합니다. 주로 배경색이나 글자색을 개별적으로 지정할 때 사용합니다.
주요 기본 속성 및 역할:
background, color 등
5. {ID} .flip-back
설명: 뒷면에만 적용되는 스타일을 정의합니다.
주요 기본 속성 및 역할:
background, color 등
transform: rotateY(180deg): 뒷면을 미리 180도 뒤집어 놓아, 전체가 회전할 때 올바른 면이 보이도록 준비시킵니다.
6. {ID}.flipped .flip-inner (상태 클래스)
설명: 사용자가 카드를 클릭했을 때 적용되는 스타일입니다. .flipped 클래스는 클릭 시 {ID} 컨테이너에 동적으로 추가됩니다.
주요 기본 속성 및 역할:
transform: rotateY(180deg): .flip-inner 요소를 Y축(세로축) 기준으로 180도 회전시켜 뒷면이 보이게 합니다.
(응용): 이 부분을 transform: rotateX(180deg);로 바꾸면 카드가 세로가 아닌 가로로 뒤집히는 효과를 만들 수 있습니다.
