HTML 전혀 모르는데요

조회수 345회

<!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는 문서 내에서 고유한 식별자이기 때문에, 중복해서 사용하면 안 됩니다. 이 부분도 수정해주셔야 합니다.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)