Index: vue/src/components/DevOps/common/HeaderLogo.vue
===================================================================
diff -u -rc36d6a1edaefb3b4c0919906e90941504b46242c -r619e127990a89741f2097caaaee05808e3cfbae2
--- vue/src/components/DevOps/common/HeaderLogo.vue	(.../HeaderLogo.vue)	(revision c36d6a1edaefb3b4c0919906e90941504b46242c)
+++ vue/src/components/DevOps/common/HeaderLogo.vue	(.../HeaderLogo.vue)	(revision 619e127990a89741f2097caaaee05808e3cfbae2)
@@ -5,7 +5,7 @@
     </h1>
     <button
       type="button"
-      class="menu-bar toggle"
+      class="menu-bar"
       @click="$emit('openMobileMenu')"
       v-bind:class="{ active: btnActive }"
     >
@@ -26,7 +26,8 @@
 header {
   display: flex;
   justify-content: space-between;
-  position: relative;
+  width: 100%;
+
   #logo {
     margin: 30px 0 0 35px;
     a {
Index: vue/src/components/DevOps/contents/DevToolsSupport.vue
===================================================================
diff -u -rf89cef5e8fa1a55fbcffba61a3704e4187874df1 -r619e127990a89741f2097caaaee05808e3cfbae2
--- vue/src/components/DevOps/contents/DevToolsSupport.vue	(.../DevToolsSupport.vue)	(revision f89cef5e8fa1a55fbcffba61a3704e4187874df1)
+++ vue/src/components/DevOps/contents/DevToolsSupport.vue	(.../DevToolsSupport.vue)	(revision 619e127990a89741f2097caaaee05808e3cfbae2)
@@ -319,12 +319,12 @@
   }
 }
 
