th:classappend๋?
- HTML ์์์ class ์์ฑ์ ๋์ ์ผ๋ก ๊ฐ์ ์ถ๊ฐ(append) ํ๋ ๊ธฐ๋ฅ์ ์ ๊ณต
- ๊ธฐ์กด์ ์ ์๋ ํด๋์ค๋ ์ ์งํ๋ฉด์, ํน์ ์กฐ๊ฑด์ด ์ฐธ์ผ ๋๋ง ์๋ก์ด ํด๋์ค๋ฅผ ๋ํ ์ ์์ต๋๋ค.
- ์ผํญ ์ฐ์ฐ์(์กฐ๊ฑด ? ์ฐธ์ผ ๋ ๊ฐ : ๊ฑฐ์ง์ผ ๋ ๊ฐ)์ ํจ๊ป ์์ฃผ ์ฌ์ฉ๋ฉ๋๋ค.
๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
<li class="list-group-item"
th:classappend="${isActive} ? ' active' : ''">
- isActive๊ฐ true๋ฉด: class="list-group-item active"
- isActive๊ฐ false๋ฉด: class="list-group-item" (๋ณ๊ฒฝ ์์)
์ค์ ์์
๋๊ธ๊ณผ ๋๋๊ธ ๊ตฌ๋ถ
๋๊ธ ๊ธฐ๋ฅ์์ ๋ถ๋ชจ ๋๊ธ๊ณผ ๋๋๊ธ์ ๊ตฌ๋ถํ ๋ th:classappend๋ฅผ ํ์ฉํ ์ ์์ต๋๋ค.
<li class="list-group-item"
th:classappend="${comment.parentId != null} ? ' reply' : ''">
<span th:text="${comment.content}"></span>
</li>
์ดํ CSS์์ reply ํด๋์ค์ ์คํ์ผ์ ์ ์ฉํ๋ฉด:
.reply {
margin-left: 20px;
}
.reply::before {
content: "โณ";
margin-right: 5px;
color: #888;
}
๊ฒฐ๊ณผ์ ์ผ๋ก ํ๋ฉด์์๋
- ๋๊ธ
- โณ ๋๋๊ธ
ํ์์ผ๋ก ๊ณ์ธต ๊ตฌ์กฐ๊ฐ ๋๋ฌ๋๊ฒ ๋ฉ๋๋ค.
์ธ์ ์ฐ๋ฉด ์ข์๊ฐ?
์กฐ๊ฑด์ ๋ฐ๋ผ ๋ค๋ฅธ ์คํ์ผ์ ์ ์ฉํด์ผ ํ ๋,
if๋ฌธ ๋์ CSS ํด๋์ค๋ฅผ ๊น๋ํ๊ฒ ๋ถ์ด๊ณ ์ถ์ ๋,
์ฌ๋ฌ ํด๋์ค๋ฅผ ๋์์ ์ ์ดํด์ผ ํ ๋ (classappend๋ ๊ธฐ์กด class๋ฅผ ๋ฎ์ด์ฐ์ง ์๊ณ ์ด์ด๋ถ์ ๋๋ค.)
th:classappend๋ ์์ ๊ธฐ๋ฅ ๊ฐ์ง๋ง, UI/UX์์ ์กฐ๊ฑด๋ถ ์คํ์ผ๋ง์ ๊ตฌํํ ๋ ๊ต์ฅํ ์ ์ฉํฉ๋๋ค.
- ๊ธฐ์กด ํด๋์ค๋ ๊ทธ๋๋ก ๋๋ฉด์
- ์ํฉ์ ๋ง๊ฒ ํ์ํ ํด๋์ค๋ง ๋์ ์ผ๋ก ์ถ๊ฐ ๊ฐ๋ฅ
์๋ฅผ ๋ค์ด ๋๊ธ/๋๋๊ธ ๊ตฌ๋ถ, ํ์ฑํ ์ํ ๋ฒํผ, ์ ํ๋ ๋ฉ๋ด ํ์ ๋ฑ์ ๋๋ฆฌ ํ์ฉ๋ฉ๋๋ค.
์ฆ, ํ๋ฐํธ์๋์ ์๋ฒ ๋ฐ์ดํฐ๋ฅผ ์ฐ๊ฒฐํ๋ ๊ฐ๊ต ์ญํ ์ ํ๋ ์์ฑ์ด๋ผ ํ ์ ์์ต๋๋ค.