seokju-na/position.html

## position.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>mouse position</title>
	<style>
        #canvas{
			border:1px solid black;
			height: 1000px;
		}
		.circle{
			border:1px solid red;
			border-radius: 25px;
			width: 50px;
			height: 50px;
			position: absolute;
		}

	</style>
</head>
<body>
	<h1>클릭 위치에 동그라미를 그립니다!</h1>
	<div id="canvas"></div>

	<script>
        var $canvas = document.getElementById('canvas');


        function drawCircle(event) {
            var left = event.clientX - 25;
            var top = event.clientY - 25;

            var $circle = document.createElement('span');

            $circle.classList.add('circle');
            $circle.style.left = left + 'px';
            $circle.style.top = top + 'px';

            $canvas.appendChild($circle);
        }

        $canvas.addEventListener('click', drawCircle);
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>mouse position</title>
	<style>
	#canvas{
	border:1px solid black;
	height: 1000px;
	}
	.circle{
	border:1px solid red;
	border-radius: 25px;
	width: 50px;
	height: 50px;
	position: absolute;
	}

	</style>
	</head>
	<body>
	<h1>클릭 위치에 동그라미를 그립니다!</h1>
	<div id="canvas"></div>

	<script>
	var $canvas = document.getElementById('canvas');


	function drawCircle(event) {
	var left = event.clientX - 25;
	var top = event.clientY - 25;

	var $circle = document.createElement('span');

	$circle.classList.add('circle');
	$circle.style.left = left + 'px';
	$circle.style.top = top + 'px';

	$canvas.appendChild($circle);
	}

	$canvas.addEventListener('click', drawCircle);
	</script>
	</body>
	</html>