팀프로젝트01-8

연가을·2022년 7월 13일

flip-card

첫번째 팀프로젝트 제출 전 마지막 멘토링이 진행 되었다.
멘토링을 진행하기 전에 각자 다른 팀원이 한 작업물을 보고 기능테스트를 진행하였다.
발견한 문제점
1. 플립 기능

마우스 오버시 두세번 돌아감

멘토링 진행 결과

1.플립

마우스 오버시 계속 돌아가는 오류.
해결방안 : 남은 기간동안 html문서부터 다시 구조 잡고 스타일 넣은 후 기능 구현

슬라이더

브라우져 크기가 아니닌 적용된 div 기준으로 중단점이 되고 있는지 확인작업 필요

3.프론트엔드 개발자로 가기위한 방향성
웹 VS 앱 분야의 전망 및 비전

가장 수요가많은 부분 웹
웹사이트를 만드는 수요가 많음
웹을 가장 우선순위로 두는 경우가 많음
앞으로도 좀 더 많을 것 같음.
본인이 하기에 재미있는것 중요!
테스트 문서로 기록을 해두는 것이 좋음 다른 프로젝트를 위해

다음주 멘토링 : 이번에 한 프로젝트 전체 코드 리뷰 !

다음 프로젝트시 작업 순서에 대한 조언

1)공통된 클래스 작업

2)테스트문서는 초반에 작성

3)개발을 하면서 테스트

멘토링 후 수행작업

Flip card html 구조부터 새로 작성

html

<!DOCTYPE html>
<html lang="en">
<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>flip_gaeul</title>
    <link rel="stylesheet" href="../css/filp_gaeul.css">
</head>
<body>
    <div class="busi_wrap">
        <div class="busi_content">
            <div class="flip_cards_list">
                <div class="flip_card">
                    <div class="cards">
                        <div class="card_front flip_item"> 
                            <p class="title">앱(APP) 개발</p>
                            <p class="subTitleEng">android/ios app</p>
                            <div class="img_wrap">
                                <!-- <img src="/public/user/main/구글스토어.png" alt="구글스토어" class= />
                                <img src="/public/user/main/앱스토어.png" alt="앱스토어" /> -->
                                <img src="../img/앱개발아이콘.png" alt="">
                            </div>
                        </div>
                        <div class="card_back flip_item">
                            <div class="img_wrap">
                                <img src="../img/앱개발.jpg">
                            </div>
                            <div class="app-text">
                                Android 앱 개발 
                                <br>iOS 앱 개발 
                                <br>플랫폼 기획 및 설계
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flip_card">
                    <div class="cards">
                        <div class="card_front flip_item"> 
                            <p class="title">앱(APP) 개발</p>
                            <p class="subTitleEng">android/ios app</p>
                            <div class="img_wrap">
                                <!-- <img src="/public/user/main/구글스토어.png" alt="구글스토어" class= />
                                <img src="/public/user/main/앱스토어.png" alt="앱스토어" /> -->
                                <img src="../img/앱개발아이콘.png" alt="">
                            </div>
                        </div>
                        <div class="card_back flip_item">
                            <div class="img_wrap">
                                <img src="../img/앱개발.jpg">
                            </div>
                            <div class="app-text">
                                Android 앱 개발 
                                <br>iOS 앱 개발 
                                <br>플랫폼 기획 및 설계
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flip_card">
                    <div class="cards">
                        <div class="card_front flip_item"> 
                            <p class="title">앱(APP) 개발</p>
                            <p class="subTitleEng">android/ios app</p>
                            <div class="img_wrap">
                                <!-- <img src="/public/user/main/구글스토어.png" alt="구글스토어" class= />
                                <img src="/public/user/main/앱스토어.png" alt="앱스토어" /> -->
                                <img src="../img/앱개발아이콘.png" alt="">
                            </div>
                        </div>
                        <div class="card_back flip_item">
                            <div class="img_wrap">
                                <img src="../img/앱개발.jpg">
                            </div>
                            <div class="app-text">
                                Android 앱 개발 
                                <br>iOS 앱 개발 
                                <br>플랫폼 기획 및 설계
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flip_card">
                    <div class="cards">
                        <div class="card_front flip_item"> 
                            <p class="title">앱(APP) 개발</p>
                            <p class="subTitleEng">android/ios app</p>
                            <div class="img_wrap">
                                <!-- <img src="/public/user/main/구글스토어.png" alt="구글스토어" class= />
                                <img src="/public/user/main/앱스토어.png" alt="앱스토어" /> -->
                                <img src="../img/앱개발아이콘.png" alt="">
                            </div>
                        </div>
                        <div class="card_back flip_item">
                            <div class="img_wrap">
                                <img src="../img/앱개발.jpg">
                            </div>
                            <div class="app-text">
                                Android 앱 개발 
                                <br>iOS 앱 개발 
                                <br>플랫폼 기획 및 설계
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
    </div>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
}
.subTitleEng {
    text-transform: uppercase;
    text-align: center;
    color: var(--pink-color);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 3px;
}
/* flip css */
.busi_wrap{
    padding: 200px 0;
    overflow: hidden;
}
.busi_wrap .busi_content{
    max-width: 1400px;
    margin: 0 auto;
}
.busi_wrap .flip_cards_list{
    width: 100%;
    display: flex;
    perspective: 1000px; 
}
.busi_wrap .flip_card{
    box-sizing: border-box;
    cursor: pointer;
    width: calc(100% / 4 - 3%);
    height: 350px;
    position: relative;
    margin: 0 10px ;
}
.cards {
    width: 100%;
    height: 100%;
    transform: rotateY(0deg);
    transition:.5s;
    transform-style: preserve-3d;   
}
.card_front, .card_back{
    position: absolute;
    backface-visibility: hidden;
}
.card_back{
    transform: rotateY(180deg);
}
.flip_card:hover .cards{
    transform: rotateY(-180deg);
}
.flip_item {
    backface-visibility: hidden;
    background: #f6f6f6;
    transition: 1s;
    width: 100%;
    height: 100%;
}

