이벤트 처리하기
- 다음 동영상에서 보여주는 것 처럼 박스요소를 클릭하면 박스요소 아래에 클릭한 div 태그의 id를 출력하도록 자바스크립트 코드를 작성하세요.
실행결과
css_float.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div { width: 100px; height: 100px; border: 1px solid #000000; margin: 5px; float: left}
#redbox { background: red; text-align:center;}
#greenbox { background: green;}
#bluebox { background: blue;}
#yellowbox { background: yellow;}
#blackbox { background: black;}
p { clear: both; }
#content { width:600px; padding: 10px; border: 2px dashed black}
#content:after { content: " "; display: block; clear: both; }
</style>
<script type="text/javascript" src="css_float.js" defer></script>
</head>
<body>
<section id="content">
<h1>문서의 내용</h1>
<div id="redbox"></div>
<div id="greenbox"></div>
<div id="bluebox"></div>
<div id="yellowbox"></div>
<div id="blackbox"></div>
<p id="output">after를 이해하시려면 여기를 삭제해 보세요</p>
</section>
</body>
</html>
|