2022.05.16 - javascript 퀴즈(6) - 테이블에 요일 넣기

  다음과 같은 조건을 만족하는 주간 달력을 만들어 주세요!
  
  📌 일요일 부터 토요일까지 차례대로 보여져야 합니다.
  📌 days 배열을 사용해야 합니다.
 
  🚨 HTML, CSS는 수정하지 않고 JS만 수정해주세요.

ex)
  +---------------------------------------------+
  |  일   |  월  |  화  |  수  |  목  |  금  |  토  |
  +---------------------------------------------+
   

[ HTML ] 

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
</table>

[ CSS ]

body {
  display: flex;
  justify-content : center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

table {
  border-collapse: collapse;
}

th {
  border: 1px solid black;
  width: 90px;
  height: 40px;
}

[ JS ]

=> html, css는 건들지말고, js만 변경하여 코드 작성 

=> 주어진 days 배열을 사용할 것

const days = ["일", "월", "화", "수", "목", "금", "토"];
const thTag = document.querySelectorAll("th");
for(let i=0; i<7; i++){
  thTag[i].innerHTML = days[i];
}

==> js 풀이

1. th태그를 querySelectorAll을 이용하여 js에서 사용할 수 있도록 선언한다.

2. 총 7개의 배열을 반복할 수 있도록 반복문을 작성하고,

3. innerHTML을 사용하여 텍스트를 넣어준다. 

 

* innerHTML , innerText, textContent 의 차이

- innerHTML : 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나 설정할 수 있다. 

HTML 속성의 전체 내용을 가져온다 .

태그 자체를 가져오거나 바꾸는 기능 !!

ex) <span style=...>

 

- innerText : 'Element'의 속성으로, 해당 Element 내에서 사용자에게 보여지는 텍스트 값을 읽어온다. 

태그 안의 텍스트를 가져오거나 바꾸는 기능 !!

 

- textContent : 'Node'의 속성으로 <script>나 <style> 태그와 상관없이 해당 노드가 가지고있는 텍스트값을 그대로 읽는다.