자바기반의 웹&앱 응용 SW개발자 양성과정 57일차 -88

 

 

 

transform-origin 중심축을 정하는 방법 (right left top bottom)  

skew Transform x, y축 기준으로 비틀어지는데 열리는 효과를 낼 수 있다.

 

transform-origin : right top 기준으로 skew -45 deg를 적용한 모습

transition에는 delay 값이 있는데 duration이 우선순위를 가지고 있다.

delay는 효과가 변경되기 전 시간을 가진 뒤 실행하도록 한다.

transition-property는  변경될 속성만 지정할 수 있습니다.

또한 움직일 수 있는 속성만 가능하며 여러 가지 속성을 사용할 때는 각 속성을 , 로 구분해주며 속성마다 시간을 별도로 지정해 줄 수 있습니다.

window.addEventListener("load", function () {
  const table = document.querySelector(".table");
  const addRow = document.querySelector(".addrow");
  const changeBtn = document.querySelector(".change-btn");
  const loadBtn = document.querySelector(".load-btn");
  const selectBtn = document.querySelector(".del-btn");
  var td = table.querySelector("tr:last-child>td:first-child");

  var notice = [
    { id: 1, title: "hellow", writerId: "good" },
    { id: 2, title: "hi", writerId: "god" },
    { id: 3, title: "bye", writerId: "go" },
  ];
  loadBtn.addEventListener("click", function () {
    console.log(td);
    var text = document.createTextNode(notice[0].title);
    td.appendChild(text);
  });
});

노드를 생성해 텍스트 노드를 생성해 자식 노드로 만들 수 있습니다.

다만 텍스트 노드를 생성해 넣는 것보단 innerText속성을 이용해 넣는 것이 바람직합니다.

td.innerText =notice [0]. title;

 

엘리먼트 노드를 생성해 넣을 수도 있습니다.

window.addEventListener("load", function () {
  const table = document.querySelector(".table");
  const addRow = document.querySelector(".addrow");
  const changeBtn = document.querySelector(".change-btn");
  const loadBtn = document.querySelector(".load-btn");
  const selectBtn = document.querySelector(".del-btn");
  var tr = table.querySelector("tr:last-child");

  var notice = [
    { id: 1, title: "hellow", writerId: "good" },
    { id: 2, title: "hi", writerId: "god" },
    { id: 3, title: "bye", writerId: "go" },
  ];
  loadBtn.addEventListener("click", function () {
    var td = document.createElement("td");
    tr.appendChild(td);
    var text = document.createTextNode(notice[0].title);
    td.appendChild(text);
  });
});

                               

 td.innerHTML += `<td>${notice[0].title}</td>`;

innerHTML을 사용하지 않는 것이 좋다. 그 이유는 노드를 삽입한 후 과정이 값을 object를  String으로 변환한 뒤 그 값을 더합니다. String에 값을 더하는 작업은 메모리를 많이 차지하며 다시 String을 object로 변환하는 작업이 존재하므로 문서를 처음부터 만드는 작업이 생기게 되어 무한루프에 빠질 수도 있습니다.

 

 

window.addEventListener("load", function () {
  const table = document.querySelector(".table");
  const addRow = document.querySelector(".addrow");
  const changeBtn = document.querySelector(".change-btn");
  const loadBtn = document.querySelector(".load-btn");
  const selectBtn = document.querySelector(".del-btn");
  var tr = table.querySelector("tr");

  var notices = [
    { id: 1, title: "hellow", writerId: "good" },
    { id: 2, title: "hi", writerId: "god" },
    { id: 3, title: "bye", writerId: "go" },
  ];
  loadBtn.addEventListener("click", function () {
    var tbody = table.querySelector("tbody");

    for (var i = 0; i < notices.length; i++) {
      var trContent = `<tr>
                            <td>${notices[i].id}</td>
                            <td>${notices[i].title}</td>
                            <td>${notices[i].writerId}</td>
                        </tr>`;

      var tr = document.createElement("tr");
      tr.innerHTML = trContent;
      tbody.appendChild(tr);
    }
  });
});