내용

글번호 657
작성자 heojk
작성일 2017-04-28 14:49:18
제목 자바스크립트 이벤트 처리하기
내용 자바스크립트 이벤트 처리하기 css_event.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 연습</title>
<style type="text/css">

</style>
<script type="text/javascript" src="js_event.js" defer></script>
</head>
<body>
<div>
	<button id="redButton"> 빨강 </button>
	<button id="greenButton"> 초록 </button>
	<button id="blueButton"> 파랑 </button>
</div>
<div>
	<input type="text" name="data"><input type="button" value="확인">
	<div id="result1">여기에 텍스트필드에 입력한 값을 출력합니다.</div>
</div>
<div>
	<input type="file" name="file"><input type="button" value="확인">
	<div id="result2">여기에 선택한 파일이름을 출력합니다.</div>
</div>
<div id="box">
브라우저 오른쪽 상단에 박스를 배치합니다
크기는 가로 200px, 세로 200px 크기로합니다.
디폴트 불투명도는 0.1로 합니다.
마우스를 올리면 불투명하게합니다.
</div>
</body>
</html>
- 제공한 코드를 실행시키면 다음 그림과 같이 실행됩니다. - 위 코드에 자바스크립트 코드와 CSS 코드를 추가 작성하여 다음과 같이 이벤트가 실행되도록 하세요. 실행결과