<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>focus와 blur 이벤트 사용하기</title>
<link rel="stylesheet" href="style_js.css">
<style>
body { text-align: center; }
#inputField {
padding: 10px;
font-size: 16px;
outline: none;
border: 2px solid #3498db;
}
#inputField:focus { border: 2px dotted #e74c3c; }
</style>
</head>
<body>
<input type="text" id="inputField" placeholder="클릭하세요!">
<script>
const inputField = document.getElementById("inputField");
inputField.addEventListener("focus", function() {
inputField.placeholder = "입력하세요";
}); // 포커스 이벤트 리스너 등록
inputField.addEventListener("blur", function() {
inputField.placeholder = "클릭하세요!";
}); // 블러 이벤트 리스너 등록
</script>
</body>
</html>
]]>