while문을 통째로 줄바꿈 시키고 싶어요 HTML

Question

while문을 통째로 줄바꿈 시키고 싶어요 HTML

조회수 628회

java

node.js

module

javascript

html

0

싫어요

module.exports = {
    HTML:function(title, board, control){
      return `
      <!DOCTYPE html>
      <html>
          <head>
            <title>${title}</title>
            <meta charset="utf-8">
            <style type="text/css">
          ul.board, ol.board {
            list-style: none;
            margin: 0px;
            padding: 5px;
        }
        form {
          display: inline;
        }
        </style>
          </head>
          <body>
              <div id="board">
              <table border="3">
                      <thead>
                          <th>제목</th>
                          <th>작성자</th>
                          <th>날짜</th>
                          <th>조회수</th>
                      </thead>
                      <tbody>
                          ${board}
                      </tbody>
                  </table>
                  ${control}
              </div>
          </body>
      </html>`;
    },board:function(lifeboards){
      var board = ``;
      var i = 0;
        while(i < lifeboards.length){
          var board = board +`<th><div style="text-align:left"><ul class="board"><li><a href="/?id=${lifeboards[i].id}">${i+1}. ${lifeboards[i].title}</a></li>
          <th><div style="text-align:left"><ul class="board"><li>${lifeboards[i].writer}</li>
          <th><div style="text-align:left"><ul class="board"><li>${lifeboards[i].day}</li>
          <th><div style="text-align:left"><ul class="board"><li>${lifeboards[i].see}</li>
          `;
          i = i + 1;

        }
        board = board + `</ul></div></th><br>`;
      return board;
      }
  }

이게 코드인데
메인에서 db.query로 lifeboards의 정보를 가져왔습니다(데이터 배이스에요)
그리고 아래 사진과 같이 나오는 테이블을 while문을 통째로 줄바꿈 하고 싶어요.
제목, 작성자, 날짜, 조회수가 줄을 맞춰서 나오게끔 하려고 하는데.. <br>도 <p>도 먹히질 않네요
도와주실 수 있을까요?

아직 공부하는.. 학생이여서 미숙한 질문, 죄송합니다

엽토군 9,979 points

2019-08-25 23:29:30에 수정됨
(•́ ✖ •̀)
알 수 없는 사용자
〉

댓글 입력

score 1 · Accepted Answer

"줄바꿈"이 안 되고 있는 이유는 테이블 태그의 기본 구조가 지켜지고 있지 않기 때문입니다.

<table>
    <thead><!-- 보통 thead에는 1개의 tr만 준다 -->
        <tr>
            <th></th><!-- thead 밑에는 td를 써도 되지만 th를 주로 씀 -->
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr><!-- 테이블에서 1줄은 table row 즉 tr 태그로 구성함 -->
            <td></td><!-- tr 태그 안에는 td 즉 table data 태그만이 들어가야 함 -->
            <td></td><!-- 나머지는 무시되거나 아주 억지로 렌더링됨 -->
            <br><!-- 따라서 이런 것은 소용없음 -->
            <td>foo<br>bar</td><!-- 대신 td/th 안에서는 이게 됨 -->
        </tr><!-- 새 줄을 시작하려면 지금 열려 있는 tr 태그를 닫고 -->
        <tr><!-- 새 tr을 열어야 "줄바꿈"이 됨 -->
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

그러므로 board에 할당된 익명함수는 대충 이렇게 생겨야 할 겁니다.

board: function (lifeboards) {
    var board = ``;
    for (i = 0; i < lifeboards.length; i++) { // while로 쓰면 3줄이 필요하지만 for를 쓰면 1줄로 끝나네요.
        var article = lifeboards[i]; // 반복적으로 나오는 대상은 변수로 빼면 더 알아보기 좋습니다.
        board += `<tr>`; // tr을 쓴다는 게 핵심입니다.
        board += `<td><a href="/?id=${article.id}">${i+1}. ${article.title}</a></td>`;
        board += `<td>${article.writer}</td>`;
        board += `<td>${article.day}</td>`;
        board += `<td>${article.see}</td>`;
        board += `</tr>`; // 여기까지 하면 1개의 lifeboards 배열 원소에 대한 tr 마크업
    } // 여기까지 오면 모든 lifeboards 배열의 원소의 tr 태그 마크업
    return board; // 지금까지 만들어진 마크업을 반환하면 끝.
}

while문을 통째로 줄바꿈 시키고 싶어요 HTML

조회수 628회

java

node.js

module

javascript

html

0

엽토군 9,979 points

2019-08-25 23:29:30에 수정됨

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

1 답변

1

엽토군 9,979 points

2019-08-25 23:56:08에 작성됨

댓글 달기

while문을 통째로 줄바꿈 시키고 싶어요 HTML

조회수 628회

java

node.js

module

javascript

html

0

엽토군 9,979 points

2019-08-25 23:29:30에 수정됨

(•́ ✖ •̀)알 수 없는 사용자

댓글 입력

1 답변

1

엽토군 9,979 points

2019-08-25 23:56:08에 작성됨

댓글 달기

답변을 하려면 로그인이 필요합니다.

(•́ ✖ •̀)
알 수 없는 사용자