HTML 전혀 모르는데요
조회수 129회
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="game.css">
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<style>
video { max-width: 100%; display: block; margin: 10px auto; }
</style>
</head>
<body>
<div id="gameField">
<div id="gameover">
<center>
<h1>Game Over</h1>
<h4>press 'F5' to restart</h4>
</center>
</div>
<div id="pause">
<center>
<h1>Pause</h1>
<h4>press 'F5' to resume</h4>
</center>
</div>
<table id="nextTable" border=0>
<tr><td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td></tr>
<tr><td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td></tr>
<tr><td id="20"></td><td id="21"></td><td id="22"></td><td id="23"></td></tr>
<tr><td id="30"></td><td id="31"></td><td id="32"></td><td id="33"></td></tr>
</table>
<div id="scoreField">
<p class="sub">LEVEL</p>
<p id="level">1</p>
<p class="sub">SCORE</p>
<p id="score">0</p>
<p class="sub">NEXT</p>
<p><br><br><br></p>
<p class="sub">HELP</p>
<p id="help">← ↓ →</p>
<p id="help"> ↑ </p>
<p id="help">P to pause</p>
<p class="sub" id="about" onclick="info()">ABOUT</p>
<div id="comboField"><i></i></div>
</div>
<div id="videoField">
<article class="panel is-info">
<p class="panel-heading">
camera1
</p>
<div class="panel-block">
<video class="video1"></canvas>
</div>
</article>
</div>
<div id="videoField">
<article class="panel is-info">
<p class="panel-heading">
camera2
</p>
<div class="panel-block">
<canvas class="video2" width="480px" height="480px"></canvas>
</div>
</article>
</div>
<div class="loading">
<div class="spinner"></div>
</div>
<div style="visibility: hidden" class="control4">
</div>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="camera.js"></script>
</body>
</html>
웹에서 동작할 게임을 만들어보려고 하는데요, 방송하는것처럼 카메라 영상도 웹에 띄우려고 하는 코드입니다. 저는 게임화면이랑 카메라 화면이 한 화면에 다 들어가도록 게임화면 / 카메라1 / 카메라2 / 점수필드 이렇게 배치를 하고 싶습니다. 그러면 스크롤바로 내려갈 필요도 없이 다 보이는 건데, 문제는 아래의 "loading", "control4" 부분입니다. 이 부분의 코드를 넣으면 게임 화면이 밑으로 내려가버리고, 이 코드가 삭제되면 카메라를 쓸 수가 없습니다. 왜 그런건지, 어떻게 해야되는지 좀 알려주세요~~ㅠ
1 답변
-
HTML 코드를 보면, loading과 control4 클래스가 가지는 스타일이 visibility: hidden으로 설정되어 있기 때문에 해당 요소들이 브라우저에 보이지 않습니다. 이 두 클래스를 가지는 요소가 화면에서 어디에 위치하고 있는지는 확인할 수 없지만, 이 요소들이 게임 화면을 밑으로 내려가게 만드는 원인이 될 수도 있습니다.
control4 클래스에 대한 스타일을 변경하지 않고, loading 클래스의 스타일을 다음과 같이 변경해보세요.
.loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background-color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }위의 스타일을 적용하면, loading 클래스가 가진 요소가 화면 중앙에 위치하게 되며, 이 요소가 게임 화면을 밑으로 내려가는 것을 방지할 수 있습니다. 또한, control4 클래스에 대한 스타일을 변경해서, 이 요소도 게임 화면이 밑으로 내려가지 않도록 만들어야 합니다.또한, 중복된 id="videoField"가 두 개 있습니다. id는 문서 내에서 고유한 식별자이기 때문에, 중복해서 사용하면 안 됩니다. 이 부분도 수정해주셔야 합니다.
댓글 입력