+  background: url(../jpg/main-pu.png) no-repeat;

+.m-p-c-4 div img {

+  width: 110px !important;

+  padding-top: 6rem;

+.m-p-c-3 div img,

+/* .m-p-c-4 d/iv img, */

+  width: 80px !important;

+  background: url(../jpg/main-pu2.png) no-repeat center center;

+                    link: "/Technology.page",

+import TechnologyDtail from "../pages/user/Data/TechnologyDtail.vue";

+import DataDtali from "../pages/user/Data/DataDtali.vue";

+  { path: "/DataDtali.page", name: "DataDtali", component: DataDtali },

+  {

+    path: "/TechnologyDtail.page",

+    name: "TechnologyDtail",

+    component: TechnologyDtail,

+  },

+                            <div class="data-t">

+

+                                <p>· 개발 지원 정책 문서</p>

+                                <p>· 법·제도 문서 등</p>

+                            </div>

+                            <div class="data-t data-t2">

+                                <p>· 서비스 모델, 프로토타입 연구·보고서 등</p>

+                            </div>

+                            <p>AI 디지털교과서<br><span>가이드라인</span></p>

+                            <div class="data-t">

+

+                                <div class="guide-logo-bt">

+

+                                    <a style="font-size: 15px;" class="down-btn-1"

+                                        href="https://webst.edunet.net/AIDT/AI 디지털교과서 개발 가이드라인.pdf" target='_blank'

+                                        download>

+                                        <i class="fa-solid fa-circle-down guide_i"

+                                            style="font-size: 20px; margin-right: 10px;"></i>가이드라인

+                                        다운받기</a>

+                                </div>

+                            </div>

+                            <tr v-for="(post, index) in posts" :key="post.id" @click="goToDetailPage(post.id)">

+                                <td>{{ index + 1 }}</td>

+                                <td>{{ post.title }}</td>

+                                <td>{{ post.date }}</td>

+                                <td>{{ post.views }}</td>

+                            </tr>

+                            <!-- <tr>

+                            </tr> -->

+

+import { useRouter } from 'vue-router';

+            posts: [

+                { id: 1, title: '첫 번째 게시글', date: '2023/10/19', views: 588 },

+                { id: 2, title: '두 번째 게시글', date: '2023/10/20', views: 789 },

+                { id: 3, title: '세 번째 게시글', date: '2023/10/21', views: 123 },

+

+                // 추가적인 게시글 데이터

+            ]

+        goToDetailPage(postId) {

+            this.$router.push('/DataDtali.page');

+        }

+</script>

+

+<style scoped>

+.data-t p {

+    width: 70%;

+    padding: 0rem 0rem 1rem 3rem !important;

+

+}

+

+.data-t2 p {

+

+    padding: 0rem 0rem 0rem 0rem !important;

+    margin: 0 auto;

+}

+

+.guide-logo-bt {

+    float: right;

+    /* margin: 0 auto; */

+    font-size: 3rem;

+    width: 70%;

+    padding-right: 3rem;

+    font-family: SBaggroM;

+    text-align: right;

+

+    cursor: pointer;

+}

+

+.guide-logo-bt a {

+    color: #e07e27;

+}

+</style>

+<template>

+    <div class="w1400">

+

+        <div class="Data-dtail">

+            <section>

+

+                <h1>{{ post.title }}</h1>

+                <p>작성일: {{ post.date }}</p>

+                <p>조회수: {{ post.views }}</p>

+            </section>

+

+            <section class="dtail-ing">

+

+                <div>{{ post.content }}</div>

+                <div>

+                    <i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i>

+                    {{ post.pick }}

+                </div>

+            </section>

+

+            <section class="dtail-button">

+

+                <button @click="uploadFile">파일 업로드</button>

+                <input type="file" @change="handleFileUpload" />

+            </section>

+

+

+            <section class="dtail-navigation">

+                <button v-if="previousPostId" @click="navigateToPreviousPost">이전글</button>

+                <button v-if="nextPostId" @click="navigateToNextPost">다음글</button>

+            </section>

+            <!-- <hr> -->

+        </div>

+    </div>

+</template>

+  

+<script>

+export default {

+    data() {

+        return {

+            post: {}

+        };

+    },

+    mounted() {

+        // 게시글 데이터를 가져오는 로직을 구현해야 합니다.

+        const postId = this.$route.params.id;

+        this.fetchPostData(postId);

+    },

+    methods: {

+        fetchPostData(postId) {

+            // postId를 기반으로 게시글 데이터를 가져오는 비동기 요청을 처리합니다.

+            // 예를 들어, API를 호출하거나 데이터베이스에서 데이터를 조회하는 로직을 작성합니다.

+            // 이 예시에서는 더미 데이터를 사용합니다.

+            const dummyData = {

+                id: postId,

+                title: '	[공유] AI 디지털교과서 개발 가이드라인 설명회 발표자료(230907)',

+                date: '2023/10/27',

+                views: 1234,

+                content: '안녕하세요. 한국교육학술 정보원입니다. 9.7(목) 진행한 AI디저털교과서 개발 가이드라인 설명회의 발표자료를 공유드립니다. 감사합니다',

+                pick: '155'

+            };

+            this.post = dummyData;

+        }

+

+    }

+}

+</script>

+

+<style scoped>

+section {

+    border-bottom: 1px solid #007aff;

+}

+

+.Data-dtail {

+    width: 100%;

+    /* border: 1px solid red; */

+    padding: 12rem 3rem;

+}

+

+.Data-dtail section:nth-child(1) {

+    border-top: 1px solid #007aff;

+

+}

+

+.Data-dtail section:nth-child(1) {

+    display: grid;

+    grid-template-columns: 70% 15% 15%;

+}

+

+.Data-dtail section:nth-child(3) {

+    padding: 3rem;

+    font-size: 1.7rem;

+}

+

+.Data-dtail h1 {

+    padding: 3rem;

+}

+

+.Data-dtail p {

+    font-size: 1.5rem;

+    padding: 4rem 0rem 0rem 4rem;

+    /* border: 1px solid red; */

+}

+

+.dtail-ing {

+    padding: 3rem;

+    height: 50rem;

+    display: grid;

+    grid-template-columns: 1fr;

+    align-content: space-between;

+}

+

+.dtail-ing div {

+    font-size: 1.7rem;

+}

+

+.dtail-button {

+    padding: 3rem;

+}

+

+hr {

+    border: 0.5px solid #007aff;

+}

+</style>(No newline at end of file)

+    background-color: #f9f9f9;

+

+        gap: 1rem;

+<template>

+    <div class="w1400">

+

+    </div>

+</template>

+

+<script>

+export default {

+    data() {

+        return {

+        }

+    },

+    methods: {

+

+    },

+    watch: {

+

+    },

+    computed: {

+

+    },

+    mounted() {

+        console.log('Technology mounted');

+    }

+}

+</script>

+

+

+

+@media all and (max-width: 479px) {

+    .news-bos {

+        grid-template-columns: 1fr;

+

+    }

+

+    .new-logo {

+        width: 100%;

+        text-align: center;

+

+    }

+

+    .new-logo img {

+        margin: 0 auto;

+        text-align: center;

+    }

+}

+

+@media all and (min-width: 480px) and (max-width: 767px) {

+    .news-bos {

+        grid-template-columns: 1fr 1fr;

+

+    }

+

+    .new-logo {

+        width: 100%;

+        text-align: center;

+

+    }

+

+    .new-logo img {

+        margin: 0 auto;

+        text-align: center;

+    }

+}

+                <section class="intro-text">

+                    <h3>AI 디지털교과서 통합지원센터 소개</h3>

+                    <p><i class="fa-solid fa-circle fa-2xs"></i>양질의 AI 디지털교과서 개발을 위한 기술 표준과 정책을 연구합니다.</p>

+                    <p><i class="fa-solid fa-circle fa-2xs"></i>개발사 간의 소통하고 협력적인 동반관계를 형성할 수 있도록 네트워킹을 지원합니다.</p>

+                    <p><i class="fa-solid fa-circle fa-2xs"></i>민간 개발사가 개발하는 AI 디지털교과서와 공공에서 제공하는 서비스 간의 원활한 연계 체계를 지원합니다.

+                    </p>

+                    <p><i class="fa-solid fa-circle fa-2xs"></i>AI 디지털교과서 모델과 적용 가능한 최신 기술 동향 정보를 제공합니다. </p>

+                    <p><i class="fa-solid fa-circle fa-2xs"></i>지속적인 AI 디지털교과서 운영 현황 분석 및 개선 방안 도출을 통해 AI 디지털교과서 활용·활성화를

+                        촉진합니다. </p>

+

+                <section class="intro-img">

+                    <img src="../../../../resources/jpg/intro-blue.png" alt="">

+                    <img src="../../../../resources/jpg/intro-green.png" alt="">

+                    <img src="../../../../resources/jpg/intro-skyblue.png" alt="">

+                </section>

+

+

+

+.intro-text {

+    padding: 3rem;

+}

+

+.intro-text h3 {

+    padding: 1rem 1rem 3rem;

+    font-size: 2rem;

+    color: #00335a;

+    font-family: "Pretendard-Regular";

+

+}

+

+.intro-text i {

+    padding: 1rem;

+    color: #00335a;

+    font-family: "Pretendard-Regular";

+

+

+}

+

+.intro-text p {

+    padding: 1rem;

+    font-size: 1.5rem;

+    color: #00335a;

+    font-family: "Pretendard-Regular";

+

+

+}

+

+.intro-img {

+    padding: 3rem;

+    display: grid;

+    gap: 0;

+    grid-template-columns: 1fr 1fr 1fr;

+}

+

+.intro-img img:nth-child(2) {

+    transform: translateY(-4.8rem);

+}

+

+.intro-img img:nth-child(3) {

+    transform: translateY(-9.7rem);

+}

+

+@media all and (max-width: 479px) {

+

+    .intro {

+        width: 100%;

+        padding: 3rem;

+

+    }

+

+    .intro-logo {

+        width: 100%;

+    }

+

+    .intro-text {

+        width: 100%;

+        padding: 2rem;

+    }

+

+    .intro-img {

+        grid-template-columns: 1fr;

+    }

+

+}

+

+@media all and (min-width: 480px) and (max-width: 767px) {

+    .intro {

+        width: 100%;

+        padding: 3rem;

+

+    }

+

+    .intro-logo {

+        width: 100%;

+    }

+

+    .intro-text {

+        width: 100%;

+        padding: 2rem;

+    }

+

+    .intro-img {

+        grid-template-columns: 1fr;

+    }

+}

+

+@media all and (min-width: 767px) and (max-width: 1023px) {

+

+    .intro-img {

+        grid-template-columns: 1fr;

+    }

+}

+                                        <input type="button" value="네트워킹" class="m-p-ai">

+                                        <img src="../../../../resources/jpg/main-box.png" alt="">

+                                        <input type="button" value="가이드라인" class="m-p-ai">

+                                        <img src="../../../../resources/jpg/main-pu4.png" alt="">

+                                        <input type="button" value="자료집" class="m-p-ai">

+                                        <img src="../../../../resources/jpg/main-pu3.png" alt="">