techhan

techhan

Always a Student

2020년 12월 16일

업데이트:

연습문제 1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html문서 제목</title>
    <style>
        .area{
            width: 100px;
            height: 100px;
            border : 1px solid black;
            display: inline-block;
            box-sizing: border-box;
            
        }

        .inputArea{
            box-sizing: border-box;
            width : 100px;
        }
    </style>
</head>
<body>
    <span>색변경 버튼 클릭 시 box 아래에 작성된 색상으로 box 배경색 변환시키기</span> <br>
    <div class="area"></div>
    <div class="area"></div>
    <div class="area"></div>
    <div class="area"></div>
    <div class="area"></div> <br>
    <input type="text" class="inputArea" >
    <input type="text" class="inputArea">
    <input type="text" class="inputArea">
    <input type="text" class="inputArea">
    <input type="text" class="inputArea"> <br><br>
    <button type="button" id="btn">색변경</button>

    <script>

        document.getElementById("btn").onclick = function () {
            var color = document.getElementsByClassName("inputArea");
            var area = document.getElementsByClassName("area");

            for (var i = 0; i < color.length; i++) {
                if (color[i].value != undefined) {
                    area[i].style.backgroundColor = color[i].value;

                }
            }
        };
    </script>
</body>
</html>

20201216_01



연습문제 2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html문서 제목</title>
</head>

<body>
    <fieldset>
        <legend>입력</legend>
        <label for="name">이름 : </label>
        <input type="text" id="name" class="userInfo"> <br>

        <label for="age">나이 : </label>
        <input type="number" id="age" class="userInfo"><br>

        <label for="addr">주소 : </label>
        <input type="text" id="addr" class="userInfo"><br><br>

        <button type="button" id="btn2" onclick="inputFn();">입력</button>
    </fieldset>

    <fieldset>
        <legend>출력</legend>
        <div id="printArea"></div>

        <button type="button" id="btn3" onclick="printFn();">출력</button>
        <button type="button" id="btn4" onclick="resetFn();">초기화</button>
    </fieldset>

    <script>

        var info;

        function inputFn() {
            info = {
                name: document.getElementById("name").value,
                age: document.getElementById("age").value,
                addr: document.getElementById("addr").value,

                printInfo: function () {
                    return "이름 : " + this.name + "<br>나이 : " + this.age + "<br>주소 : " + this.addr;
                }
            }
        };

        function printFn() {

            if (info == undefined) {
                alert("입력부터 진행해주세요.")
            } else {
                document.getElementById("printArea").innerHTML = info.printInfo();
            }
        };

        function resetFn() {
            document.getElementById("printArea").innerHTML = '';
            document.getElementById("name").value = "";
            document.getElementById("age").value = "";
            document.getElementById("addr").value = "";
            info = undefined;
        }
    </script>
</body>
</html>

20201216_02



연습문제 3

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html문서 제목</title>
</head>
<body>
    <pre>
        - 추가 버튼 클릭 시 id가 wrapper3인 영역에 주석에 작성된 모양의 객체를 생성하여 마지막 자식으로 추가하기
        <!-- 
            <div>
                입력 : <input type="number" class="inputNumbers">
                <button type="button" onclick="deleteRow(this)">삭제</button>
            </div>
         -->

        - 삭제 버튼 클릭 시 deleteRow 함수를 호출하여 해당 클릭 한 삭제버튼이 있는 줄을 삭제

        - 합계 버튼 클릭 시 input 태그에 작성된 모든 숫자를 더하여 id가 printArea3인 영역에 출력

        </pre>


        <h3>객체(요소, 노드) 추가/삭제</h3>

        <button type="button" id="add">추가</button>
        <button type="button" id="sum">합계</button>
        <br><br>
        입력 : <input type="number" class="inputNumbers">

        <div id="wrapper3"></div>

        <div id="printArea3"></div>

        <script>
            document.getElementById("add").onclick = function() {

                var div = document.createElement("div");

                div.innerHTML = "입력 : "

                var input = document.createElement("input"); 
                input.setAttribute("type", "number"); 
                input.setAttribute("class", "inputNumbers"); 
                div.appendChild(input); 

                var button = document.createElement("button"); 
                button.setAttribute("type", "button"); 
                button.setAttribute("onclick", "deleteRow(this)"); 
                
                button.innerHTML = "삭제";
                div.appendChild(button);
                 
                document.getElementById("wrapper3").appendChild(div);
            }

            function deleteRow(el){
                el.parentNode.remove();
            }

         
        document.getElementById("sum").onclick = function() {
            var arr = document.getElementsByClassName("inputNumbers");


            var sum = 0; 


            for(var item of arr){
                sum += Number(item.value);
            }

            document.getElementById("printArea3").innerHTML
                = "<h3>합계 : " + sum +"</h3>"; 
        }
        </script>
    </body>
