커버사진 보고 토렌트 파일을 다운받으려고 합니다.

파이썬으로 토렌트 사이트(정적사이트)를 긁어와서 {'파일명': '♡', •••}딕셔너리로 저장했습니다. 여기서 ♡값을 가진 파일명만 html에서 보고 싶습니다.

처음 접속하면 이미지와 버튼이 뜨고 재생 버튼을 누르면 영상이 뜹니다. 이미지틀의 크기는 변하지 않고 영상이 작아도 가로 값이 틀의 가로 값과 같게 확대시키고 싶습니다. 영상이 재생되는 동안은 그림이 안 보여도 됩니다. 샘플 영상은 3개 중 하나만 작동해서 URL버튼이 3개입니다. 사진은 가로사진이라 작아서 확대해서 좌 우 나눠서 보려합니다. 좌우로 스크롤되게 했더니 하단에 스크롤이 생깁니다. style에 float요소 값에 right를 넣고 L/R 버튼으로 좌 우 나누거나 하단스크롤이 없어졌으면 좋겠습니다. 마지막으로 버튼 틀의 높이가 화면 아래까지 확장됐으면 좋겠습니다. 물론 화면을 넘어가서 잘리거나 스크롤되게 되면 불편합니다.


















○html.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

        <link rel="stylesheet" href="styles.css">

        <script type="text/javascript" src="html.js"></script>

    </head>

    <body>

        <div id="img_box">

            <img src="/storage/emulated/0/Pictures/lr.png">

        </div>

        <div id="btn_box">

            <button id="URL1">URL1</button>

            <button id="URL2">URL2</button>

            <button id="LR">L / R</button>

            <button id="URL3">URL3</button>

            <button id="DEL">제거</button>

            <button id="SVAE_DEL">저장 및 제거</button>

        </div>

    </body>

</html>

○style.css

*{

    margin: 0;

    padding: 0;

    }

body{

    width: 100vw;

    height: 100vh;

    height: var(--app-height);

    }

#img_box{

    background-color: blue;

    max-width: 100%;

    overflow: scroll;

    }

img{

    max-height: 512px;

    float: right;

    }


#btn_box{

    background-color: red;

    color: white;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    }


button{

    border: 5px solid green;

    padding: 5px;

    }


○html.js

const appHeight = () => {

    const doc = document.documentElement

    doc.style.setProperty('--app-height', `${window.innerHeight}px`)

}

window.addEventListener('resize', appHeight)

appHeight()