afrontend/square.html

## square.html
<!DOCTYPE html>
<html>
  <head>
    <title>네모 굴리기 - HTML, CSS 사용한 버전</title>
    <meta charset="utf-8" />
    <style>
      .square {
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }
      .square.move {
        margin-left: 400px;
        transition: 4s;
        transform: rotate(360deg)
      }
    </style>
  </head>
  <body>
    <div class="square"></div>
    <script>
      setTimeout(function() {
        document.querySelector(".square").className += ' move';
      }, 2000);
    </script>
  </body>
</html>

## square.jquery.html
<!DOCTYPE html>
<html>
  <head>
    <title>네모 굴리기 - jQuery 사용한 버전</title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  </head>
  <body>
    <script>
      $("body").append("<div class='square'></div>");
      var style = {
        "width": "100px",
        "height": "100px",
        "border": "1px solid red"
      };
      $(".square").css(style);
      setTimeout(function() {
        var moveStyle = {
          "margin-left": "400px",
          "transition": "4s",
          "transform": "rotate(360deg)"
        };
        $(".square").css(moveStyle);
      }, 2000);
    </script>
  </body>
</html>

## square.without.jquery.html
<!DOCTYPE html>
<html>
  <head>
    <title>네모 굴리기 - jQuery 사용하지 않은 버전</title>
    <meta charset="utf-8" />
    <style>
    </style>
  </head>
  <body>
    <script>
      var node = document.createElement("div");
      node.className = 'square';
      var elements = document.getElementsByTagName("body");
      elements[0].appendChild(node);
      node.style.width = "100px";
      node.style.height = "100px";
      node.style.border = "1px solid red";
      setTimeout(function() {
        node.style.marginLeft = "400px";
        node.style.transition = "4s";
        node.style.transform = "rotate(360deg)";
      }, 2000);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>네모 굴리기 - HTML, CSS 사용한 버전</title>
	<meta charset="utf-8" />
	<style>
	.square {
	width: 100px;
	height: 100px;
	border: 1px solid red;
	}
	.square.move {
	margin-left: 400px;
	transition: 4s;
	transform: rotate(360deg)
	}
	</style>
	</head>
	<body>
	<div class="square"></div>
	<script>
	setTimeout(function() {
	document.querySelector(".square").className += ' move';
	}, 2000);
	</script>
	</body>
	</html>