잡동사니에도 사랑을

[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
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[21.10.15] exam01(05_jQueryAnimation)  (0) 2021.10.15
[21.10.14] exam03(04_jQueryCSS) - 파일로드, 속성 추가, 속성 제거  (0) 2021.10.14
[JQuery] CSS 적용 여부 확인(hasClass()), 클래스 적용 및 해제(addClass() / removeClass()), 적용 해제 반복처리(toggleClass())  (0) 2021.10.14
[21.10.14] exam05(03_jQueryAttr) - 이미지 위에 마우스 올려놨을 때 이미지 변경  (0) 2021.10.14
[21.10.14] exam04(03_jQueryAttr) - 체크박스 활성화 / 비활성화, 파일 열기  (0) 2021.10.14
'JAVA_EE/JQuery' Related Articles more