연습장:삼쩌모/1: 두 판 사이의 차이

2026년 2월 6일 (금) 09:29 판

삼쩌모의 연습장
메인 범용	1번 틀 제작	2번 나무마크	3번 위키 점검	4번 기능 실험
5번 기능 실험	6번 틀 제작	7번 공용 틀	8번 틀 제작	메모 메모

구종차트

4FB
44%

CRV
17%

SLD
31%

@@ 1번째 줄: / 1번째 줄: @@
 {{삼쩌모 연습장}}{{목차}}
 == 구종차트 ==
+{{#css:
+/* 공통 컨테이너 설정 */
+  .pitch-container {
+    position: relative;
+    height: 180px; /* 정보가 펼쳐질 공간 확보 */
+    margin-top: 3px;
+    margin-bottom: 1rem;
+  }
+  /* 각 구종(Circle) 기본 스타일 */
+  .pitch-node {
+    position: absolute;
+    left: 50%;
+    z-index: 40;
+    width: 3.2rem;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 1.1;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    transform: translateX(-50%);
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+    overflow: hidden;
+  }
+  /* 호버 시 펼쳐지는 상세 정보 스타일 */
+  .details {
+    max-height: 0;
+    opacity: 0;
+    font-size: 0.75rem;
+    margin-top: 4px;
+    transition: all 0.3s ease-in-out;
+    border-top: 1px solid rgba(0,0,0,0.1);
+    padding-top: 4px;
+  }
+  /* 호버 액션: 원이 커지며 정보 출력 */
+  .pitch-node:hover {
+    border-radius: 12px;
+    height: auto;
+    z-index: 100;
+  }
+  .pitch-node:hover .details {
+    max-height: 50px;
+    opacity: 1;
+  }
+  /* 선(Tail) 스타일 유지 */
+  .pitch-line {
+    position: absolute;
+    left: 50%;
+    width: 2rem;
+    transform: translateX(-50%);
+    z-index: 30;
+  }
+}}
 <div {{style|mt-3px mb-1rem pos-relative h-134px}}>
 <div style="left: 50%; position: absolute; z-index:40; background:var(--bg); border: 0.3rem double light-dark(#cccccc, #555555); color: {{adt|#b31b1b}}; transform: translateX(-1.9rem); border-radius:50%; width:3.2rem; margin-left:auto; margin-right:auto; text-align:center; line-height:1.1; padding-top:0.5rem; padding-bottom:0.5rem;">'''4FB'''<br>44%</div>