✍️ 웹소설 보스전

오늘 써야 할 글자 수 입력
보스 HP :
크윽... 받아라 악플 폭격.
누적 집필량 : 0 자

🎉 퇴치 성공!

오늘도 연중 엔딩을 막아냈다.

/* body 아래쪽에 추가하거나 기존 CSS 교체 */ html, body{ width:100%; height:100%; overflow:hidden; } .screen{ width:100vw; height:100dvh; position:relative; overflow:hidden; } /* 전체 게임 비율 자동 축소 */ #gameScreen{ display:none; position:relative; overflow:hidden; } /* 핵심 */ .gameScaler{ width:min(100vw, 900px); height:min(100dvh, 1200px); position:relative; margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; transform-origin:center center; padding: clamp(8px, 2vw, 24px); } /* 상단 HP */ .topUI{ position:absolute; top: clamp(6px, 2vh, 18px); width:100%; display:flex; justify-content:center; } .hpWrap{ width: clamp(240px, 78vw, 720px); } .hpText{ font-size: clamp(16px, 3.6vw, 34px); } .hpBarBg{ height: clamp(18px, 4vw, 42px); } /* 말풍선 */ .speech{ top: clamp(50px, 10vh, 120px); width: clamp(220px, 82vw, 520px); font-size: clamp(14px, 3vw, 28px); padding: clamp(8px, 2vw, 18px); border-width: clamp(2px, .6vw, 5px); } /* 보스 */ .boss{ width: clamp(170px, 48vw, 360px); max-height:45vh; } /* 하단 입력 UI */ .bottomUI{ position:absolute; bottom: clamp(8px, 2vh, 24px); width:100%; display:flex; justify-content:center; align-items:center; gap: clamp(6px, 2vw, 14px); padding:0 clamp(8px, 2vw, 20px); } #writtenInput{ width: clamp(130px, 45vw, 260px); font-size: clamp(18px, 4vw, 28px); padding: clamp(10px, 2vw, 18px); border-width: clamp(2px, .8vw, 5px); } /* 버튼 */ .attackBtn, .mainBtn{ font-size: clamp(16px, 3.5vw, 28px); padding: clamp(10px, 2vw, 18px) clamp(14px, 3vw, 28px); border-width: clamp(2px, .8vw, 5px); box-shadow: 0 clamp(2px, .8vw, 6px) 0 black; } /* 좌하단 정보 */ .info{ left: clamp(6px, 2vw, 16px); bottom: clamp(72px, 12vh, 110px); font-size: clamp(12px, 2.6vw, 22px); padding: clamp(6px, 1.5vw, 12px); border-width: clamp(2px, .7vw, 4px); } /* 데미지 텍스트 */ .damage{ font-size: clamp(28px, 8vw, 72px); } /* 승리 화면 */ .victory h2{ font-size: clamp(34px, 9vw, 82px); } .victory p{ font-size: clamp(18px, 4vw, 34px); } /* 세로 짧은 화면 대응 */ @media (max-height:700px){ .boss{ width: clamp(140px, 34vh, 250px); } .speech{ top:48px; } .info{ bottom:76px; } } /* 초소형 모바일 */ @media (max-width:380px){ .bottomUI{ flex-direction:column; } #writtenInput{ width:70vw; } .attackBtn{ width:70vw; } .info{ bottom:150px; } }