</html>

20201216_03



연습문제 4

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html문서 제목</title>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        .area {
            display: inline-block;
            width: 100px;
        }

        .box {
            width: 100%;
            height: 100px;

            border: 1px solid black;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
            transition-duration: 0.5s;
        }

        .input-box {
            width: 100%;
            margin: auto;
        }
    </style>
</head>

<body>
    <pre>
        box에 마우스가 들어갔을 경우 아래 input 태그에 작성된 배경색으로 변경하기
        마우스가 나가면 원래대로 돌아오기
        </pre>

    <div class="area">
        <div class="box"></div>
        <input type="text" class="input-box">
    </div>
    <div class="area">
        <div class="box"></div>
        <input type="text" class="input-box">
    </div>
    <div class="area">
        <div class="box"></div>
        <input type="text" class="input-box">
    </div>
    <div class="area">
        <div class="box"></div>
        <input type="text" class="input-box">
    </div>
    <div class="area">
        <div class="box"></div>
        <input type="text" class="input-box">
    </div>

    <script>
        // $(".box").on("mouseenter", function(){
        //     $(this).css("backgroundColor", $(this).next().val());
        // });

        // $(".box").on("mouseleave", function(){
        //     $(this).removeAttr("style");
        // });

        $(".box").hover(function () {
            $(this).css("backgroundColor", $(this).next().val());
        }, function () {

            $(this).css("backgroundColor", "rgba(0, 0, 0, 0)");
            // $(this).removeAttr("style");
        });
    </script>
</body>
</html>

20201216_04



연습문제 5

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html문서 제목</title>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box2 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>

</head>

<body>
    <div class="box2"></div>
    <br><br>
    <button type="button" class="colorBtn">red</button>
    <button type="button" class="colorBtn">orange</button>
    <button type="button" class="colorBtn">yellow</button>
    <button type="button" class="colorBtn">green</button><br>
    <button type="button" class="colorBtn">blue</button>
    <button type="button" class="colorBtn">navy</button>
    <button type="button" class="colorBtn">purple</button>
    <button type="button" class="colorBtn">white</button>

    <script>
        $(".colorBtn").on("click", function(){
            $(this).siblings("div").css("backgroundColor", $(this).text());
        });
    </script>
</body>
</html>

20201216_05



연습문제 6

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html문서 제목</title>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

    </style>

</head>

<body>
    <button type="button" id="eBtn1">확대되면서 보여지기</button>
    <button type="button" id="eBtn2">축소되면서 숨기기</button> <br>
    <button type="button" id="eBtn3">불투명해지면서 보여지기</button>
    <button type="button" id="eBtn4">투명해지면서 숨기기</button> <br>

    <img src="4_jQuery/image/KakaoTalk_20201130_153152718.gif" id="pika" width="500px" height="500px">


    <script>
        $("#eBtn1").on("click", function(){
            $("#pika").show(1000);
        });
        $("#eBtn2").on("click", function(){
            $("#pika").hide(1000);
        });
        $("#eBtn3").on("click", function(){
            $("#pika").fadeIn(1000);
        });
        $("#eBtn4").on("click", function(){
            $("#pika").fadeOut(1000);
        });
    </script>
</body>

</html>

20201216_06



연습문제 7

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html문서 제목</title>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        #RandomDiv{
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }

        #colorInfo{
            float: left;
        }
    </style>

</head>
    <pre>
    시작 버튼 클릭 시 0.5초마다 랜덤한 rgb 값으로 배경색 변경
    (rgb는 각각 0~255까지 지정 가능)

    정지 버튼 클릭 시 경고창으로 "STOP"이 출력되면서 배경색 변경 멈춤

    </pre>
    <div id="RandomDiv"></div> <br>
    <button type="button" id="ranStart">시작</button>
    <button type="button" id="ranEnd">정지</button>

    <script>
        var interval;

        $("#ranStart").on("click", function(){

            interval = setInterval(function(){
                var rgb1 = parseInt((Math.random() * 255));
                var rgb2 = parseInt((Math.random() * 255));
                var rgb3 = parseInt((Math.random() * 255));
                var ranColor = "rgb(" + rgb1 +", " + rgb2 + ", " + rgb3 +")";
                $("#RandomDiv").css("backgroundColor", ranColor).text(ranColor);
            }, 500);
        });

        $("#ranEnd").on("click", function(){
            alert("STOP");
            window.clearInterval(interval);
        });
    </script>
</body>

</html>

20201216_07

댓글남기기

관련 글 더보기