[개발 일지 58일차] toco 프로젝트2 - 사이트 리뉴얼(9)

MSJ·2022년 7월 28일

project 개발일지

PROJECT

목록 보기

18/34

2022-07-28

오늘 진행 상황

1) 10시 멘토링 진행

작업 진행 상황 설명, 모르는/막히는 부분 질문 등... 공유

2) 개별 작업 + 모임 진행 2~3시간

나가실 분들은 나가고 나, ㅁㅎ님, ㅇㅈ님, ㅈㅁ님이 남아서 모임을 2~3시간 정도 더 진행함.

3) 개별 작업 계속 진행

4) 4:40분 체크아웃 회의

폼 제출 같이 하면서 오늘 개별로 작업했던거 더 언급해주실 분은 해주시거나 진행 상황 말해주시거나... 자유롭게 더 이야기하는 시간

1) 멘토링 진행

멘토님이 알려주신 사이트

script로 마우스오버 / 마우스아웃 이벤트 처리
jquery css 함수 사용법

아래는 ㅈㅁ님이 찾아와주신 정리글

제이쿼리 선택자 완벽정리

2) 개별 작업 모임 진행

문제의 그 카드 애니메이션.
마우스 오버를 했는데 왼쪽 위, 아래로 텍스트가 전환되는 효과.
어제는 어떻게든 css까지는 그럴듯하게 만들었으나...
문제1. 마우스 올리면 입력 커서가 생기고 문제2.마우스가 떨어졌을 때 애니메이션 효과 없이 땋 하고 떨어지는 등 깔끔하지 못함.

글로는 도저히 설명이 안될 것 같아 GIF 프로그램을 이용했다.

이렇게 html이 동일하게 주어져 있는 상황에서

<section class="main-service-container">
    <div class="service">
        <div class="service-left-wrap">
            <h1 class="main-title">서비스</h1>
            <p class="sub-title">SERVICE</p>
            <p class="sub-text">다양한 기술플랫폼을 제공하여 가능성을 열어주고<br>의미있는 성공으로 인도하는 서비스를 제공합니다.</p>
            <div class="service-img1">
                <!-- code -->
                <lottie-player src="./img/toco-img1/json-talking.json" background="transparent" speed="1" style="width: 680px; height: 680px;" loop autoplay></lottie-player>
            </div>
        </div>
        <div class="service-right-wrap">
            <div class="service-img-wrap1">
                <div class="APP service-card">
                    <div class="card-show"><h1>앱(APP) 개발</h1><p>ANDROID/IOS</p></div>
                    <div class="card-hide"><p>Android 앱 개발</p><p>ios 앱 개발</p><p>플랫폼 기획 및 설계</p></div>
                </div>
                <div class="AI service-card">
                    <div class="card-show "><h1>AI 기반 기술개발</h1><p>AI BIGDATA</p></div>
                    <div class="card-hide"><p>AI 대화형 챗봇</p><p>자동 객체인식 검출기</p><p>딥러닝 학습 모델</p></div>
                </div>
            </div>
            <div class="service-img-wrap2">
                <div class="WEB service-card">
                    <div class="card-show "><h1>웹(WEB) 구축</h1><p>RESPONSIVE WEB</p></div>
                    <div class="card-hide"><p>반응형 홈페이지 구축</p><p>데이터베이스 구축</p><p>빅데이터 구축</p></div>
                </div>
                <div class="XR service-card">
                    <div class="card-show "><h1>XR 콘텐츠 구현</h1><p>META</p></div>
                    <div class="card-hide"><p>실감형 플랫폼 구축</p><p>가상현실 콘텐츠 제작</p><p>게임콘텐츠 제작</p></div>
                </div>
            </div>
        </div>
    </div>
    </section>

1. CSS : hover 로 만든 애니메이션

		/*서비스 섹션 - 카드 APP: 마우스 오버*/
        .main-service-container .APP:hover .card-show{
           transform: translate(-70px, -100px);
           transition: 0.35s;
           opacity: 0;
        }
        .main-service-container .APP:hover .card-hide{
            transform: translate(0, 0);
            transition: 0.35s;
            opacity: 1;
        }
       /* 서비스 섹션 - 카드 AI: 마우스 오버*/
        .main-service-container .AI:hover {
            transition: 0.35s;
        }
        .main-service-container .AI:hover .card-show{
           transform: translate(-70px, -100px);
           transition: 0.35s;
           opacity: 0;
        }
        .main-service-container .AI:hover .card-hide{
            transform: translate(0, 0);
            transition: 0.35s;
            opacity: 1;
        }
        
        /*서비스 섹션 - 카드 WEB: 마우스 오버*/
        .main-service-container .WEB:hover .card-show{
           transform: translate(-70px, -100px);
           transition: 0.35s;
           opacity: 0;
        }
        .main-service-container .WEB:hover .card-hide{
            transform: translate(0, 0);
            transition: 0.35s;
            opacity: 1;
        }
        /*서비스 섹션 - 카드 XR: 마우스 오버*/
        .main-service-container .XR:hover .card-show{
           transform: translate(-70px, -100px);
           transition: 0.35s;
           opacity: 0;
        }
        .main-service-container .XR:hover .card-hide{
            transform: translate(0, 0);
            transition: 0.35s;
            opacity: 1;
        }

