화면구현/HTML

오버플로우

psys 2020. 6. 24. 11:15
728x90

1) 이미지 넣기

<body>
    <div>
        <div><img src="images/all0.jpg" height="100" width="100"></div>
        <div><img src="images/all1.jpg" height="100" width="100"></div>
        <div><img src="images/all2.jpg" height="100" width="100"></div>
        <div><img src="images/all3.jpg" height="100" width="100"></div>
    </div>
</body>

 

2) 옆으로 배치하기

    <style>
        .cl_child{
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>
        <div class="cl_child"><img src="images/all0.jpg" height="100" width="100"></div>
        <div class="cl_child"><img src="images/all1.jpg" height="100" width="100"></div>
        <div class="cl_child"><img src="images/all2.jpg" height="100" width="100"></div>
        <div class="cl_child"><img src="images/all3.jpg" height="100" width="100"></div>
    </div>
</body>

 

3) 

    <style>
        .cl_child {
            display: inline-block;
        }

        #id_parent {
            width: 100px;
            height: 100px;
            border: 10px groove green;
        }
    </style>
</head>

<body>
    <div id="id_parent">
        <div class="cl_child"><img src="images/all0.jpg" height="100" width="100"></div>
        <div class="cl_child"><img src="images/all1.jpg" height="100" width="100"></div>
        <div class="cl_child"><img src="images/all2.jpg" height="100" width="100"></div>
        <div class="cl_child"><img src="images/all3.jpg" height="100" width="100"></div>
    </div>
</body>

 

4)

    <style>
        .cl_child {
            display: inline-block;
        }

        #id_parent {
            width: 100px;
            height: 100px;
            border: 10px groove green;
        }

        #id_row1{
            width: 420px;
            height: 1000px;
        }
    </style>
</head>

<body>
    <div id="id_parent">
        <div id = "id_row1">
            <div class="cl_child"><img src="images/all0.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all1.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all2.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all3.jpg" height="100" width="100"></div>
        </div>
    </div>
</body>

 

5) overflow

부모 밖 넘어가는 것들을 감춰준다. (전자앨범을 만들 때 사용하기 좋다)

    <style>
        .cl_child {
            display: inline-block;
        }

        #id_parent {
            width: 100px;
            height: 100px;
            border: 10px groove green;
            overflow: hidden;
        }

        #id_row1{
            width: 420px;
            height: 1000px;
        }
    </style>
</head>

<body>
    <div id="id_parent">
        <div id = "id_row1">
            <div class="cl_child"><img src="images/all0.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all1.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all2.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all3.jpg" height="100" width="100"></div>
        </div>
    </div>
</body>

 

** position static은 움직일 수 없음

따라서 id_row1에 absolute속성을 줌

    </style>
        #id_row1{
            position: absolute;
            width: 420px;
            height: 1000px;
        }
    </style>

 

전자앨범 만들기

더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cl_child {
            display: inline-block;
        }

        #id_parent {
            position: relative;
            left: 300px;
            width: 100px;
            height: 100px;
            border: 10px groove green;
            overflow: hidden; /* 중요한 속성 */
        }

        #id_row1 {
            position: absolute;
            width: 420px;
            height: 100px;
        }
    </style>
</head>

<body>
    <input type="button" value="전자앨범" onclick="f_mv()">
    <div id="id_parent">
        <div id="id_row1">
            <div class="cl_child"><img src="images/all0.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all1.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all2.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all3.jpg" height="100" width="100"></div>
        </div>
    </div>
</body>

</html>

hidden으로 넣고 고정시켜

parent가 all0

row1가 all0, all1, all2, all3

parent를 움직여

left로 조금 씩 움직이면 all0에서 all1로 all1에서 all2로

더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cl_child {
            display: inline-block;
        }

        #id_parent {
            position: relative;
            left: 300px;
            width: 100px;
            height: 100px;
            border: 10px groove green;
            overflow: hidden; /* 중요한 속성 */
        }

        #id_row1 {
            position: absolute;
            width: 420px;
            height: 100px;
            left: 1px;
        }
    </style>
</head>

<body>
    <input type="button" value="전자앨범" onclick="f_mv()">
    <div id="id_parent">
        <div id="id_row1">
            <div class="cl_child"><img src="images/all0.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all1.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all2.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all3.jpg" height="100" width="100"></div>
        </div>
    </div>
    <script>
        var v_row1 = document.getElementById("id_row1");
        var v_mv = 10;
        function f_mv(){
            alert("공백확인"+v_row1.style.left+"공백확인");
            v_row1.style.left = parseInt(v_row1.style.left) - v_mv+"px";
        }
    </script>
