File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="w1400">
<div class="tech">
<section class="page-logo">
<img src="../../../resources/jpg/tech-logo.png" alt="">
<h1>기술문서</h1>
</section>
<div class="tech-bos">
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
<section class="tech-box-sec">
<div class="tech-box-sec-h3">
<h3>기술문서</h3>
</div>
<div>
<img src="../../../resources/jpg/data-img3.png" alt="">
</div>
<div>
<p>기술문서1의 설명</p>
</div>
<div>
<button>바로가기</button>
</div>
</section>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
},
watch: {
},
computed: {
},
mounted() {
console.log('Technology mounted');
}
}
</script>
<style scoped>
.page-logo img {
width: 10rem;
}
.tech-bos {
width: 90%;
margin: 0 auto;
/* place-items: center; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4rem;
padding: 6rem 3rem 6rem 3rem;
text-align: center;
/* border: 1px solid red; */
}
.tech-box-sec {
padding: 2rem;
/* border-radius: 2rem; */
background-color: #fafafa;
box-shadow: 2px 2px 5px rgba(191, 191, 191, 0.447);
/* border: 1px solid rgb(191, 191, 191); */
}
.tech-box-sec-h3 {
padding: 1rem;
font-size: 1.7rem;
font-family: "Pretendard-Regular";
}
.tech-box-sec div img {
/* border: 1px solid blue; */
box-shadow: 3px 3px 6px rgba(191, 191, 191, 0.447);
width: 85%;
height: 15rem;
margin: 0 auto;
background-size: cover;
border-radius: 1.5rem;
}
.tech-box-sec div p {
width: 85%;
padding: 2rem;
margin: 0 auto;
font-size: 1.5rem;
font-family: "Pretendard-Regular";
}
.tech-box-sec div button {
width: 85%;
border-radius: 2rem;
padding: 2rem;
font-size: 1.5rem;
color: white;
font-family: "Pretendard-Regular";
background-color: #3f87f7;
}
@media all and (max-width: 479px) {
.tech-logo {
width: 100%;
text-align: center;
}
.tech-logo img {
margin: 0 auto;
}
.tech-bos {
width: 90%;
grid-template-columns: 1fr;
}
}
@media all and (min-width: 480px) and (max-width: 767px) {
.tech-logo {
width: 100%;
text-align: center;
}
.tech-logo img {
margin: 0 auto;
}
.tech-bos {
width: 90%;
grid-template-columns: 1fr 1fr;
}
}
@media all and (min-width: 767px) and (max-width: 1023px) {
.tech-logo {
width: 100%;
text-align: center;
}
.tech-logo img {
margin: 0 auto;
}
.tech-bos {
width: 90%;
grid-template-columns: 1fr 1fr;
}
}
</style>