CSS 완료

Fianl.동아리관리프로그램/webproject-frontend-master/src/views/club_top_bar/club_Page.vue

@@ -4,7 +4,6 @@
         <header id="clubPageHeader">
             <NavClub id="navClub"></NavClub>
             <h1 class="clubName">{{club[0].name}}</h1>
-            {{club[0].logo}}
             <hr/>
         </header>
         <div class="introBlock">

Fianl.동아리관리프로그램/webproject-frontend-master/src/views/notice.vue

 <!--공지사항에서 게시글 눌렀을 때-->
 <template>
-    <div class="board">
+    <div class="Log">
         <NavClub id="navClub"></NavClub>
-    <div>
-        제목: {{notice[0].title}}<br>
-        내용: {{notice[0].content}}<br>
-        글쓴이: {{notice[0].writer}}<br>
-        작성 날짜: {{notice[0].date}}<br>
+            <div class="postContent">
+                <div id="postIntro">공지사항</div>
+                <div class="board">
+                    <div class="article">
+                        <div class="articleProfile">
+                            <img class="articleImage" src="https://cdn.pixabay.com/photo/2016/09/16/19/13/balloon-1674880__340.png"/>
+                            <div class="articleWriter">{{notice[0].writer}}
+                                <div class="articleDate">{{notice[0].date}}</div>
+                            </div>
+                        </div>
+                        <div class="articleBody">
+                            <div class="articleTitle">{{notice[0].title}}</div>
+                            <div class="articleContent">{{notice[0].content}}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="button">
+                    <router-link :to="{path:`/club_page/${club[0].id}`}">
+                        <b-button variant="outline-primary" class="button">뒤로 가기</b-button>
+                    </router-link>
+                </div>
             </div>
-    <router-link :to="{path:`/club_page/${club[0].id}`}">뒤로 가기</router-link>
     </div>
 </template>
 
@@ -38,3 +53,87 @@ export default {
     
 }
 </script>
+
+<style scoped>
+.postContent {
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+    align-items: center;
+}
+
+.postIntro {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    align-items: center;
+    justify-content: center;
+}
+
+#postIntro {
+    width: 600px;
+    height: 70px;
+    font-size: 30px;
+    border: 3px solid #d6d6d6;
+    margin-top: 30px;
+    padding: 10px;
+    text-align: left;
+}
+
+.board {
+    display:inline-block;
+    margin-top: 15px;
+    border: 3px solid #d6d6d6;
+    width: 600px;
+    height: auto;
+    padding: 10px;
+}
+
+.board p {
+    background-color: #fff;
+    width: 100%;
+}
+
+.articleImage {
+    margin: 0 5px 10px 0;
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    float: left;
+}
+
+.articleWriter {
+    padding-top: 5px;
+    float: left;
+    color: black;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.articleDate {
+    padding-top: 30px;
+    font-size: 10px;
+}
+
+.articleBody {
+    clear: both;
+}
+
+.articleTitle {
+    font-weight: bold;
+    color: black;
+    font-size: 27px;
+    float: left;
+    margin-top: 20px;
+}
+
+.articleContent {
+    clear:both;
+    float: left;
+    margin-top: 20px;
+}
+
+button {
+    margin: 40px;
+}
+</style>
\ No newline at end of file