</body>

</html>

 

1) 왼쪽으로 움직이기위한 준비

    <script>
        var v_row1 = document.getElementById("id_row1");
        var v_mv = 10;
        function f_mv(){
            v_row1.style.left = parseInt(v_row1.style.left) - v_mv+"px";
        }
    </script>

-> left값이 옆으로 빠지지 않음

왜?

            alert(v_row1.style.left);

>> 공백이 출력이됨(row1에 값을 줘도 동일하게 출력)

            alert("공백확인"+v_row1.style.left+"공백확인");

왜?

내부 스타일 값은 읽어오지 못해!!

따라서 인라인스타일로 값을 부여해줘야해

 

        <div id="id_row1" style="left: 0px;">

항상 초기화 불편

강제 초기화가 필요!!

    <script>
        var v_row1 = document.getElementById("id_row1");
        var v_mv = 10;
        function f_mv(){
            //인라인 스타일로 초기화 되지 않았다면 빈 공백값으로 읽힘. 공백은 false
            if(!v_row1.style.left){
                // 강제 초기화
                v_row1.style.left="0px";
            }
            v_row1.style.left = parseInt(v_row1.style.left) - v_mv+"px";
        }
    </script>

 

2) 완성

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cl_child {
            display: inline-block;
        }

        #id_parent {
            position: relative;
            left: 300px;
            width: 100px;
            height: 100px;
            border: 10px groove green;
            /*overflow: hidden; /* 중요한 속성 */
        }

        #id_row1 {
            position: absolute;
            width: 420px;
            height: 100px;
            left: 1px;
        }
    </style>
</head>

<body>
    <input type="button" value="전자앨범" onclick="f_mv()">
    <div id="id_parent">
        <div id="id_row1">
            <div class="cl_child"><img src="images/all0.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all1.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all2.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all3.jpg" height="100" width="100"></div>
        </div>
    </div>
    <script>
        var v_row1 = document.getElementById("id_row1");
        var v_mv = 10;
        function f_mv(){
            //인라인 스타일로 초기화 되지 않았다면 빈 공백값으로 읽힘. 공백은 false
            if(!v_row1.style.left){
            v_row1.style.left = "0px";  // 강제 초기화
        }
            v_row1.style.left = parseInt(v_row1.style.left) - v_mv + "px";
            setTimeout(f_mv,300);
        }
    </script>
</body>

</html>

 

겹쳐짐

        #id_row2 {
            position: absolute;
            width: 420px;
            height: 100px;
        }

 

밀어버리기

        #id_row2 {
            position: absolute;
            width: 420px;
            height: 100px;
            left: 417px; /*밀어버리기*/
        }

 

초기화

            if(!v_row1.style.left){
            v_row1.style.left = "0px";  // 강제 초기화
            v_row2.style.left = "417px"; // row2도 초기화
        }

 

row2도 작업해줘

    <script>
        var v_row1 = document.getElementById("id_row1");
        var v_row2 = document.getElementById("id_row2");
        var v_mvW = 10;
        function f_mv(){
            //인라인 스타일로 초기화 되지 않았다면 빈 공백값으로 읽힘. 공백은 false
            if(!v_row1.style.left){
            v_row1.style.left = "0px";  // 강제 초기화
            v_row2.style.left = "417px";
        }
            v_row1.style.left = parseInt(v_row1.style.left) - v_mvW + "px";
            v_row2.style.left = parseInt(v_row2.style.left) - v_mvW + "px";
            setTimeout(f_mv,300);
        }
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cl_child {
            display: inline-block;
        }

        #id_parent {
            position: relative;
            left: 300px;
            width: 100px;
            height: 100px;
            border: 10px groove green;
            overflow: hidden;
            /* 중요한 속성*/
        }

        #id_row1 {
            position: absolute;
            width: 420px;
            height: 100px;
            left: 1px;
        }

        #id_row2 {
            position: absolute;
            width: 420px;
            height: 100px;
            left: 417px;
            /*밀어버리기*/
        }
    </style>
</head>

