먼저 list.html을 수정할거다
이미지를 넣는 것을 먼저 한다
<div class="card">
<img src="https://placehold.co/300">
<div>
<h4 th:text="${name}">바지</h4>
<p>7만</p>이런식으로 를 사용한다
그리고 css를 만들어 줄거다
static에 main.css를 만들어준다
.card {
margin : 30px auto;
display : flex;
}
.card img {
width : 150px;
margin-right : 20px;
}그리고 이 css를 html에서 사용하려면 아래에
<title>Document</title>
<link href="/main.css" rel="stylesheet">이렇게 넣어주면 된다
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="/main.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="https://placehold.co/300">
<div>
<h4 th:text="${name}">바지</h4>
<p>7만</p>
</div>
</div>
<div class="card">
<img src="https://placehold.co/300">
<div>
<h4 th:text="${name}">셔츠</h4>
<p>7만</p>
</div>
</div>
</body>
</html> 이제 실행을 하여 'localhost:8080/list'에 들어가보면
이렇게 나온다
하이도의 BackEnd 입문