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

오늘 진행 상황

1) 오전 10시에 스크럼 회의

각자 개발 진행 상황 공유, 당일 목표 공유, 어려운 점 공유 등... +스몰토크들

2) 오후 3시에 월말평가 진행

3) 오후 4:40분에 체크아웃 회의

4) 오후 7시 ~ 8시 / 9시 반~ 10시 반까지 팀원 A분이랑 1:1모임 활동

2) 오후 3시 월말평가

14/15점으로 마지막 문제는 명령어를 착각했었다.
대상을 오른쪽으로 가게 하려면 왼쪽에 마진을 줘야하는데...

아무래도 오픈북 시험이다보니 코드 직접 써가면서 다시 복습하게 된 것 같다.
긴가민가 했던 걸 다시 해보니 id>class>tag 우선수위도 재각인 했다 ㅎ_ㅎ;

4) 오후 7시 ~ 8시 / 9시 30분 ~ 10시 30분 1:1 모임 활동

이놈의 앱개발 마우스오버 이벤트가 생각보다 원하는 동작이 안되서 오늘까지 애먹고 있다가 조금의 빛을 봤다.

결국은 opacity:0; 과 opacity:1;에 애니메이션을 줘서 효과를 넣는 형식인데, display:none 으로 아예 화면에도 안잡히게 기능을 쓰려면 script 작성을 해야하는 것 같았다. JQuery를 이용해서도 써보려고 했으나 문법을 잘 모르겠어서 멘토링 시간에 물어볼까 싶다.

.service-card{
            position: relative;
        }
        .main-service-container .service-img2 {
            top:300px;
            width: 300px;
            height: 375px;
            margin-bottom: 3rem;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            transition: transform 0.25s ease-in-out;
            border: solid 1px #999999;
            z-index: 5;
            /* border: 1px solid blue; */
        }
        
        .main-service-container .APP {
            background: url('./img/toco-img1/main-card-APP.png')no-repeat;
            background-size: 300px 375px;
            /* border: 1px solid red; */
            position: relative;
            
        }
        .main-service-container .service-right-wrap .card-title {
            color: #fff;
            font-size: 2rem;
            font-weight: 500;
            line-height: 3.5rem;
        }
      
        .main-service-container .service-right-wrap #card-hide {
            position: absolute; z-index: 1;
        }
        .main-service-container .service-right-wrap .card-sub {
            color: #fff;
            font-size: 1.2rem;
            font-weight: 300;
        }
        .main-service-container .service-right-wrap .card-sub-hide {
            color: #fff;
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 3rem;
            /* background:  rgba(0,0,0,0.7); */
            opacity: 0;
            position: absolute;
            transform: translate(50%, 90%); 
        }

        .main-service-container .service-card :hover .card-sub-hide{
            transform: translate(0, 0); 
            transition:.3s;
            opacity: 1;
        }

        .main-service-container .service-card:hover .tran {
            transition:.3s;
            transform: translate(-20%, -100%);  
            opacity: 0;
        }

<!-- 서비스 섹션 -->
<section class="main-service-container">
  <div class="service-left-wrap">
  </div>
  <div class="service-right-wrap">
      <div class="service-img-wrap1">
          <div class="service-card">
              <div id="card-show" class="service-img2 "><h1 class="card-title tran">앱(APP) 개발</h1><p class="card-sub tran">ANDROID/IOS</p><div class="card-sub-hide"><p>Android 앱 개발</p><p>ios 앱 개발</p><p>플랫폼 기획 및 설계</p></div></div>
              <div id="card-hide" class="service-img2 APP" style="position: absolute;"></div>
          </div>

      </div>
  </div>
</section>

---

### 어려운 점

1. 마우스 오버 시 숨겨져 있던 글자가 애니메이션 효과를 받아 나오는 부분

### 해결 방법

1. 

transition:.3s;
transform: translate(-20%, -100%);
opacity: 0;

로 카드 밖에 글자를 좌표설정 해두고 올라오는 효과로 만들었으나,
더 좋은 방법이 있지 않을까 생각중

### 소감

애니메이션 하나 넣는 것에 이틀을 쓸 줄은 몰랐다.
css가 아니라 script / jQuery로 주려니, 수업할 때 너무 빨리빨리 넘어갔던 부분이라 공부가 덜 됐구나 싶다. 페이지 만들면서 다시 복습을 해봐야겠다