싸나토스의 블로그
글쓰기
로그인
회원가입
싸나토스
파이썬
머신러닝
리눅스
자바스크립트
팔로우
통계
작성한 글
1
작성 댓글
0
가입 그룹
0
글
태그
댓글
팔로잉
팔로워
싸나토스
· 2년전
질문
HTML 전혀 모르는데요
<!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 / 점수영역 이렇게 일렬로 구성하려하는데요, 4개가 딱 화면에 다 들어가게끔 구성해놨고, 스크롤바 없이 다 볼 수 있게끔 하고 싶습니다. 아래에 있는 "loading" 클래스랑 "control4" 클래스가 카메라를 키기 위해서 필요한데, 저 코드가 없으면 4개 화면이 일렬로 쭉 다 나오는데, 그렇게 되면 카메라를 못 읽고, 저 코드를 넣으면 게임화면이 밑으로 내려가버립니다. 왜 이렇게 되는건지 어떻게 해결해야되는지 알려주세요.ㅜ 그리고 div의 순서들은 제 멋대로 구성이 되는건지 도통 어떻게 배치를 해야되는건지 모르겠네요. 제가 코드를 쓴건 게임화면 , 점수영역, 카메라 1, 카메라 2 순인데, 화면에 나오는건 게임화면 , 카메라1, 카메라2, 점수영역 이 순서대로 나오는데 왜 이러는 걸까요? 뭐 하나가 밑으로 내려가야하는 상황에서 왜 게임화면이 밑으로 내려가는 건지도 모르겠습니다. 어렵네요 HTML..
834
1
1
0
할수있다!!!
·
2023-02-21
그냥 HTML 만으로는 화면구성이 어렵습니다. Div 태그들에 CSS를 적용해서 조절을 해야 합니다.
더 보기