<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Without Component</title>
<style>
* {
margin: 0;
padding: 0;
}
.book {
text-align: center;
border: 1px solid red;
display: inline-block;
padding: 32px;
border-radius: 6px;
margin: 8px;
}
.book_name {
font-size: 24px;
font-weight: 700;
}
.book_title {
font-size: 16px;
color: #888;
}
</style>
</head>
<body>
<div id="app">
<main>
<component></component>
<component></component>
<component></component>
<component></component>
</main>
</div>
<script>
const Component = {
template: `
<article class="book">
<div class="book_title">제목</div>
<div class="book_name">HTML</div>
</article>
`,
};
const app = Vue.createApp({});
app.component("Component", Component);
app.mount("#app");
</script>
</body>
</html>