KangKkaem

열심히 하는 강깸의 프로그래밍 블로그입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
    <script src="main.js"></script>
    <script>    
        window.onload =function(){
            var btnPrint = document.getElementById("btn-print");

            var add= function(x,y){
                return x+y;
            };

        btnPrint.onclick =  function(){
            var x= prompt("x값을 입력하세요.",0);
            var y= prompt("y값을 입력하세요.",0);

            x=parseInt(x);
            y=parseInt(y);

            btnPrint.value=x+y;
        };
    }
    </script>
</head>
<body>
    <input type="button" value = "클릭" id="btn-print"/><br/>
    <span id = "span1">스팬입니다.</span>
</body>
</html>
  • 앞으로 window.onloat function 안에 필요한도구들을 준비해두고 이벤트에서 코드를 작성하는것이다.

댓글남기기

참고

CSS - Grid

참고 : https://studiomeal.com/archives/533

CSS - Flex

Flex 레이아웃 배치 전용으로 나온것이 Flex 이다. 간혹 flex 만 가능한 UI 가 있고 Grid 보다 사용하는것이 간단해서 적재적소로 두개를 이용하는것이 가장 좋다.