40 lines
1000 B
CSS
40 lines
1000 B
CSS
|
/* src/main/resources/static/css/spider.css */
|
||
|
|
|
||
|
|
/*
|
||
|
|
* 전체 게임 컨테이너 (Canvas를 담는 역할)
|
||
|
|
* - 기존 블로그 레이아웃을 해치지 않도록 최소한의 스타일만 적용
|
||
|
|
*/
|
||
|
|
#game-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #008000;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* 캔버스 스타일
|
||
|
|
* - 배경을 초록색으로 설정하고, 테두리를 추가
|
||
|
|
* - 화면 크기에 맞춰 비율을 유지하며 최대 크기 제한
|
||
|
|
*/
|
||
|
|
#gameCanvas {
|
||
|
|
background-color: #008000;
|
||
|
|
border: 2px solid #fff;
|
||
|
|
max-width: 90vw;
|
||
|
|
max-height: 90vh;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* 카드 이동 애니메이션 (Canvas 로직에서는 사용하지 않지만, 향후 재사용을 위해 남겨둠)
|
||
|
|
*/
|
||
|
|
@keyframes moveCard {
|
||
|
|
from {
|
||
|
|
transform: translate(var(--fromX), var(--fromY));
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translate(var(--toX), var(--toY));
|
||
|
|
}
|
||
|
|
}
|