User:Pjzeta: 두 판 사이의 차이

내용 삭제됨 내용 추가됨

인라인

2026년 6월 5일 (금) 15:11 기준 최신판

코덱스 아이콘 라이트 모드 개선안 비교

각 방안을 라이트/다크 배경에 고정해 나란히 표시. 실제 적용 시에는 틀:CodexTable/styles.css에 CSS 한 줄을 추가하는 방식.

방안	라이트 배경	다크 배경	비고
A. 현재 (보정 없음)			라이트에서 아이콘 소실
B. 다크 칩 — 그라데이션			양 테마 동일 CSS, 인게임 UI 느낌. 테마 분기 불필요
C. 다크 칩 — 단색 + 테두리			B보다 평면적, 다크에서 테두리로 칸 구분 명확
D. 외곽선 강화 (drop-shadow)			16px 스탯 아이콘에 쓰는 방식. 면적 큰 흰 영역 내부는 여전히 흰색
E. 반전 (invert, 라이트 한정)			라이트에서만 반전 적용 가정. 테마 3종(라이트/다크/OS 자동) 분기 CSS 필요, 반투명 픽셀 회색 번짐 가능

@@ 1번째 줄: / 1번째 줄: @@
+== 코덱스 아이콘 라이트 모드 개선안 비교 ==
-== InfoboxNeue 테스트 — 왕벌의 비행 ==
+각 방안을 라이트/다크 배경에 고정해 나란히 표시. 실제 적용 시에는 <code>틀:CodexTable/styles.css</code>에 CSS 한 줄을 추가하는 방식.
+{| class="wikitable" style="word-break:keep-all;"
-{{#invoke:InfoboxNeue|fromArgs
+! 방안 !! style="min-width:240px;" | 라이트 배경 !! style="min-width:240px;" | 다크 배경 !! 비고
-|title = 왕벌의 비행
+|-
-|subtitle = 휘몰아치는 선율로 이름난 비행의 곡
+| '''A. 현재''' (보정 없음)
-|image = 왕벌의_비행.png
+| style="background:#ffffff; text-align:center;" | [[파일:왕벌의_비행.png|40px|link=]] [[파일:트로이의_목마.png|40px|link=]] [[파일:깨달음.png|40px|link=]] [[파일:운명_교향곡.png|40px|link=]]
+| style="background:#14181f; text-align:center;" | [[파일:왕벌의_비행.png|40px|link=]] [[파일:트로이의_목마.png|40px|link=]] [[파일:깨달음.png|40px|link=]] [[파일:운명_교향곡.png|40px|link=]]
-|section1 = 기본 정보
+| 라이트에서 아이콘 소실
-|label2 = 분류 | content2 = 공격형
+|-
-|label3 = 가격 | content3 = 600
+| '''B. 다크 칩 — 그라데이션'''
+| style="background:#ffffff; text-align:center;" | <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-|section4 = 보유 효과
+| style="background:#14181f; text-align:center;" | <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; background:linear-gradient(160deg,#2a3140,#161a23); border-radius:8px; padding:4px; margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-|label5 = 공격 속도 | content5 = 8.5% / 17.5% / 26% / 36.5%
+| 양 테마 동일 CSS, 인게임 UI 느낌. 테마 분기 불필요
+|-
-|section6 = 고유 효과
+| '''C. 다크 칩 — 단색 + 테두리'''
-|section-col6 = 1
+| style="background:#ffffff; text-align:center;" | <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-|label7 = T2 | content7 = 적 히어로에게 기본 공격 시 다음 3회의 기본 공격 동안 공격 속도가 '''50%''' 증가합니다. (15초)
+| style="background:#14181f; text-align:center;" | <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; background:#1f2430; border:1px solid #3a4256; border-radius:8px; padding:4px; margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-|label8 = T4 | content8 = 적 히어로에게 기본 공격 시 다음 3회의 기본 공격 동안 공격 속도가 '''100%''' 증가하고 '''기본 공격으로 입히는 피해가 20% 증가합니다'''. (15초)
+| B보다 평면적, 다크에서 테두리로 칸 구분 명확
-}}
+|-
+| '''D. 외곽선 강화''' (drop-shadow)
-----
+| style="background:#ffffff; text-align:center;" | <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
+| style="background:#14181f; text-align:center;" | <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-== 바리에이션 1 ==
+| 16px 스탯 아이콘에 쓰는 방식. 면적 큰 흰 영역 내부는 여전히 흰색
+|-
-<div style="float:right; width:340px; margin:0 0 1em 1em; border:1px solid var(--border-color-base); border-radius:6px; background:var(--color-surface-1); word-break:keep-all; overflow:hidden;">
+| '''E. 반전''' (invert, 라이트 한정)
-<div style="padding:12px; text-align:center; background:var(--color-surface-2);">[[파일:왕벌의_비행.png|260px|프레임없음]]</div>
+| style="background:#ffffff; text-align:center;" | <span style="display:inline-block; filter:invert(1); margin:1px;">[[파일:왕벌의_비행.png|40px|link=]]</span> <span style="display:inline-block; filter:invert(1); margin:1px;">[[파일:트로이의_목마.png|40px|link=]]</span> <span style="display:inline-block; filter:invert(1); margin:1px;">[[파일:깨달음.png|40px|link=]]</span> <span style="display:inline-block; filter:invert(1); margin:1px;">[[파일:운명_교향곡.png|40px|link=]]</span>
-<div style="padding:10px 14px 4px; text-align:center; font-size:1.3em; font-weight:700;">왕벌의 비행</div>
+| style="background:#14181f; text-align:center;" | [[파일:왕벌의_비행.png|40px|link=]] [[파일:트로이의_목마.png|40px|link=]] [[파일:깨달음.png|40px|link=]] [[파일:운명_교향곡.png|40px|link=]]
-<div style="padding:0 14px 10px; text-align:center; font-style:italic; color:var(--color-subtle); font-size:0.9em;">휘몰아치는 선율로 이름난 비행의 곡</div>
+| 라이트에서만 반전 적용 가정. 테마 3종(라이트/다크/OS 자동) 분기 CSS 필요, 반투명 픽셀 회색 번짐 가능
-<div style="padding:10px 14px; border-top:1px solid var(--border-color-subtle); display:flex; justify-content:space-between;"><span style="color:var(--color-subtle);">분류</span><span>공격형</span></div>
+|}
-<div style="padding:10px 14px; border-top:1px solid var(--border-color-subtle); display:flex; justify-content:space-between;"><span style="color:var(--color-subtle);">가격</span><span>600</span></div>
-<div style="padding:10px 14px; border-top:1px solid var(--border-color-subtle); display:flex; justify-content:space-between;"><span style="color:var(--color-subtle);">공격 속도</span><span>8.5% / 17.5% / 26% / 36.5%</span></div>
-<div style="padding:10px 14px; background:var(--background-color-progressive-subtle); border-top:1px solid var(--border-color-subtle);"><div style="font-weight:700; margin-bottom:4px;">T2 보너스</div><div style="font-size:0.9em;">적 히어로에게 기본 공격 시 다음 3회의 기본 공격 동안 공격 속도가 '''50%''' 증가합니다. (15초)</div></div>
-<div style="padding:10px 14px; background:var(--background-color-warning-subtle); border-top:1px solid var(--border-color-subtle);"><div style="font-weight:700; margin-bottom:4px;">T4 보너스</div><div style="font-size:0.9em;">적 히어로에게 기본 공격 시 다음 3회의 기본 공격 동안 공격 속도가 '''100%''' 증가하고 '''기본 공격으로 입히는 피해가 20% 증가합니다'''. (15초)</div></div>
-</div>
-<div style="clear:both;"></div>
-----
-== 바리에이션 2 ==
-<div style="float:right; width:340px; margin:0 0 1em 1em; border:1px solid var(--border-color-base); border-radius:6px; background:var(--color-surface-1); word-break:keep-all; overflow:hidden;">
-<div style="padding:12px; text-align:center; background:var(--color-surface-2);">[[파일:왕벌의_비행.png|260px|프레임없음]]</div>
-<div style="padding:10px 14px 4px; text-align:center; font-size:1.3em; font-weight:700;">왕벌의 비행</div>
-<div style="padding:0 14px 10px; text-align:center; font-size:0.85em; color:var(--color-subtle);">휘몰아치는 선율로 이름난 비행의 곡</div>
-<div style="padding:8px 14px; border-top:1px solid var(--border-color-subtle); display:flex; justify-content:space-between;"><span style="color:var(--color-subtle);">분류</span><span>공격형</span></div>
-<div style="padding:8px 14px; border-top:1px solid var(--border-color-subtle); display:flex; justify-content:space-between;"><span style="color:var(--color-subtle);">가격</span><span>600</span></div>
-<div style="padding:6px 14px; background:var(--color-surface-2); font-weight:700; border-top:1px solid var(--border-color-subtle);">티어별 보유 효과</div>
-<div style="padding:6px 14px; display:flex; justify-content:space-between;"><span style="color:var(--color-subtle);">T1</span><span>공격 속도 8.5%</span></div>
-<div style="padding:6px 14px; display:flex; justify-content:space-between;"><span style="color:var(--color-subtle);">T2</span><span>공격 속도 17.5%</span></div>
-<div style="padding:6px 14px; display:flex; justify-content:space-between;"><span style="color:var(--color-subtle);">T3</span><span>공격 속도 26%</span></div>
-<div style="padding:6px 14px; display:flex; justify-content:space-between;"><span style="color:var(--color-subtle);">T4</span><span style="font-weight:700;">공격 속도 36.5%</span></div>
-<div style="padding:6px 14px; background:var(--color-surface-2); font-weight:700; border-top:1px solid var(--border-color-subtle);">고유 효과</div>
-<div style="padding:8px 14px; font-size:0.9em;">'''T2''' 적 히어로에게 기본 공격 시 다음 3회의 기본 공격 동안 공격 속도가 '''50%''' 증가합니다. (15초)</div>
-<div style="padding:8px 14px; font-size:0.9em; border-top:1px solid var(--border-color-subtle);">'''T4''' 적 히어로에게 기본 공격 시 다음 3회의 기본 공격 동안 공격 속도가 '''100%''' 증가하고 '''기본 공격으로 입히는 피해가 20% 증가합니다'''. (15초)</div>
-</div>
-<div style="clear:both;"></div>
-----
-== 바리에이션 3 ==
-<div style="float:right; width:320px; margin:0 0 1em 1em; border:1px solid var(--border-color-base); background:var(--color-surface-1); word-break:keep-all; overflow:hidden;">
-<div style="padding:12px; text-align:center; background:var(--color-surface-2);">[[파일:왕벌의_비행.png|240px|프레임없음]]</div>
-<div style="padding:10px; text-align:center; font-size:1.25em; font-weight:700; border-bottom:1px solid var(--border-color-subtle);">왕벌의 비행</div>
-<div style="padding:8px 12px; text-align:center; font-style:italic; color:var(--color-subtle); font-size:0.9em; border-bottom:1px solid var(--border-color-subtle);">휘몰아치는 선율로 이름난 비행의 곡</div>
-<div style="padding:6px 12px; display:flex;"><span style="width:80px; color:var(--color-subtle);">분류</span><span>공격형</span></div>
-<div style="padding:6px 12px; display:flex;"><span style="width:80px; color:var(--color-subtle);">가격</span><span>600</span></div>
-<div style="padding:6px 12px; display:flex;"><span style="width:80px; color:var(--color-subtle);">공격 속도</span><span>8.5% / 17.5% / 26% / 36.5%</span></div>
-<div style="padding:6px 12px; display:flex; border-top:1px solid var(--border-color-subtle);"><span style="width:80px; color:var(--color-subtle); flex-shrink:0;">T2 효과</span><span style="font-size:0.85em;">적 히어로에게 기본 공격 시 다음 3회의 기본 공격 동안 공격 속도가 '''50%''' 증가합니다. (15초)</span></div>
-<div style="padding:6px 12px; display:flex; border-top:1px solid var(--border-color-subtle);"><span style="width:80px; color:var(--color-subtle); flex-shrink:0;">T4 효과</span><span style="font-size:0.85em;">적 히어로에게 기본 공격 시 다음 3회의 기본 공격 동안 공격 속도가 '''100%''' 증가하고 '''기본 공격으로 입히는 피해가 20% 증가합니다'''. (15초)</span></div>
-</div>
-<div style="clear:both;"></div>
-----
-== 바리에이션 4 ==
-<div style="float:right; width:300px; margin:0 0 1em 1em; border:1px solid var(--border-color-base); border-radius:8px; background:var(--color-surface-1); word-break:keep-all; overflow:hidden;">
-<div style="padding:14px; text-align:center; background:var(--background-color-destructive-subtle);">
-[[파일:왕벌의_비행.png|180px|프레임없음]]
-<div style="font-size:1.3em; font-weight:700; margin-top:8px;">왕벌의 비행</div>
-<div style="font-size:0.85em; font-style:italic; color:var(--color-subtle); margin-top:4px;">휘몰아치는 선율로 이름난 비행의 곡</div>
-<div style="margin-top:10px; font-size:1.5em; font-weight:700; color:var(--color-warning);">600</div>
-<div style="font-size:0.75em; color:var(--color-subtle);">가격 · 공격형</div>
-</div>
-<div style="padding:10px 14px; border-top:1px solid var(--border-color-subtle);"><div style="font-weight:700; margin-bottom:4px;">보유 효과</div><div>공격 속도 '''8.5% / 17.5% / 26% / 36.5%'''</div></div>
-<div style="padding:10px 14px; background:var(--color-surface-2); border-top:1px solid var(--border-color-subtle);"><div style="font-weight:700; margin-bottom:4px;">고유 효과 — T2</div><div style="font-size:0.9em;">적 히어로에게 기본 공격 시 다음 3회의 기본 공격 동안 공격 속도가 '''50%''' 증가합니다. (15초)</div></div>
-<div style="padding:10px 14px; background:var(--color-surface-2); border-top:1px solid var(--border-color-subtle);"><div style="font-weight:700; margin-bottom:4px;">고유 효과 — T4</div><div style="font-size:0.9em;">적 히어로에게 기본 공격 시 다음 3회의 기본 공격 동안 공격 속도가 '''100%''' 증가하고 '''기본 공격으로 입히는 피해가 20% 증가합니다'''. (15초)</div></div>
-</div>
-<div style="clear:both;"></div>