Spring

Spring 미디어쿼리를 통한 반응형 페이지 추가

테라시아 2024. 12. 28. 08:40

☆ Code

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	// media query
	<meta charset="UTF-8">
	<title>Board</title>
	<link rel="stylesheet" href="/css/bootstrap.css">
	<style>
		@media (max-width: 918px) {
			.hide {
				display: none;
			}
		}
	</style>
</head>
<body>
	<h1 class="text-center" style="margin: 20px auto;">
		Board List
		<input type="button" id="write" value="글쓰기">
		<span class="btn btn-success">글쓰기2</span>
	</h1>
	<hr>
	<div class="col-lg-8 text-center" style="margin: 0 auto;">
		<table class="table table-striped table-dark">
			<thead>
				<tr>
					<td class="hide">번호</td>
					<td>제목</td>
					<td>작성자</td>
					<td>작성일</td>
					<td class="hide">수정일</td>
				</tr>
			</thead>
			<tbody>
				<th:block th:each="board:${list}">
					<tr th:object="${board}">
						<td th:text="*{bno}" class="hide"></td>
						<td><a th:text="*{title}" th:href="@{/board/read(bno=*{bno})}"></a></td>
						<td th:text="*{writer}"></td>
						<td th:text="*{regdate}"></td>
						<td th:text="*{updatedate}" class="hide"></td>
					</tr>
				</th:block>
			</tbody>
		</table>
	</div>
</body>
<script th:inline="javascript">
	var btn = document.getElementById("write");
	var btn2 = document.querySelector("span.btn");
	btn.addEventListener("click", function() {
		location.href = "/board/register"
	});
	btn2.addEventListener("click", function() {
		location.href = "/board/register"
	});
	
	var msg = [[${msg}]];
	if(msg){
		alert(msg);
	}
</script>
</html>