코드작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
a{
text-decoration: none;
color: #000;
}
body {
max-width: 100%;
}
.app-text{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-size: 20px;
text-align: center;
color: #ffffff;
}
div {
display: block;
}
.layoutImg{
display: block;
background: rgba(20, 21, 22, 0.445);
width: 100%;
height: 100%;
position: relative;
margin-bottom: -350px;
}
.b_wrap {
padding: 200px 0;
overflow: hidden;
}
.b_wrap .busi_content_wrap {
max-width: 1400px;
margin: 0 auto;
}
.b_wrap .business_list {
width: 100%;
display: flex;
}
ul {
list-style: none;
}
.flip {
box-sizing: border-box;
cursor: pointer;
width: calc(100% / 4 - 3%);
height: 350px;
position: relative;
margin: 0 1.5%;
}
.b_wrap .business_list li a {
display: block;
position: relative;
text-align: center;
height: 100%;
transition: box-shadow .2s;
}
.b_wrap .business_list li a .title {
font-size: 23px;
margin: 10px 0;
font-weight: 500;
color: #2e2e2e;
}
.subTitleEng {
text-transform: uppercase;
text-align: center;
color: #ee72d8;
font-weight: 600;
font-size: 15px;
letter-spacing: 3px;
}
.b_wrap .business_list li a .img_wrap {
position: relative;
width: 100%;
height: 185px
}
.b_wrap .business_list li a .img_wrap img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
}
.b_wrap .busi_content_wrap .business_list .flip:first-child img {
width: 140px;
}
.b_wrap .business_list .flip {
box-sizing: border-box;
cursor: pointer;
width: calc(100% / 4 - 3%);
height: 350px;
position: relative;
margin: 0 1.5%;
}
.b_wrap .business_list .flip .flip-item {
backface-visibility: hidden;
background: #f6f6f6;
transition: 1s;
width: 100%;
height: 100%;
}
.b_wrap .business_list .flip .front {
position: absolute;
backface-visibility: hidden;
transition: 1s;
transform: rotateY(0deg);
}
.b_wrap .business_list .flip .front a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.b_wrap .business_list .flip .back {
transform: rotateY(-180deg);
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.b_wrap .business_list .flip:hover .front {
transform: rotateY(180deg);
}
.b_wrap .business_list .flip:hover .back {
transform: rotateY(0deg);
}
.b_wrap .busi_content_wrap .business_list .flip:first-child img {
width: 170px;
}
@media screen and (min-width: 1217px) and (max-width: 1720px){
.b_wrap{max-width: 1550px; margin: 0 auto;}
}
@media screen and (max-width: 940px){
body {max-width: 767px; overflow-x: hidden;}
.b_wrap .business_list .flip{height: 300px;}
.b_wrap{padding: 100px 0;}
.b_wrap .business_list{flex-wrap: wrap;}
.b_wrap .business_list .flip{width: calc(100% / 2 - 4%); margin: 2%;}
}
@media screen and (max-width: 767px){
.b_wrap{max-width: 100%; margin: 0 auto; height: auto; padding: 40px 0;}
.b_wrap .busi_content_wrap {padding: 60px 20px;}
}
@media screen and (max-width: 640px){
body {max-width: 640px; overflow-x: hidden;}
.b_wrap .business_list .flip{height: 300px;}
.b_wrap .business_list .flip{height: 250px;}
.b_wrap .business_list li a .img_wrap{height: 125px;}
.b_wrap .business_list li a .img_wrap img{width: 80px;}
.b_wrap .busi_content_wrap .business_list .flip:first-child img{width: 135px;}
.b_wrap .business_list li a .title{font-size: 20px; }
.subTitleEng{font-size: 13px;}
}
@media screen and (max-width: 430px){
.b_wrap .business_list li a .title{font-size: 20px;}
.subTitleEng{font-size: 14px;}
.b_wrap .business_list .flip{width: 100%; height: 250px;}
.b_wrap .busi_content_wrap .flip:first-child li img{width: 130px !important;}
}
</style>
</head>
<body>
<div class="b_wrap">
<div class="busi_content_wrap">
<ul class="business_list">
<div class="flip">
<li class="front flip-item">
<a href="">
<p class="title">앱(APP) 개발</p>
<p class="subTitleEng">android/ios app</p>
<div class="img_wrap">
<img src="../img/앱개발아이콘.png" alt="">
</div>
</a>
</li>
<div class="back flip-item">
<a href="" class="layoutImg"></a>
<img src="../img/앱개발.jpg" style="height: 100%; width: 100%;">
<div class="app-text">
Android 앱 개발<br>iOS 앱 개발<br>플랫폼 기획 및 설계
</div>
</div>
</div>
<div class="flip">
<li class="front flip-item">
<a href="">
<p class="title">웹(WEB) 구축</p>
<p class="subTitleEng">responsive web</p>
<div class="img_wrap">
<img src="../img/web.png" alt="">
</div>
</a>
</li>
<div class="back flip-item">
<a href=""></a>
<img src="../img/웹구축.jpg" style="height: 100%; width: 100%;">
<div class="app-text">
반응형 홈페이지 구축<br>데이터베이스 구축<br>빅데이터 구축
</div>
</div>
</div>
<div class="flip">
<li class="front flip-item">
<a href="">
<p class="title">AI 기반 기술개발</p>
<p class="subTitleEng">ai bigdata</p>
<div class="img_wrap">
<img src="../img/bigdata.png" alt="">
</div>
</a>
</li>
<div class="back flip-item">
<a href=""></a>
<img src="../img/AI기술개발.jpg" style="height: 100%; width: 100%;">
<div class="app-text">
AI 대화형 챗봇<br>자동 객체인식 검출기<br>딥러닝 학습 모델
</div>
</div>
</div>
<div class="flip">
<li class="front flip-item">
<a href="">
<p class="title">XR 콘텐츠 구현</p>
<p class="subTitleEng">metaverse</p>
<div class="img_wrap">
<img src="../img/metaverse.png" alt="">
</div>
</a>
</li>
<div class="back flip-item">
<a href=""></a>
<img src="../img/XR콘텐츠.jpg" style="height: 100%; width: 100%;">
<div class="app-text">
실감형 플랫폼 구축<br>가상현실 콘텐츠 제작<br>게임콘텐츠제작
</div>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>멘토링
평소 궁금했던 이야기들에 대한 어느정도 답을 들음
휴