#14 simple blog : css

2022-08-01 02:04:20 +09:00
parent 677246734a
commit 4c21076546
12 changed files with 378 additions and 17 deletions
--- a/simpleblog/front/index.html
+++ b/simpleblog/front/index.html
@@ -4,7 +4,8 @@
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+      <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard-dynamic-subset.css" />
+      <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
--- a/simpleblog/front/package-lock.json
+++ b/simpleblog/front/package-lock.json
@@ -11,6 +11,7 @@
        "axios": "^0.27.2",
        "bootstrap": "^5.2.0",
        "element-plus": "^2.2.11",
+        "normalize.css": "^8.0.1",
        "pinia": "^2.0.16",
        "vue": "^3.2.37",
        "vue-router": "^4.1.2"
@@ -29,6 +30,7 @@
        "eslint-plugin-vue": "^9.0.0",
        "npm-run-all": "^4.1.5",
        "prettier": "^2.5.1",
+        "sass": "^1.54.0",
        "start-server-and-test": "^1.14.0",
        "typescript": "~4.7.4",
        "vite": "^3.0.1",
@@ -1466,6 +1468,19 @@
        "node": ">=4"
      }
    },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
    "node_modules/arch": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
@@ -1625,6 +1640,15 @@
        "tweetnacl": "^0.14.3"
      }
    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/blob-util": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
@@ -1832,6 +1856,45 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/ci-info": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz",
@@ -3784,6 +3847,12 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3875,6 +3944,18 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-boolean-object": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -4706,11 +4787,25 @@
        "semver": "bin/semver"
      }
    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/normalize-wheel-es": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
    },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
    "node_modules/npm-run-all": {
      "version": "4.1.5",
      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
@@ -5286,6 +5381,18 @@
        "node": ">=4"
      }
    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
    "node_modules/regexp.prototype.flags": {
      "version": "1.4.3",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
@@ -5453,6 +5560,23 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true
    },
+    "node_modules/sass": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.0.tgz",
+      "integrity": "sha512-C4zp79GCXZfK0yoHZg+GxF818/aclhp9F48XBu/+bm9vXEVAYov9iU3FBVRMq3Hx3OA4jfKL+p2K9180mEh0xQ==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/semver": {
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -7482,6 +7606,16 @@
        "color-convert": "^1.9.0"
      }
    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
    "arch": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
@@ -7597,6 +7731,12 @@
        "tweetnacl": "^0.14.3"
      }
    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
    "blob-util": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
@@ -7725,6 +7865,33 @@
      "integrity": "sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==",
      "dev": true
    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
    "ci-info": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.2.tgz",
@@ -9081,6 +9248,12 @@
      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
      "dev": true
    },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true
+    },
    "import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -9151,6 +9324,15 @@
        "has-bigints": "^1.0.1"
      }
    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
    "is-boolean-object": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -9766,11 +9948,22 @@
        }
      }
    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
    "normalize-wheel-es": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
    },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
    "npm-run-all": {
      "version": "4.1.5",
      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
@@ -10156,6 +10349,15 @@
        }
      }
    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
    "regexp.prototype.flags": {
      "version": "1.4.3",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
@@ -10269,6 +10471,17 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true
    },