/* front 스타일 css */
.busi_wrap .card_front{
    /* background: #f6f6f6;
    width: 100%;
    height: 100%; */
    display: flex;
    flex-direction: column;
    text-align: center;
}
.busi_wrap .card_front .title {
    font-size: 23px;
    margin: 10px 0;
    font-weight: 500;
    color: #2e2e2e;
}
.busi_wrap .card_front .img_wrap {
    position: relative;
    width: 100%;
    height: 185px;
}
.busi_wrap .card_front .img_wrap img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* back 스타일 css */
.busi_wrap .card_back{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
}
.card_back .img_wrap{
    width: 100%;
    height: 100%;
}
.card_back .img_wrap img{
    width: 100%;
    height: 100%;
}
.app-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-family: 'ypseo';
    text-align: center;
    color: #ffffff;
    /* font-weight: 600; */
}


/* media query */
@media screen and (min-width: 1217px) and (max-width: 1720px){
    .busi_wrap {
        max-width: 1550px;
        margin: 0 auto;
        }
}
@media screen and (max-width: 940px){
    .busi_wrap .flip_cards_list{
        flex-wrap: wrap;
    }
    .busi_wrap .flip_card{
        width: calc(100% / 2 - 4%);
        margin: 2%;
    }
    .busi_wrap .flip_card .cards{
        height: 300px;
    }

}
@media screen and (max-width: 767px){
    .busi_wrap {
        max-width: 100%;
        margin: 0 auto;
        height: auto;
        padding: 40px 0;
    }

}

@media screen and (max-width: 430px){
    .busi_wrap .flip_card{
        width: 100%;
        height: 250px;
        margin: 8%;
    }

}

연가을

이전 포스트

팀프로젝트01-7

다음 포스트