티스토리 뷰

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">&check;</span>할 일 1</li>
      <li><span class="check">&check;</span>할 일 2</li>
      <li><span class="check">&check;</span>할 일 3</li>
      <li><span class="check">&check;</span>할 일 4</li>
      <li><span class="check">&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>
반응형
저작자표시 비영리 변경금지

'Web > JS' 카테고리의 다른 글

[Web/JS] 자바스크립트 - DOM에서의 노드 추가 및 삭제  (0) 2024.05.16
[Web/JS] 자바스크립트 - DOM에서 이벤트 처리  (0) 2024.05.16
[Web/JS] 자바스크립트 - DOM 요소 접근 및 속성  (0) 2024.05.16
[Web/JS] 자바스크립트 - DOM(문서 객체 모델)  (0) 2024.05.15
[Web/JS] 자바스크립트 - 브라우저 객체  (0) 2024.05.14
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함