2. script로 만든 애니메이션

script로 mouseover과 mouseout을 구분해놓은 채 효과를 입력해놓은 것이 훨씬 부드럽게 구현되는 것을 볼 수 있다.

이 스크립트를 작성하는 걸 감사하게도 남은 팀원끼리 모여서 도와주셨다. 물론 처음엔 상단 네이게이션 바에 대해 서로 얘기하느라 시간을 가졌던거지만.

 $(document).ready(function(){
            $(".APP").on({
                "mouseover":function(){
                    $(".APP>.card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'});
                    $(".APP>.card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'})
                },
                "mouseout":function(){
                    $(".APP>.card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'});
                    $(".APP>.card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'})
                }
            });

            $(".AI").on({
                "mouseover":function(){
                    $(".AI>.card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s','pointer-events' : 'none'});
                    $(".AI>.card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s', 'cursor':'default','pointer-events' : 'none'})
                },
                "mouseout":function(){
                    $(".AI>.card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events' : 'none'});
                    $(".AI>.card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events' : 'none'})
                }
            });

            $(".WEB").on({
                "mouseover":function(){
                    $(".WEB>.card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events' : 'none'});
                    $(".WEB>.card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s','pointer-events' : 'none'})
                },
                "mouseout":function(){
                    $(".WEB>.card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events' : 'none'});
                    $(".WEB>.card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s','pointer-events' : 'none'})
                }
            });

            $(".XR").on({
                "mouseover":function(){
                    $(".XR>.card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s','pointer-events' : 'none'});
                    $(".XR>.card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s','pointer-events' : 'none'})
                },
                "mouseout":function(){
                    $(".XR>.card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s','pointer-events' : 'none'});
                    $(".XR>.card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s','pointer-events' : 'none'})
                }
            });
        });

4) 4:40분 체크아웃 회의 및 프리토킹

4:40분은 늘 체크아웃 폼 제출하면서 서로 진행 사항 가볍게 말로 공유하거나 다음 일정이나 공지사항 등을 살펴보거나 하면서 얘기를 나눈다.

오늘은 제민님이 스크립트 코드를 더 간단히 입력할 수 있는 내용을 서치하다 찾으셔서(!!!!) 바로 공유 받았다.

그 말인 즉슨, 위에서 저렇게 길었던 스크립트 코드를, 객체 부모 자식 셀레턱의 관계 DOM을 이용한 구조로 간단하게 줄일 수 있었던 것이다. 중복된 코드를 줄일 수 있을 것 같은데 어떻게 줄여야할까 ~ 싶었던 것이 이렇게 부모 셀렉터에서 .children 설정으로 코드를 확줄였다... wow.

 $(document).ready(function(){
            $(".service-card").on({
                "mouseover":function(){
                    $(this).children("card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'});
                    $(this).children("card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'})
                },
                "mouseout":function(){
                    $(this).children("card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'});
                    $(this).children("card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'})
                }
            });
        });

어려운 점

어제 어려웠던, 애니메이션을 css말고 js나 jQuery로 구현할 수 없을까?

해결 방법

jQuery 내에 CSS 기능이 쓰이긴 하지만 어디까지나 디자인적인 부분으로, 구조를 짜서 jQuery 작성을 통해 해결.

 $(document).ready(function(){
            $(".service-card").on({
                "mouseover":function(){
                    $(this).children("card-show").css({'transform':'translate(-70px, -100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'});
                    $(this).children("card-hide").css({'transform':'translate(0, 0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'})
                },
                "mouseout":function(){
                    $(this).children("card-show").css({'transform':'translate(0,0)', 'opacity':'1', 'transition':'0.35s', 'pointer-events':'none'});
                    $(this).children("card-hide").css({'transform':'translate(70px, 100px)', 'opacity':'0', 'transition':'0.35s', 'pointer-events':'none'})
                }
            });
        });

내가 구조를 아래와 같이 짜놨기 때문에 service-card 의 관계와 card-show / card-hide 관계를 이용해도 반복적으로 쓸 수 있는 것이다

<div class="service-card">
	<div class="APP">
		<div class="card-show"></div>
		<div class="card-hdie"></div>
    </div>
</div>

<div class="service-card">
	<div class="AI">
		<div class="card-show"></div>
		<div class="card-hdie"></div>
    </div>
</div>

<div class="service-card">
	<div class="WEB">
		<div class="card-show"></div>
		<div class="card-hdie"></div>
    </div>
</div>

<div class="service-card">
	<div class="XR">
		<div class="card-show"></div>
		<div class="card-hdie"></div>
    </div>
</div>

소감

js나 jquery는 아무것도 모른 채로 쓰면 힘든데, 하나 작동을 하고 나서부터는 감도 잡히고 뭔가 할 만하단 생각이 들고... 편하다는 생각이 든다. 객체를 지정해 효과를 주니까 한 이벤트가 발생했을 때 원하는 객체에 개별로 이벤트를 줄 수 있는 것도 편한 것 같다.