<!DOCTYPE html>
<html>
<head>
<title>마우스 클릭 연습</title>
<style>
table { border : 1px solid blue; border-collapse : collapse; }
tr, td { border : 1px solid blue; width : 50px; height : 50px; }
</style>
</head>
<body>
<h2>마우스 클릭 연습</h2>
<hr>
<script>
<table>
for(var i = 0; i<10; i++) {
<tr>
for(var j=0; j<10; j++) {
<td></td>
}
</tr>
}
</table>
</script>
</body>
</html>
일단 10x10셀을 만들기위하여 여기까지 코드를 작성했지만 실행을 시켜보니 화면상에 10x10 테이블이 보이질 않습니다.
왜 그러는건지 해결방법을 알려주시면 감사하겠습니다.
1. 아래 코드를 보죠
script>
<table>
for(var i = 0; i<10; i++) {
<tr>
for(var j=0; j<10; j++) {
<td></td>
}
</tr>
}
</table>
</script>
<script> </script>태그 내에는 자바스크립트 코드만이 들어 갑니다. 그런데 <table> 태그로 들어 있습니다. 아마도 브라우저는 처음부터 이 HTML 문서를 오류처리할 겁니다.
그리고 for 문을 들여다 보면
for(var i = 0; i<10; i++) {
<tr>
for 문은 자바스크립트 언어의 요소입니다. <tr> 태그이고요. 앞의 문장은 많이 잘못된 문장입니다.
아마도 이렇게 고쳐야할 것 입니다.
for(var i = 0; i<10; i++)
document.write("<tr>");
2. 질문 속에 들어 있는 소스 코드를 보면, 자바 스크립트와 HTML 태그에 대한 공부 후에 문제를 풀면 하는 생각을 해봤습니다.
공부가 덜 되어 있는 상태로 문제를 풀면 불필요한 시간을 많이 낭비하게 됩니다.
6, 8장에 대한 공부(document.write(), DOM 트리)를 먼저 하는 것이 좋을 듯합니다.