-2주차 Quiz_Ajax 연습하기(1)-

서울시 미세먼지 상태 페이지를 만들고 난 뒤,

 

바로 연습에 들어갔다.

 

이렇게 세 칸으로 자전거 현황을 만드는 것인데,

 

전에 작성한 코드를 따라 갔기 때문에 어려움은 없었다 하지만 표 안에 어떻게 api를 넣는지 몰라서

이런식의 결과물이 나왔다.. 해답은!
<tr></tr> <td></td> 태그를 붙혀주는 것

temp_html = `<li>${station_name} : ${station_tot}: ${station_bike}</li>`

초기에 이렇게 코드를 집어넣으니 직관적으로 표에 들어가지 못하고 표밑에 : : 이런식으로 표기되었다.

 

이것을 해결하기 위해 html 테이블 태그를 사용해야 한다. (리스트 태그를 쓴 내가 왕초보 ㅠㅠ<li></li>)

 

<tr>

tr은 'table row'의 약자로, 테이블의 행을 표현한다.

 

<td>

td는 'table data'의 약자이다.

사실 위에서는 td를 간단히 '열'이라고 표현하였지만, 정확하게는 td태그는 테이블에 들어가는 데이터, 셀을 의미한다.

즉, 하나의 테이블 안에 <tr> 태그로 행을 표현하고, 그 안에 <td> 태그를 이용하여 데이터를 표현 하는 것.

 

<th>

th는 'table header'의 약자로 테이블의 타이틀을 표현한다.

 

출처: https://hianna.tistory.com/281 [어제 오늘 내일]

 

temp_html = `<tr>
    <td>${station_name}</td>
    <td>${station_tot}</td>
    <td>${station_bike}</td>
            </tr>`

 

이렇게 테이블 태그를 넣어주니 올바르게 작동하였다. <Quiz1 끝>

 

현재 자전거수가 5 이하일 때의 빨간색 표시는 if문을 넣으면 간단하게 표시 할 수 있다.

 

if (station_bike < 5) {
    temp_html = `<tr class="good">
    <td>${station_name}</td>
    <td>${station_tot}</td>
    <td>${station_bike}</td>
            </tr>`
} else {
    temp_html = `<tr>
    <td>${station_name}</td>
    <td>${station_tot}</td>
    <td>${station_bike}</td>
            </tr>`

.good {
    color: red;
    font-weight: bold;
}

완성!!