♿ change <div> to <article>, <section> #35

padosum · Apr 19, 2022 · 4965416 · 4965416
1 parent 2b1aa27
commit 4965416
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 60 deletions.
diff --git a/src/views/Archive.vue b/src/views/Archive.vue
@@ -1,8 +1,12 @@
 <template>
   <main class="l-main">
-    <div class="bd-container archive__container">
-      <div class="title">{{ title }}</div>
-      <section class="section" v-if="!section && !tag">
+    <article class="bd-container archive__container">
+      <h1 class="title">{{ title }}</h1>
+      <section
+        aria-label="날짜별 기록 그래프"
+        class="section"
+        v-if="!section && !tag"
+      >
         <div class="heatmap">
           <CalendarHeatmap
             :values="heatMapData"
@@ -25,7 +29,7 @@
           </span>
         </ul>
       </section>
-      <section class="section">
+      <article class="section">
         <ul class="post-list">
           <post-list
             v-for="postItem in pageStatus.visiblePosts"
@@ -34,39 +38,41 @@
           >
           </post-list>
         </ul>
-      </section>
+      </article>
 
       <!-- PAGINATION -->
-      <ul
-        class="pagination"
-        v-if="pageStatus.endPage > pageStatus.startPage"
-        style="cursor: pointer"
-      >
-        <li
-          class="page-item"
-          :class="currentPage == pageStatus.startPage ? 'active' : ''"
-          @click="currentPage = pageStatus.startPage"
+      <nav>
+        <ul
+          class="pagination"
+          v-if="pageStatus.endPage > pageStatus.startPage"
+          style="cursor: pointer"
         >
-          <a class="page-link"> {{ pageStatus.startPage }}</a>
-        </li>
-        <li
-          v-for="(page, index) in pageStatus.midPages"
-          :key="index"
-          class="page-item"
-          :class="currentPage == page ? 'active' : ''"
-          @click="currentPage = page"
-        >
-          <a class="page-link">{{ page }}</a>
-        </li>
-        <li
-          class="page-item"
-          :class="currentPage == pageStatus.endPage ? 'active' : ''"
-          @click="currentPage = pageStatus.endPage"
-        >
-          <a class="page-link">{{ pageStatus.endPage }}</a>
-        </li>
-      </ul>
-    </div>
+          <li
+            class="page-item"
+            :class="currentPage == pageStatus.startPage ? 'active' : ''"
+            @click="currentPage = pageStatus.startPage"
+          >
+            <a class="page-link"> {{ pageStatus.startPage }}</a>
+          </li>
+          <li
+            v-for="(page, index) in pageStatus.midPages"
+            :key="index"
+            class="page-item"
+            :class="currentPage == page ? 'active' : ''"
+            @click="currentPage = page"
+          >
+            <a class="page-link">{{ page }}</a>
+          </li>
+          <li
+            class="page-item"
+            :class="currentPage == pageStatus.endPage ? 'active' : ''"
+            @click="currentPage = pageStatus.endPage"
+          >
+            <a class="page-link">{{ pageStatus.endPage }}</a>
+          </li>
+        </ul>
+      </nav>
+    </article>
   </main>
 </template>
 <script lang="ts">

diff --git a/src/views/Post.vue b/src/views/Post.vue
@@ -1,26 +1,25 @@
 <template>
   <main class="l-main">
-    <section class="section bd-container">
-      <div class="contents">
-        <h1 class="post-title">
-          <span v-if="!link">{{ title }}</span>
-          <a :href="link" target="_blank" v-else>
-            {{ title }}
-            <i class="bx bx-link"></i>
-          </a>
-        </h1>
-
-        <p class="post-date">
-          <i class="bx bx-calendar"></i>
-          {{ publishDate }}
-        </p>
-        <div class="post-tags">
-          <a v-for="(value, key) in tags" :key="key" :href="'/tags/' + value">
-            {{ value }}
-          </a>
-        </div>
-        <div v-html="postHtml" class="markdown-body"></div>
-      </div>
+    <article class="section bd-container contents">
+      <h1 class="post-title">
+        <span v-if="!link">{{ title }}</span>
+        <a :href="link" target="_blank" v-else>
+          {{ title }}
+          <i class="bx bx-link"></i>
+        </a>
+      </h1>
+      <h6 class="post-date">
+        <i class="bx bx-calendar"></i>
+        {{ publishDate }}
+      </h6>
+      <nav class="post-tags">
+        <a v-for="(value, key) in tags" :key="key" :href="'/tags/' + value">
+          {{ value }}
+        </a>
+      </nav>
+      <div v-html="postHtml" class="markdown-body"></div>
+    </article>
+    <section class="bd-container" aria-label="댓글">
       <Comment :repo="'padosum/tir'"></Comment>
     </section>
   </main>

diff --git a/src/views/Tags.vue b/src/views/Tags.vue
@@ -1,16 +1,16 @@
 <template>
   <main class="l-main">
-    <div class="bd-container">
-      <div class="title">Tags</div>
-      <section class="section">
+    <article class="bd-container">
+      <h1 class="title">Tags</h1>
+      <nav class="section">
         <div class="post-tags">
           <a v-for="(count, tag) in sortTags" :key="tag" :href="'/tags/' + tag">
             {{ tag }}
             <sup>{{ count }}</sup>
           </a>
         </div>
-      </section>
-    </div>
+      </nav>
+    </article>
   </main>
 </template>