+    "sass": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.0.tgz",
+      "integrity": "sha512-C4zp79GCXZfK0yoHZg+GxF818/aclhp9F48XBu/+bm9vXEVAYov9iU3FBVRMq3Hx3OA4jfKL+p2K9180mEh0xQ==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
    "semver": {
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
--- a/simpleblog/front/package.json
+++ b/simpleblog/front/package.json
@@ -17,6 +17,7 @@
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "element-plus": "^2.2.11",
+    "normalize.css": "^8.0.1",
    "pinia": "^2.0.16",
    "vue": "^3.2.37",
    "vue-router": "^4.1.2"
@@ -35,6 +36,7 @@
    "eslint-plugin-vue": "^9.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
+    "sass": "^1.54.0",
    "start-server-and-test": "^1.14.0",
    "typescript": "~4.7.4",
    "vite": "^3.0.1",
--- a/simpleblog/front/src/App.vue
+++ b/simpleblog/front/src/App.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from "vue-router";
+import Header from "@/components/Header.vue";
+import Content from "@/components/Content.vue";
 </script>

 <template>
-  <header>
-    <nav>
-      <RouterLink to="/">Home</RouterLink>
-      <RouterLink to="/write">글 작성</RouterLink>
-    </nav>
-  </header>
-
-  <RouterView />
+  <Header />
+  <Content />
 </template>

 <style scoped>
+body {
+  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+}
+
 </style>
--- a/simpleblog/front/src/assets/base.css
+++ b/simpleblog/front/src/assets/base.css
--- a/simpleblog/front/src/components/Content.vue
+++ b/simpleblog/front/src/components/Content.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <el-main class="content">
+    <el-row>
+      <el-col>
+        <RouterView />
+      </el-col>
+    </el-row>
+  </el-main>
+</template>
+
+<style scoped>
+
+.content {
+  height: calc(100vh - 60px);
+}
+
+</style>
--- a/simpleblog/front/src/components/Header.vue
+++ b/simpleblog/front/src/components/Header.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <el-header class="header">
+    <el-menu mode="horizontal" router>
+      <el-menu-item index="/">Home</el-menu-item>
+      <el-menu-item index="/write">글 작성</el-menu-item>
+    </el-menu>
+    <!--    <RouterLink to="/">Home</RouterLink>-->
+    <!--    <RouterLink to="/write">글 작성</RouterLink>-->
+  </el-header>
+</template>
+
+<style scoped>
+
+.header {
+  padding: 0;
+  height: 60px;
+}
+
+</style>
--- a/simpleblog/front/src/main.ts
+++ b/simpleblog/front/src/main.ts
@@ -4,6 +4,8 @@ import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";

+import "normalize.css"
+
 import "./assets/main.css";

 import ElementPlus from 'element-plus'
--- a/simpleblog/front/src/views/EditView.vue
+++ b/simpleblog/front/src/views/EditView.vue
@@ -41,7 +41,7 @@ const edit = () => {
      <el-input v-model="post.content" type="textarea" rows="15" />
    </div>

-    <div class="mt-2">
+    <div class="mt-2 d-flex justify-content-end">
      <el-button type="warning" @click="edit()">수정완료</el-button>
    </div>
  </div>
--- a/simpleblog/front/src/views/HomeView.vue
+++ b/simpleblog/front/src/views/HomeView.vue
@@ -17,15 +17,64 @@ axios.get("/api/posts?page=1&size=5", ).then((response) => {
 <template>
  <ul>
    <li v-for="post in posts" :key="post.id">
-      <div>
+      <div class="title">
        <router-link :to="{ name: 'read', params: { postId: post.id }}">
          {{ post.title }}
        </router-link>
      </div>

-      <div>
+      <div class="content">
        {{ post.content }}
      </div>
+
+      <div class="sub d-flex">
+        <div class="category">개발</div>
+        <div class="regDate">2022-08-01</div>
+      </div>
    </li>
  </ul>
 </template>
+
+<style scoped lang="scss">
+ul {
+  list-style: none;
+  padding: 0;
+
+  li {
+    margin-bottom: 2rem;
+
+    .title {
+      a {
+        font-size: 1.1rem;
+        color: #383838;
+        text-decoration: none;
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .content {
+      font-size: 0.85rem;
+      margin-top: 8px;
+      color: #7e7e7e;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .sub {
+      margin-top: 8px;
+      font-size: 0.78rem;
+
+      .regDate {
+        margin-left: 10px;
+        color: #6b6b6b;
+      }
+    }
+  }
+}
+
+</style>
--- a/simpleblog/front/src/views/ReadView.vue
+++ b/simpleblog/front/src/views/ReadView.vue
@@ -31,8 +31,56 @@ onMounted(() => {
 </script>

 <template>
-  <h2>{{ post.title }}</h2>
-  <div>{{ post.content }}</div>
+  <el-row>
+    <el-col>
+      <h2 class="title">{{ post.title }}</h2>

-  <el-button type="warning" @click="moveToEdit()">수정</el-button>
-</template>
+      <div class="sub d-flex">
+        <div class="category">개발</div>
+        <div class="regDate">2022-08-01 23:59:59</div>
+      </div>
+    </el-col>
+  </el-row>
+
+  <el-row class="mt-3">
+    <el-col>
+      <div class="content">{{ post.content }}</div>
+    </el-col>
+  </el-row>
+
+  <el-row class="mt-3">
+    <el-col>
+      <div class="d-flex justify-content-end">
+        <el-button type="warning" @click="moveToEdit()">수정</el-button>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<style scoped lang="scss">
+.title {
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #383838;
+  margin: 0;
+}
+
+.sub {
+  margin-top: 10px;
+  font-size: 0.78rem;
+
+  .regDate {
+    margin-left: 10px;
+    color: #6b6b6b;
+  }
+}
+
+.content {
+  font-size: 0.95rem;
+  margin-top: 12px;
+  color: #616161;
+  white-space: break-spaces;
+  line-height: 1.5;
+}
+
+</style>
--- a/simpleblog/front/src/views/WriteView.vue
+++ b/simpleblog/front/src/views/WriteView.vue
@@ -32,7 +32,9 @@ const write = () => {
    </div>

    <div class="mt-2">
-      <el-button type="primary" @click="write()">글 작성완료</el-button>
+      <div class="d-flex justify-content-end">
+        <el-button type="primary" @click="write()">글 작성완료</el-button>
+      </div>
    </div>
  </div>