[21.10.14] exam02(04_jQueryCSS)

JAVA_EE/JQuery
[21.10.14] exam02(04_jQueryCSS) - ??????

luvforjunk 2021. 10. 14. 14:17
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
fieldset {
	width: 270px;
	height: 100px;
}

input {
	border: 1px solid #ccc;
	width: 240px;
	height: 25px;
	padding: 3px 10px 3px 10px;
	margin: 5px 10px;
	background-image: url(../img/input.png);
	background-repeat: no-repeat;
}

input#id {
	background-position: 10px –3px; /* 좌우 상하 */
}

input#pw {
	background-position: 10px -43px; /* -43px는 이미지 크기를 계산해서 넣어줘야 한다 */
}
</style>
</head>
<body>
	<form name="form1">
		<fieldset>
			<legend>로그인</legend>
			<input type="text" name="user_id" id="id" /> 
			<input type="password" name="user_pw" id="pw" />
		</fieldset>
	</form>

	<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
	
		$(function() {
			// 포커스 이벤트
			$('#id, #pw').focus(function() {
				// '#id, #pw' : 쉼표를 주면 id가 될 수도 pw가 될 수도 있다는 의미
				$(this).css('background-image', 'none');
				// this는 사용자가 선택한 것에 따라 실행값이 먹힌다는 의미
				// focus를 맞추면 배경이미지를 없어진다
			});

			// 포커스 해제 이벤트
			$('#id, #pw').blur(function() {
				if ($(this).val()) {
					$(this).css('background-image', 'none');
				} else {
					$(this).css('background-image', 'url(../img/input.png)');
				}
			});
		});
	</script>
</body>
</html>
[결과]
728x90