<body>
    <input type="button" value="전자앨범" onclick="f_mv()">
    <div id="id_parent">
        <div id="id_row1">
            <div class="cl_child"><img src="images/all0.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all1.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all2.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all3.jpg" height="100" width="100"></div>
        </div>
        <div id="id_row2">
            <div class="cl_child"><img src="images/all4.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all5.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all6.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all7.jpg" height="100" width="100"></div>
        </div>
    </div>
    <script>
        var v_row1 = document.getElementById("id_row1");
        var v_row2 = document.getElementById("id_row2");
        var v_mvW = 10;
        function f_mv() {
            //인라인 스타일로 초기화 되지 않았다면 빈 공백값으로 읽힘. 공백은 false
            if (!v_row1.style.left) {
                v_row1.style.left = "0px";  // 강제 초기화
                v_row2.style.left = "417px";
            }
            v_row1.style.left = parseInt(v_row1.style.left) - v_mvW + "px";
            v_row2.style.left = parseInt(v_row2.style.left) - v_mvW + "px";
            setTimeout(f_mv, 300);
        }
    </script>
</body>

</html>

뺑뺑돌게해야지

    <script>
        var v_row1 = document.getElementById("id_row1");
        var v_row2 = document.getElementById("id_row2");
        var v_mvW = 10;
        function f_mv() {
            //인라인 스타일로 초기화 되지 않았다면 빈 공백값으로 읽힘. 공백은 false
            if (!v_row1.style.left) {
                v_row1.style.left = "0px";  // 강제 초기화
                v_row2.style.left = "417px";
            }
            v_row1.style.left = parseInt(v_row1.style.left) - v_mvW + "px";
            v_row2.style.left = parseInt(v_row2.style.left) - v_mvW + "px";

            var v_row1Left = v_row1.style.left = parseInt(v_row1.style.left);
            var v_row2Left = v_row2.style.left = parseInt(v_row2.style.left);
            if(v_row1Left<=-420){
                v_row1.style.left="420px";
            }
            if(v_row2Left<=-420){
                v_row2.style.left="420px";
            }
            setTimeout(f_mv,300);
        }
    </script>

 

완성~

더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cl_child {
            display: inline-block;
        }

        #id_parent {
            position: relative;
            left: 300px;
            width: 100px;
            height: 100px;
            border: 10px groove green;
            overflow: hidden;
            /* 중요한 속성*/
        }

        #id_row1 {
            position: absolute;
            width: 420px;
            height: 100px;
            left: 1px;
        }

        #id_row2 {
            position: absolute;
            width: 420px;
            height: 100px;
            left: 417px;
            /*밀어버리기*/
        }
    </style>
</head>

<body>
    <input type="button" value="전자앨범" onclick="f_mv()">
    <div id="id_parent">
        <div id="id_row1">
            <div class="cl_child"><img src="images/all0.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all1.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all2.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all3.jpg" height="100" width="100"></div>
        </div>
        <div id="id_row2">
            <div class="cl_child"><img src="images/all4.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all5.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all6.jpg" height="100" width="100"></div>
            <div class="cl_child"><img src="images/all7.jpg" height="100" width="100"></div>
        </div>
    </div>
    <script>
        var v_row1 = document.getElementById("id_row1");
        var v_row2 = document.getElementById("id_row2");
        var v_mvW = 10;
        function f_mv() {
            //인라인 스타일로 초기화 되지 않았다면 빈 공백값으로 읽힘. 공백은 false
            if (!v_row1.style.left) {
                v_row1.style.left = "0px";  // 강제 초기화
                v_row2.style.left = "417px";
            }
            v_row1.style.left = parseInt(v_row1.style.left) - v_mvW + "px";
            v_row2.style.left = parseInt(v_row2.style.left) - v_mvW + "px";

            var v_row1Left = v_row1.style.left = parseInt(v_row1.style.left);
            var v_row2Left = v_row2.style.left = parseInt(v_row2.style.left);
            if(v_row1Left<=-420){
                v_row1.style.left="420px";
            }
            if(v_row2Left<=-420){
                v_row2.style.left="420px";
            }
            setTimeout(f_mv,300);
        }
    </script>
</body>

</html>

'화면구현 > HTML' 카테고리의 다른 글

중복체크  (0) 2020.06.25
[JavaScript] Random  (0) 2020.06.24
Position2  (0) 2020.06.23
스타일 사용법(내부와 인라인과 배열)  (0) 2020.06.23
Position  (2) 2020.06.22

'화면구현/HTML'의 다른글

  • 현재글오버플로우

관련글

댓글

티스토리툴바