Web/JS
HTML+CSS+자바스크립트 웹 표준의 정석 17장 마무리 문제
poopooreum
2024. 7. 2. 21:49
반응형
✏️ 17장 마무리 문제 - 1번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>17-1 마무리 문제</title>
<style>
ul {
list-style: none;
}
li {
font-size: 20px;
line-height: 35px;
}
.check {
color: #999;
font-size: 20px;
margin-right: 25px;
}
</style>
</head>
<body>
<h1>할 일 목록</h1>
<ul>
<li><span class="check">✓</span>할 일 1</li>
<li><span class="check">✓</span>할 일 2</li>
<li><span class="check">✓</span>할 일 3</li>
<li><span class="check">✓</span>할 일 4</li>
<li><span class="check">✓</span>할 일 5</li>
</ul>
<script>
var checks = document.querySelectorAll(".check");
for (let i = 0; i < checks.length; i++) {
checks[i].addEventListener("click", function () {
this.style.color = "#ccc";
this.parentNode.style.color = "#ccc";
this.parentNode.style.textDecoration = "line-through";
});
}
</script>
</body>
</html>✏️ 17장 마무리 문제 - 2번
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>17-2 마무리 문제</title>
<style>
form {
margin-bottom: 30px;
}
input[type="text"] {
width: 30px;
height: 20px;
text-align: center;
}
button {
margin-left: 10px;
}
table {
width: 300px;
}
table,
td {
border: 1px solid #ccc;
border-collapse: collapse;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<form>
<input type="text" id="rCount" value="1" />행
<input type="text" id="cCount" value="1" />열
<button onclick="drawTable(); return false">작성</button>
</form>
<div id="contents"></div>
<script>
function drawTable() {
var rCount = document.querySelector("#rCount").value;
var cCount = document.querySelector("#cCount").value;
var newTable = document.createElement("table");
for (let i = 0; i < rCount; i++) {
var newRow = document.createElement("tr");
for (let j = 0; j < cCount; j++) {
var newCell = document.createElement("td");
var cellText = document.createTextNode(i + ", " + j);
newCell.appendChild(cellText);
newRow.appendChild(newCell);
}
newTable.appendChild(newRow);
}
var contents = document.querySelector("#contents");
contents.appendChild(newTable);
}
</script>
</body>
</html>반응형