1)학습내용

<!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">
    <link rel="stylesheet" href="./style.css">
    <title>Card</title>
</head>
<body>
    <div class="b_wrap">
        <div class="content_wrap">
            <ul class="business_list">
                <div class="flip_box">
                    <div class="flip">
                        <div class="center_wrap">
                            <li class="front flip-item">
                                <a href="#">
                                    <p class="title">앱(APP) 개발</p>
                                    <p class="subtitle">ANDOID/IOS APP</p>
                                    <div class="img_wrap">
                                        <img src="./img/앱개발아이콘.png">
                                    </div>
                                </a>
                            </li>
                        </div>
                        <div class="back flip-item">
                            <a href="#" id="test" onclick="preventClick(event)" class="layoutImg"></a>
                            <img src="./img/앱개발.jpg" style="height: 350px; width:100%">
                            <div class="app-text">
                                Android 앱 개발<br>
                                iso 앱 개발<br>
                                플랫폼 기획 및 설계
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flip_box">
                    <div class="flip">
                        <div class="center_wrap">
                            <li class="front flip-item">
                                <a href="#">
                                    <p class="title">웹(WEB) 구축</p>
                                    <p class="subtitle">REPONSIVE WEB</p>
                                    <div class="img_wrap">
                                        <img src="./img/web.png" >
                                    </div>
                                </a>
                            </li>
                        </div>
                        <div class="back flip-item">
                            <a href="#" id="test" onclick="preventClick(event)" class="layoutImg"></a>
                            <img src="./img/웹구축.jpg" style="height: 350px; width:100%">
                            <div class="app-text">
                                반응형 홈페이지 구축 <br>
                                데이터베이스 구축 <br>
                                빅데이터 구축
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flip_box">
                    <div class="flip">
                        <div class="center_wrap">
                            <li class="front flip-item">
                                <a href="#">
                                    <p class="title">AI 기반 기술개발</p>
                                    <p class="subtitle">AI BIGDATA</p>
                                    <div class="img_wrap">
                                        <img src="./img/bigdata.png">
                                    </div>
                                </a>
                            </li>
                        </div>
                        <div class="back flip-item">
                            <a href="#" id="test" onclick="preventClick(event)" class="layoutImg"></a>
                            <img src="./img/AI기술개발.jpg" style="height: 350px; width:100%">
                            <div class="app-text">
                                AI 대화형 챗봇<br>
                                자동 객체인식 검출기<br>
                                딥러닝 학습 모델
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flip_box">
                    <div class="flip">
                        <div class="center_wrap">
                            <li class="front flip-item">
                                <a href="#">
                                    <p class="title">XR 콘텐츠 구현</p>
                                    <p class="subtitle">METAVERSE</p>
                                    <div class="img_wrap">
                                        <img src="./img/metaverse.png">
                                    </div>
                                </a>
                            </li>
                        </div>
                        <div class="back flip-item">
                            <a href="#" id="test" onclick="preventClick(event)" class="layoutImg"></a>
                            <img src="./img/XR콘텐츠.jpg" style="height: 350px; width:100%">
                            <div class="app-text">
                                실감형 플랫폼 구축<br>
                                가상현실 콘텐츠 제작<br>
                                게임콘텐츠 제작
                            </div>
                        </div>
                    </div>
                </div>
            </ul>
        </div>
    </div>
</body>
</html>
  
    

    

CSS

a{
    text-decoration: none;
    color: #000;
}

*{

    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    
    vertical-align: baseline;
  }
  

  body {
    line-height: 1;
  }
  ul {
    list-style: none;
 
  }
 
.b_wrap {
    width: 100%;
    padding: 200px 0;
    overflow: hidden;
}

.business_list {
    width: 100%;
    cursor: pointer;
}

.title, .subtitle {
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
    white-space: nowrap;
    text-align: center;
    padding-left: 5px;
    
    
}

.title {    
    color: black;
    font-size: 23px;
    margin: 10px 0;
    letter-spacing: -1.5px;
    padding-top: 50px;    
}

.subtitle {
    color: pink;
    font-size: 15px;
    letter-spacing: 1.5px;
    
}



.img_wrap img {
    width: 100px;
    padding-top: 20%;
    
}

.img_wrap:first-child img {
    width: 130px;
}



.flip_box {
    display: inline;
    perspective: 1000rem;
}

.flip {
    display: inline-block;
    box-sizing: border-box;
    background-color: rgb(184, 179, 179);
    width: calc(100% / 4 - 3%);
    height: 350px;
    position: relative;
    
    margin: 0 0.5%;
    max-width: 300px;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: 2s;
    text-align: center;
    
}

.front a {
   
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
        
}

.flip_item {
    width: 100%;
    height: 100%;
    visibility: visible;
}

.front, .back {
    position: absolute;
    backface-visibility: hidden;
}

.front{
    transform: rotateY(0deg);
}

.back{
    transform: rotateY(180deg);
}

.flip_box:hover .flip{
    transform: rotateY(-180deg); 
    /* y축을 기준으로 180도 회전 */
}

.layoutImg img {
    position: relative;
    background-size: cover;
}

.app-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;    
    transform: translate(-50%, -50%);
    font-size: 20px;
    
    text-align: center;
    color: white;
    font-weight: 600;
    line-height: 1.8;
}

.center_wrap {
    position: relative;
} 

2)어려웠던점

박스안에 가운데 정렬이안됨..

3)해결방법

4)소감

html 를 2달만에 다시해보는거같은데 ytranslate를 할때 약간 힘들었지만 열심해 해보았는데 아직미흡한점이 많아보인다..