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

2022-08-10

1) 오전10시 스크럼 회의

2) 남은 팀원끼리 추가 회의

3) 체크아웃 회의

---

1) 스크럼 회의

각자 진행 사항 보고..
미디어 쿼리는 한분 빼고 대부분 완성한 상태다

2) 남은 팀원끼리 추가 회의

1. 아무래도 디자인을 안배우신 분들은 화면 배치를 규칙적이고 틀에 맞춰야 정리되어 보인다는 걸 잘 모르는 듯 하다.
   팀원분 페이지 화면 조정을 조금 도와드렸고

2. 공통적으로 쓰는 푸터 미디어 쿼리를 추가로 작업했다.

/* 푸터 */
.common-footer{
    width:100%;
    height: 250px;
    background: #E9E9E9;    
    display: table;
}
.footer-wrap { 
    display: table-cell;
    vertical-align:middle;
}
.footer-logo {
    margin: 0 auto;
    max-width: 1440px;
}
.footer-text{ 
    margin: 0 auto;
    max-width: 1440px;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 2vw;
    color:#9E9E9E;
}      
.copyright{
    color:#9E9E9E;
    font-weight:600;
}      
.footer-left,.footer-right{
    line-height:1.5rem;
    flex:1;
}

/* 미디어 쿼리 1440 - PC ---------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
   /* 푸터 */
    .footer-logo, .footer-text{
        margin-left: 3rem;
    }
}

/* 미디어 쿼리 1280 - PC ---------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
    /* 푸터 */
    .footer-logo, .footer-text{
        margin-left: 3rem;
        margin-right: 3rem;
    }
}
/* 미디어 쿼리 768 - 태블릿 ---------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) { /* 푸터 */
    .common-footer .footer-logo img {
        /* margin-top: ; */
        max-width : 128px;
    }
    .common-footer .copyright {
        font-size: 13px;
        color: #9E9E9E;
    }
    .common-footer .footer-left, .common-footer .footer-right {
        font-size: 14px;
        line-height: 18px;
    }
    .common-footer .footer-text{ 
        max-width: 768px;
        margin-top: 3vw;
        flex-direction: column;
        justify-content: space-between;
    } 
}

/* 미디어 쿼리 430 - 모바일---------------------------------------------------------------------------------------------*/
 /* 푸터 */
    .common-footer .footer-logo{
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .common-footer .footer-logo img {
    /* margin-top: ; */
    max-width : 100px;
    padding-top: 2vw;
    }
    .common-footer .copyright {
        font-size: 10px;
        word-break: keep-all;
    }
    .common-footer .footer-logo span {
        line-height: 26px;
        display: block;
    }
    .common-footer .footer-left, .common-footer .footer-right {
        font-size: 12px;
        line-height: 16px;
    }
    .common-footer .footer-text{ 
        max-width: 768px;
        margin-top: 3vw;
        gap:2vw;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 2rem;
        margin-right: 2rem;
        word-break:break-all;
    } 
    .common-footer .footer-text span{
        display: block;
    }
}

3. 개별 페이지 미세조정 조금씩 건드렸다
   그고 팀원분이랑 여백도 일정하게 맞췄다

---

다음 해야할 것

1) 네비바 미디어쿼리 시 햄버거만 보임
2) 네비바 화면 조절
3) 스크립트 일시정지버튼 기능
4) 딜레이 애니메이션 넣기

---

어려운 점

1. 슬릭 슬라이더에 일시정지를 넣어야 한다

해결 방법

1. 찾아보는 중.

소감

구조화를 잘 해놔서 뿌듯하다. 수정사항이 있을 때 손이 덜 간다.