diff --git a/board/src/main/resources/templates/articles/detail.html b/board/src/main/resources/templates/articles/detail.html
index 527590e0..c291651b 100644
--- a/board/src/main/resources/templates/articles/detail.html
+++ b/board/src/main/resources/templates/articles/detail.html
@@ -12,25 +12,28 @@
 
 <body>
 
-    <header id="header"></header>
+    <header id="header">
+        헤더
+        <hr>
+    </header>
 
-    <main class="container">
-        <header class="py-5 text-center">
+    <main id="article-main" class="container">
+        <header id="article-header" class="py-5 text-center">
             <h1>첫번째 글</h1>
         </header>
 
         <div class="row g-5">
             <section class="col-md-5 col-lg-4 order-md-last">
                 <aside>
-                    <p><span class="nick-name">Bobby</span></p>
-                    <p><a class="u-url" rel="me" href="mailto:haerong22@gmail.com">bobby@mail.com</a></p>
-                    <p><time datetime="2022-01-01T00:00:00">2022-08-12</time></p>
-                    <p>#java</p>
+                    <p><span id="nickname" class="nick-name">Bobby</span></p>
+                    <p><a id="email" class="u-url" rel="me" href="mailto:haerong22@gmail.com">bobby@mail.com</a></p>
+                    <p><time id="created-at" datetime="2022-01-01T00:00:00">2022-08-12</time></p>
+                    <p><span id="hashtag">#java</span></p>
                 </aside>
             </section>
 
-            <article class="col-md-7 col-lg-8">
-                <p>본문<br><br></p>
+            <article id="article-content" class="col-md-7 col-lg-8">
+                <pre>본문<br><br></pre>
             </article>
         </div>
 
@@ -47,11 +50,11 @@
                     </div>
                 </form>
 
-                <ul>
+                <ul id="article-comments" class="row col-7">
                     <li>
                         <div>
-                            <time><small>2022-08-12</small></time>
                             <strong>Bobby</strong>
+                            <small><time>2022-08-12</time></small>
                             <p>
                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
                                 Lorem ipsum dolor sit amet
@@ -92,7 +95,10 @@
 
     </main>
 
-    <footer id="footer"></footer>
+    <footer id="footer">
+        <hr>
+        푸터
+    </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
 </body>
diff --git a/board/src/main/resources/templates/articles/detail.th.xml b/board/src/main/resources/templates/articles/detail.th.xml
index bbfb3414..6d5e9a28 100644
--- a/board/src/main/resources/templates/articles/detail.th.xml
+++ b/board/src/main/resources/templates/articles/detail.th.xml
@@ -2,4 +2,21 @@
 <thlogic>
     <attr sel="#header" th:replace="header :: header" />
     <attr sel="#footer" th:replace="footer :: footer" />
+
+    <attr sel="#article-main" th:object="${article}">
+        <attr sel="#article-header/h1" th:text="*{title}" />
+        <attr sel="#nickname" th:text="*{nickname}" />
+        <attr sel="#email" th:text="*{email}" />
+        <attr sel="#created-at" th:datetime="*{createdAt}" th:text="*{#temporals.format(createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
+        <attr sel="#hashtag" th:text="*{hashtag}" />
+        <attr sel="#article-content/pre" th:text="*{content}" />
+    </attr>
+
+    <attr sel="#article-comments" th:remove="all-but-first">
+        <attr sel="li[0]" th:each="articleComment : ${articleComments}">
+            <attr sel="div/strong" th:text="${articleComment.nickname}" />
+            <attr sel="div/small/time" th:datetime="${article.createdAt}" th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
+            <attr sel="div/p" th:text="${articleComment.content}" />
+        </attr>
+    </attr>
 </thlogic>
\ No newline at end of file
