[SpringBoot] 스프링부트 맛보기_태그안에서 style 적용시키기

내가 몰랐던 내용 정리하기

<table>
    <tr>
    <th> 번호 </th>
    <th> 제목 </th>
    <th> 작성일자 </th>
    </tr>
    <tr th:if="${!questionList.isEmpty}" th:each = "question, loop : ${questionList}">
        <td th:text="${loop.count}"></td>
        <td th:text="${question.subject}"></td>
        <td th:text="${#temporals.format(question.CreateTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
    </tr>
</table>
<table>
    <tr>
        <td th:each="page: ${#numbers.sequence(0, questionList.totalPages-1)}"
            th:class="${page == questionList.number} ?  'background-color: red;' : ''" >
          <a th:text="${page}" class="page-link" th:href="@{|?page=${page}|}"></a>
       </td>
    </tr>
</table>

👉 원하는 구현 내용 : th:class에서 true인 경우 page의 background-color에 red를 넣고싶었다.

<td th:each="page: ${#numbers.sequence(0, questionList.totalPages-1)}"
            th:class="${page == questionList.number} ?  'background-color: red;' : ''" >

동작하는데 에러가 나진 않았으나 구현되지않았다.

✨th:class로 묶여있기 때문에 class="background-color"라고 작성한 것으로 인식한다. 스타일 적용을 하기 위해서는 아래와 같이 추가로 작성해야한다.

<style>

    .red {
        background-color:red;
    }

</style>

.red로 스타일을 작성하고 th:class부분은 아래와 같이 변경해준다.

th:classappend="${page == questionList.number} ?  red : ''" 

번외 ) <style.> 태그 외에 html 스타일 적용시 사용가능한 소스

<div style="background-color:red; height:40px; width:40px;">
</div>