-@media (min-width: 580px) and (max-width: 1199px) {
+@media (min-width: 750px) and (max-width: 1380px) {
   .content-section {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-@media (min-width: 375px) and (max-width: 579px) {
+@media (min-width: 375px) and (max-width: 750px) {
   .content-section {
     grid-template-columns: repeat(1, 1fr);
     .dev-tools {
Index: vue/src/components/DevOps/contents/JSTFFaq.vue
===================================================================
diff -u -r539afbe24c6d1691d5ee2168833717bea66525a5 -r619e127990a89741f2097caaaee05808e3cfbae2
--- vue/src/components/DevOps/contents/JSTFFaq.vue	(.../JSTFFaq.vue)	(revision 539afbe24c6d1691d5ee2168833717bea66525a5)
+++ vue/src/components/DevOps/contents/JSTFFaq.vue	(.../JSTFFaq.vue)	(revision 619e127990a89741f2097caaaee05808e3cfbae2)
@@ -2,51 +2,34 @@
   <div class="conainer">
     <ContentHeader subTitle="jsTree Service Framework<sup>TSF</sup> FAQ" />
     <div class="content-section">
-      <!-- post text -->
-      <p>
-        <strong
-          >jsTree Service Framework<sup class="label-primary">TSF</sup> 리소스란
-          무엇입니까?</strong
-        >
-      </p>
-      <ul class="list-unstyled font13 lineh165">
+      <h3>jsTree Service Framework<sup>TSF</sup> 리소스란 무엇입니까?</h3>
+      <ul>
         <li>
-          <ul>
-            <li>
-              리소스는 프로젝트에서 사용하는 비 소스 코드 파일입니다. 예를 들어, 특성
-              파일, 이미지 및 XML 파일이 있습니다.
-            </li>
-          </ul>
+          리소스는 프로젝트에서 사용하는 비 소스 코드 파일입니다. 예를 들어, 특성 파일,
+          이미지 및 XML 파일이 있습니다.
         </li>
       </ul>
 
-      <br /><br />
-      <p>
+      <br />
+      <h3>
         라이프 사이클에서
-        <strong
-          >jsTree Service Framework<sup class="label-primary">TSF</sup>는 언제
-          사용됩니까?</strong
-        >
-      </p>
-      <blockquote class="font13">
-        <p>TSF는 어플리케이션 라이프 사이클의 모든 단계에서 사용됩니다.</p>
-      </blockquote>
+        <strong>jsTree Service Framework<sup>TSF</sup>는 언제 사용됩니까?</strong>
+      </h3>
+      <p>TSF는 어플리케이션 라이프 사이클의 모든 단계에서 사용됩니다.</p>
 
-      <br /><br />
-      <p>TSF는 PMBOK 기준으로 다음을 지원하고 있습니다.</p>
-      <blockquote class="font13">
-        <p>착수 : 기획 문서를 온라인으로 공유할 수 있는 표준 포맷을 제공합니다.</p>
-        <p>기획 : 기획을 기준으로 요구사항 관리 표준 문서를 제공합니다.</p>
-        <p>실행 및 이행 : 요구사항을 기준으로 TASK로 전환하는 시스템을 제공합니다.</p>
-        <p>
-          감시 및 통제 : 빌드 시스템과 연계된 정적 분석을 제공하며, 이슈 관리 시스템을
-          제공합니다.
-        </p>
-        <p>
-          종료 : 빌드 결과를 컨테이너화 하고, 테스트 환경과 릴리즈 환경에 각각 배포 할 수
-          있는 시스템을 제공합니다.
-        </p>
-      </blockquote>
+      <br />
+      <h3>TSF는 PMBOK 기준으로 다음을 지원하고 있습니다.</h3>
+      <p>착수 : 기획 문서를 온라인으로 공유할 수 있는 표준 포맷을 제공합니다.</p>
+      <p>기획 : 기획을 기준으로 요구사항 관리 표준 문서를 제공합니다.</p>
+      <p>실행 및 이행 : 요구사항을 기준으로 TASK로 전환하는 시스템을 제공합니다.</p>
+      <p>
+        감시 및 통제 : 빌드 시스템과 연계된 정적 분석을 제공하며, 이슈 관리 시스템을
+        제공합니다.
+      </p>
+      <p>
+        종료 : 빌드 결과를 컨테이너화 하고, 테스트 환경과 릴리즈 환경에 각각 배포 할 수
+        있는 시스템을 제공합니다.
+      </p>
     </div>
   </div>
 </template>
@@ -60,3 +43,16 @@
   },
 };
 </script>
+<style lang="scss" scoped>
+h3 {
+  color: lightblue;
+  font-weight: 500;
+}
+ul {
+  margin-left: 20px;
+  li {
+    list-style-type: circle;
+    margin-bottom: 10px;
+  }
+}
+</style>
Index: vue/src/components/DevOps/contents/JSTFGoal.vue
===================================================================
diff -u -r539afbe24c6d1691d5ee2168833717bea66525a5 -r619e127990a89741f2097caaaee05808e3cfbae2
--- vue/src/components/DevOps/contents/JSTFGoal.vue	(.../JSTFGoal.vue)	(revision 539afbe24c6d1691d5ee2168833717bea66525a5)
+++ vue/src/components/DevOps/contents/JSTFGoal.vue	(.../JSTFGoal.vue)	(revision 619e127990a89741f2097caaaee05808e3cfbae2)
@@ -2,83 +2,64 @@
   <div class="conainer">
     <ContentHeader subTitle="jsTree Service Framework<sup>TSF</sup> Goals" />
     <div class="content-section">
-      <!-- post text -->
-      <p>
-        (효과)
-        <strong
-          >jsTree Service Framework<sup class="label-primary">TSF</sup> 기대 효과</strong
-        >
-      </p>
+      <h3>[효과] jsTree Service Framework<sup>TSF</sup> 기대 효과</h3>
+
       <ul class="list-unstyled font13 lineh165">
         <li>
-          <ul>
-            <li>
-              설계 단계를 획기적으로 줄입니다. 물론 PK-FK 스키마 관계에 대한 설계를 단순화
-              할 수는 없습니다. 하지만, 기본적인 CRUD 및 명시적인 MetaData Colum을 활용한
-              PK-FK 관계 설정의 편의성을 제공합니다.
-            </li>
-            <li>
-              구현 단계의 데이터 객체를 일관된 형태로 Interfaceing 하여 실제 데이터베이스
-              지식을 겸하지 않고도 객체를 정의할 수 있는 단순성을 제공합니다.
-            </li>
-            <li>
-              추가적인 공통 구현이 필요하다면 Super 객체를 통한 공통 구현이 가능하며,
-            </li>
-            <li>
-              구현 단계의 데이터 객체 처리를 공통화된 서비스 로직이 처리하며, 추가적인
-              도메인 데이터 처리는 CallBack 방식 혹은 서비스 내부 구현방식으로 API를
-              제공함으로서 서비스 코드 확장성이 제공됩니다.
-            </li>
-            <li>
-              성능* 기능* 보안* 제어*등 기능적, 비기능적 스펙 모두를 Core Service에
-              적용하여 처리할 수 있는 집중식 비기능 코드 구현을 제공합니다.
-            </li>
-            <li>
-              따라서, Interface 변경의 적용 검토는 많은 부분 Core Service검토만으로
-              종결되는 경우가 많습니다. ( Database, Framework, Server 환경 변경 등 )
-            </li>
-            <li>
-              3번 ~ 6번의 사유로 코드 개발 시간이 가시적으로 단축되며 일관된 코드로
-              유지보수성이 향상됩니다.
-            </li>
-            <li>
-              Database SQL 처리의 Alias 제공으로 사용성 데이터 처리와 MetaData 처리 로직을
-              구분하여 차용할 수 있도록 제공됩니다.
-            </li>
-            <li>
-              모든 Cloud 서비스에서 동작하도록 Docker Container화 하여 개발 및 테스트,
-              운영이 용이합니다.
-            </li>
-            <li>
-              분산환경을 제공하므로 Scale-out 에 대응되어, 대용량 서비스에 최적화 되어
-              있습니다. ( BigData, AI 등의 대규모 데이터 처리 서비스 운용에도 사용이
-              가능합니다 )
-            </li>
-          </ul>
+          설계 단계를 획기적으로 줄입니다. 물론 PK-FK 스키마 관계에 대한 설계를 단순화 할
+          수는 없습니다. 하지만, 기본적인 CRUD 및 명시적인 MetaData Colum을 활용한 PK-FK
+          관계 설정의 편의성을 제공합니다.
         </li>
+        <li>
+          구현 단계의 데이터 객체를 일관된 형태로 Interfaceing 하여 실제 데이터베이스
+          지식을 겸하지 않고도 객체를 정의할 수 있는 단순성을 제공합니다.
+        </li>
+        <li>추가적인 공통 구현이 필요하다면 Super 객체를 통한 공통 구현이 가능하며,</li>
+        <li>
+          구현 단계의 데이터 객체 처리를 공통화된 서비스 로직이 처리하며, 추가적인 도메인
+          데이터 처리는 CallBack 방식 혹은 서비스 내부 구현방식으로 API를 제공함으로서
+          서비스 코드 확장성이 제공됩니다.
+        </li>
+        <li>
+          성능* 기능* 보안* 제어*등 기능적, 비기능적 스펙 모두를 Core Service에 적용하여
+          처리할 수 있는 집중식 비기능 코드 구현을 제공합니다.
+        </li>
+        <li>
+          따라서, Interface 변경의 적용 검토는 많은 부분 Core Service검토만으로 종결되는
+          경우가 많습니다. ( Database, Framework, Server 환경 변경 등 )
+        </li>
+        <li>
+          3번 ~ 6번의 사유로 코드 개발 시간이 가시적으로 단축되며 일관된 코드로
+          유지보수성이 향상됩니다.
+        </li>
+        <li>
+          Database SQL 처리의 Alias 제공으로 사용성 데이터 처리와 MetaData 처리 로직을
+          구분하여 차용할 수 있도록 제공됩니다.
+        </li>
+        <li>
+          모든 Cloud 서비스에서 동작하도록 Docker Container화 하여 개발 및 테스트, 운영이
+          용이합니다.
+        </li>
+        <li>
+          분산환경을 제공하므로 Scale-out 에 대응되어, 대용량 서비스에 최적화 되어
+          있습니다. ( BigData, AI 등의 대규모 데이터 처리 서비스 운용에도 사용이
+          가능합니다 )
+        </li>
       </ul>
 
-      <br /><br />
+      <br />
+
+      <h3>[활용] jsTree Service Framework<sup>TSF</sup>활용 분야</h3>
+
+      <p>Java Application 적용 가능한 모든 서비스 및 제품</p>
+
+      <br />
+      <p>표준 프로젝트 관리</p>
+      <p>관리 및 현황 파악. 산출물의 온라인 화</p>
       <p>
-        (활용)
-        <strong
-          >jsTree Service Framework<sup class="label-primary">TSF</sup>활용 분야</strong
-        >
+        프로젝트의 모든 활동은 이슈로 관리되며, 프로젝트의 산출물은 온라인 문서로
+        관리됩니다. 따라서 현황파악 및 사후 프로젝트의 유지 및 확장을 보장할 수 있습니다.
       </p>
-      <blockquote class="font13">
-        <p>Java Application 적용 가능한 모든 서비스 및 제품</p>
-      </blockquote>
-
-      <br /><br />
-      <blockquote class="font13">
-        <p>표준 프로젝트 관리</p>
-        <p>관리 및 현황 파악. 산출물의 온라인 화</p>
-        <p>
-          프로젝트의 모든 활동은 이슈로 관리되며, 프로젝트의 산출물은 온라인 문서로
-          관리됩니다. 따라서 현황파악 및 사후 프로젝트의 유지 및 확장을 보장할 수
-          있습니다.
-        </p>
-      </blockquote>
     </div>
   </div>
 </template>
@@ -90,3 +71,16 @@
   components: { ContentHeader },
 };
 </script>
+<style lang="scss" scoped>
+h3 {
+  color: lightblue;
+  font-weight: 500;
+}
+ul {
+  margin-left: 20px;
+  li {
+    list-style-type: circle;
+    margin-bottom: 10px;
+  }
+}
+</style>
Index: vue/src/components/DevOps/contents/JSTFIntroduction.vue
===================================================================
diff -u -r539afbe24c6d1691d5ee2168833717bea66525a5 -r619e127990a89741f2097caaaee05808e3cfbae2
--- vue/src/components/DevOps/contents/JSTFIntroduction.vue	(.../JSTFIntroduction.vue)	(revision 539afbe24c6d1691d5ee2168833717bea66525a5)
+++ vue/src/components/DevOps/contents/JSTFIntroduction.vue	(.../JSTFIntroduction.vue)	(revision 619e127990a89741f2097caaaee05808e3cfbae2)
@@ -2,11 +2,7 @@
   <div class="conainer">
     <ContentHeader subTitle="jsTree Service Framework<sup>TSF</sup> Introduction" />
     <div class="content-section">
-      <!-- post text -->
-      <p>
-        (정의)
-        <strong>jsTree Service Framework<sup class="label-primary">TSF</sup>란?</strong>
-      </p>
+      <h3>[정의] jsTree Service Framework<sup>TSF</sup>란?</h3>
 
       <p class="font13 lineh165">
         소프트웨어의 비즈니스 로직 구현시, 미리 구현된 TSF 모델을 확장하여(M)<br />
@@ -15,95 +11,84 @@
       </p>
 
       <br />
-      <p>
-        (개요)
-        <strong>jsTree Service Framework<sup class="label-primary">TSF</sup>소개</strong>
-      </p>
-      <ul class="list-unstyled font13 lineh165">
+      <h3>[개요] jsTree Service Framework<sup>TSF</sup>소개</h3>
+
+      <ul>
         <li>
-          <ul>
-            <li>
-              jsTree Service Framework는 날로 복잡해지고, 급격하게 변화하는 고객의
-              요구사항을 빠르게 반영하면서, 어플리케이션의 품질과 구조를 일정하게 유지하기
-              위한 서비스 레이어 프레임워크입니다.
-            </li>
-            <li>
-              jsTree Service Framework는 일관된 객체 모델을 활용하여 개발 생산성과 품질
-              그리고 수시 유지보수에 대한 적응성 등을 동시에 보장하는 어플리케이션 서비스
-              프레임워크 입니다.
-            </li>
-            <li>
-              본 프레임워크의 목적은 확장된 단일 모델을 활용하여 어플리케이션을 단일
-              로직에 대응 할 수 있음을 근간으로 하고 있습니다.
-            </li>
-            <li>
-              프레임워크 효용성 증명 방법은 확장 Tree 모델만을 활용하여 토론형 비교
-              사이트를 개발 후, 실서비스에서 MetaData만을 구현하는 수준만으로도 사용자의
-              요구사항을 수렴할 수 있다는 명제를 집중하여 구현하고 있습니다.
-            </li>
-            <li>
-              또한 활용성 측면을 고려하여, 전자정부 표준 프레임워크를 기반으로 본 서비스
-              프레임워크를 개발하여, 중소기업부터 대기업까지 폭넓게 사용할 수 있도록
-              하였습니다.
-            </li>
-            <li>
-              구현 결과 RDB를 활용한 대부분의 Java Application 로직을 단일하게 변경 및
-              개발 할 수 있었으며, Application 구현과 운용에 매우 다양한 긍정적 효과를
-              확인 할 수 있었습니다.
-            </li>
-          </ul>
+          jsTree Service Framework는 날로 복잡해지고, 급격하게 변화하는 고객의 요구사항을
+          빠르게 반영하면서, 어플리케이션의 품질과 구조를 일정하게 유지하기 위한 서비스
+          레이어 프레임워크입니다.
         </li>
+        <li>
+          jsTree Service Framework는 일관된 객체 모델을 활용하여 개발 생산성과 품질 그리고
+          수시 유지보수에 대한 적응성 등을 동시에 보장하는 어플리케이션 서비스 프레임워크
+          입니다.
+        </li>
+        <li>
+          본 프레임워크의 목적은 확장된 단일 모델을 활용하여 어플리케이션을 단일 로직에
+          대응 할 수 있음을 근간으로 하고 있습니다.
+        </li>
+        <li>
+          프레임워크 효용성 증명 방법은 확장 Tree 모델만을 활용하여 토론형 비교 사이트를
+          개발 후, 실서비스에서 MetaData만을 구현하는 수준만으로도 사용자의 요구사항을
+          수렴할 수 있다는 명제를 집중하여 구현하고 있습니다.
+        </li>
+        <li>
+          또한 활용성 측면을 고려하여, 전자정부 표준 프레임워크를 기반으로 본 서비스
+          프레임워크를 개발하여, 중소기업부터 대기업까지 폭넓게 사용할 수 있도록
+          하였습니다.
+        </li>
+        <li>
+          구현 결과 RDB를 활용한 대부분의 Java Application 로직을 단일하게 변경 및 개발 할
+          수 있었으며, Application 구현과 운용에 매우 다양한 긍정적 효과를 확인 할 수
+          있었습니다.
+        </li>
       </ul>
 
-      <br /><br />
+      <br />
+
+      <h3>[계기] jsTree Service Framework<sup>TSF</sup>개발 배경</h3>
+
       <p>
-        (계기)
-        <strong
-          >jsTree Service Framework<sup class="label-primary">TSF</sup>개발 배경</strong
-        >
+        프레임워크는 구현 시 패턴을 제공하는 방식이나, 몇 가지 기능적인 부분을 제외한
+        서비스 구현 설계는 제시하지 않는다. 따라서 프레임워크를 사용하지만, 실제 구현은
+        패턴화 되지 않고, 요청 별 처리 프로세스를 만드는 방식을 취하다보니 단편화 현상이
+        발생하고, 이는 개발 일관성과 유지보수성에 악영향을 미치게 된다.
       </p>
-      <blockquote class="font13">
-        <p>
-          프레임워크는 구현 시 패턴을 제공하는 방식이나, 몇 가지 기능적인 부분을 제외한
-          서비스 구현 설계는 제시하지 않는다. 따라서 프레임워크를 사용하지만, 실제 구현은
-          패턴화 되지 않고, 요청 별 처리 프로세스를 만드는 방식을 취하다보니 단편화 현상이
-          발생하고, 이는 개발 일관성과 유지보수성에 악영향을 미치게 된다.
-        </p>
-        <p>
-          즉, 프레임워크를 사용하여 얻어지는 이득이나, 수준은 일정 범위를 벗어나게 되면,
-          그 실효성이 없어지는 현상이 일어난다. 이 현상은 서비스 코드를 작성하는 개발자의
-          수준과 철학이 코드에 반영되게 되며, 실제 프레임워크가 관여할 수 없는 부분이기
-          때문이다.
-        </p>
-        <p>
-          즉, 고객의 요구사항이 변경되거나 스펙이 바뀌게 되면, 프레임워크 레이어상의
-          변경이 아닌 개발 코드의 변경은 프로세스 요청마다 구현한 코드의 개별 구성 별로
-          변경이 이루어지다 보니 점차 코드의 품질이 저하되는 현상이 발생하게 된다.
-        </p>
-        <p>
-          이에, TSF는 날로 복잡해지고, 급격하게 변화하는 고객의 요구사항을 빠르게
-          반영하면서 어플리케이션 품질을 일정하게 유지하기 위하여 일관된 객체 모델을 활용,
-          개발 생산성과 품질 그리고 수시 유지보수에 대한 적응성등을 동시에 보장하는
-          어플리케이션의 아키텍처가 필요함에 따라 TSF(jsTree Service Framework)를 연구 및
-          구현하게 되었다.
-        </p>
-        <p>
-          본 프로젝트의 목적은 확장된 Tree 모델을 활용하여 어플리케이션을 단일 로직에 대응
-          할 수 있음을 증명하는데 있다. ( 중앙 집중형 아키텍쳐 )
-        </p>
-        <p>
-          연구 방법은 기반 프레임워크인 Spring, Struts, iBatis, Hibernate등을 기준으로
-          확장 Tree Model을 구현하며, Service Layer의 API Code를 제공하는데 집중된다.
-        </p>
+      <p>
+        즉, 프레임워크를 사용하여 얻어지는 이득이나, 수준은 일정 범위를 벗어나게 되면, 그
+        실효성이 없어지는 현상이 일어난다. 이 현상은 서비스 코드를 작성하는 개발자의
+        수준과 철학이 코드에 반영되게 되며, 실제 프레임워크가 관여할 수 없는 부분이기
+        때문이다.
+      </p>
+      <p>
+        즉, 고객의 요구사항이 변경되거나 스펙이 바뀌게 되면, 프레임워크 레이어상의 변경이
+        아닌 개발 코드의 변경은 프로세스 요청마다 구현한 코드의 개별 구성 별로 변경이
+        이루어지다 보니 점차 코드의 품질이 저하되는 현상이 발생하게 된다.
+      </p>
+      <p>
+        이에, TSF는 날로 복잡해지고, 급격하게 변화하는 고객의 요구사항을 빠르게 반영하면서
+        어플리케이션 품질을 일정하게 유지하기 위하여 일관된 객체 모델을 활용, 개발
+        생산성과 품질 그리고 수시 유지보수에 대한 적응성등을 동시에 보장하는
+        어플리케이션의 아키텍처가 필요함에 따라 TSF(jsTree Service Framework)를 연구 및
+        구현하게 되었다.
+      </p>
+      <p>
+        본 프로젝트의 목적은 확장된 Tree 모델을 활용하여 어플리케이션을 단일 로직에 대응
+        할 수 있음을 증명하는데 있다. ( 중앙 집중형 아키텍쳐 )
+      </p>
+      <p>
+        연구 방법은 기반 프레임워크인 Spring, Struts, iBatis, Hibernate등을 기준으로 확장
+        Tree Model을 구현하며, Service Layer의 API Code를 제공하는데 집중된다.
+      </p>
 
-        <p>
-          최종적으로는 TSF 와 Egovframework를 통합 및 적응 할 수 있는 패키지로 이행한다.
-        </p>
-        <p>
-          또한, Cloud 시대에 대응하기 위하여 Docker 컨테이너화 및 분산 아키텍쳐를 적용하여
-          보안성, 확장성, 생산성, 성능 및 품질을 강화하여 배포하는데 최종 목적을 가진다.
-        </p>
-      </blockquote>
+      <p>
+        최종적으로는 TSF 와 Egovframework를 통합 및 적응 할 수 있는 패키지로 이행한다.
+      </p>
+      <p>
+        또한, Cloud 시대에 대응하기 위하여 Docker 컨테이너화 및 분산 아키텍쳐를 적용하여
+        보안성, 확장성, 생산성, 성능 및 품질을 강화하여 배포하는데 최종 목적을 가진다.
+      </p>
 
       <br /><br />
       <blockquote class="font13">
@@ -124,3 +109,16 @@
   },
 };
 </script>
+<style lang="scss" scoped>
+h3 {
+  color: lightblue;
+  font-weight: 500;
+}
+ul {
+  margin-left: 20px;
+  li {
+    list-style-type: circle;
+    margin-bottom: 10px;
+  }
+}
+</style>
Index: vue/src/components/DevOps/contents/JSTFUsage.vue
===================================================================
diff -u -r539afbe24c6d1691d5ee2168833717bea66525a5 -r619e127990a89741f2097caaaee05808e3cfbae2
--- vue/src/components/DevOps/contents/JSTFUsage.vue	(.../JSTFUsage.vue)	(revision 539afbe24c6d1691d5ee2168833717bea66525a5)
+++ vue/src/components/DevOps/contents/JSTFUsage.vue	(.../JSTFUsage.vue)	(revision 619e127990a89741f2097caaaee05808e3cfbae2)
@@ -2,51 +2,29 @@
   <div class="conainer">
     <ContentHeader subTitle="jsTree Service Framework<sup>TSF</sup> Usage" />
     <div class="content-section">
-      <!-- post text -->
-      <p>
-        (사용법)
-        <strong
-          >jsTree Service Framework<sup class="label-primary">TSF</sup> 활용 방법</strong
-        >
-      </p>
-      <ul class="list-unstyled font13 lineh165">
+      <h3>[사용법] jsTree Service Framework<sup>TSF</sup> 활용 방법</h3>
+
+      <ul>
+        <li>TSF는 전자정부 프레임워크를 기반으로 확장한 프로젝트 템플릿을 제공합니다.</li>
         <li>
-          <ul>
-            <li>
-              TSF는 전자정부 프레임워크를 기반으로 확장한 프로젝트 템플릿을 제공합니다.
-            </li>
-            <li>
-              다음 예제는 TSF를 Download하고 곧바로 프로젝트를 시작할 수 있는 기본
-              사용법을 설명합니다.
-            </li>
-            <li>TSF는 Project Architect Tool로 Maven 3.0.5 이상을 사용합니다.</li>
-          </ul>
+          다음 예제는 TSF를 Download하고 곧바로 프로젝트를 시작할 수 있는 기본 사용법을
+          설명합니다.
         </li>
+        <li>TSF는 Project Architect Tool로 Maven 3.0.5 이상을 사용합니다.</li>
       </ul>
 
-      <br /><br />
+      <br />
+
+      <h3>[리소스 복사] jsTree Service Framework<sup>TSF</sup>Download</h3>
+
+      <p>Git Clone https://github.com/jstree/jsTree-Service-Framework-Backend-App.git</p>
+      <p>Git Clone https://github.com/jstree/jsTree-Service-Framework-Frontend-App.git</p>
+
+      <br />
       <p>
-        (리소스 복사)
-        <strong
-          >jsTree Service Framework<sup class="label-primary">TSF</sup>Download</strong
-        >
+        TSF는 전통적인 Java IDE인 Eclipse를 지원하고, 최근 인기있는 툴인 InteliJ를
+        지원합니다.
       </p>
-      <blockquote class="font13">
-        <p>
-          Git Clone https://github.com/jstree/jsTree-Service-Framework-Backend-App.git
-        </p>
-        <p>
-          Git Clone https://github.com/jstree/jsTree-Service-Framework-Frontend-App.git
-        </p>
-      </blockquote>
-
-      <br /><br />
-      <blockquote class="font13">
-        <p>
-          TSF는 전통적인 Java IDE인 Eclipse를 지원하고, 최근 인기있는 툴인 InteliJ를
-          지원합니다.
-        </p>
-      </blockquote>
     </div>
   </div>
 </template>
@@ -60,3 +38,16 @@
   },
 };
 </script>
+<style lang="scss" scoped>
+h3 {
+  color: lightblue;
+  font-weight: 500;
+}
+ul {
+  margin-left: 20px;
+  li {
+    list-style-type: circle;
+    margin-bottom: 10px;
+  }
+}
+</style>