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

오늘 진행 사항

1) 10시 스크럼 회의

2) 개별 작업 진행

3) 4:40 폼 제출

2) 개별 작업 진행

오늘은 스크럼 회의도 일찍 끝나고 특별한게 별로 없다

슬릭 슬라이더로 넘어가는 이미지 헤더 만들고 미디어쿼리 진행중

body {
    font-family: 'Noto Sans KR', sans-serif;
}
a {  text-decoration: none; }
/* 메인 전체 섹션 */
section {
    margin: 0 auto; 
    padding-top: 120px;
    padding-bottom: 120px;
}
.main-news-container, .project, .service, .reference  {
    max-width: 1440px;
    margin: 0 auto;
}
.main-title {
    font-size: 2rem;
    padding-bottom: 1rem;
}
.sub-title {
    color:#999999;
    font-weight: 500;
    margin-bottom: 3rem;
}
.sub-text {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.7rem;
}
/* 헤더 */
.main-header {
    margin: 0 auto;
    width: 1920px;
    height: 900px;
    background: url('./img/toco-img1/main-header1.png') no-repeat;

}

/* 새로운 소식 (뉴스) 섹션 */
.main-news-container {
    max-width: 1440px;
    height: 100%;
    margin-top: 5rem;
}
.main-news-container .news-wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
.main-news-container .news-contents {
    width: 300px;
    height: 316px;
}
.main-news-container .news-img-wrap {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    position:relative;
    overflow: hidden;
}
.main-news-container .news-img {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    position:relative;
    background: url('./img/toco-common/sample-img.png') no-repeat center / cover;
    transition: transform 0.25s ease-in-out;
    opacity:1;
}   
/* 새로운 소식 마우스 오버 */
.main-news-container .news-contents:hover .news-img {
    transform: scale(1.2);
    filter: brightness(50%); 
}
.main-news-container .news-contents:hover {
    cursor: pointer;
}
.main-news-container .news-text {
    /* border: solid 1px blue; */
    font-weight: 600;
    line-height:1.2rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main-news-container .news-date {
    color : #AAAAAA;
    font-weight: 200;
}
/* 프로젝트 섹션 */
.main-project-container {
    width: 100%;

    height: 100%; 
    background-color: #F9F9F9;
}
.main-project-container .project {
    background-color: #F9F9F9;
}
.main-project-container .main-title {
    text-align: right;
}
.main-project-container .sub-title {
    text-align: right;
}
.main-project-container .sub-text {
    text-align: right;
}
.main-project-container .project-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center; 
}
.main-project-container .project-left-wrap,.project-right-wrap {
    flex: 1;
}
/* 프로젝트 섹션 - 왼쪽 */
.main-project-container .project-left-wrap {
    width: 534px; /*임시*/
    height: 840px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;    
}
.main-project-container .project-img1{
    width: 534px;
    height: 393px;
    border-radius: 20px;
    overflow: hidden;
    opacity:1;
    position: relative;
    /* border: 1px solid red; */
}  
.main-project-container .text-show {
    position: absolute;
    bottom: 1.7rem;
    left: 1.7rem;
    color: white;
    line-height: 1.3rem;
    opacity: 0;
    /* display: none; */
    /* transition: opacity 0.25s ease; */
}
.main-project-container .text-show h3 {
    font-size: 1.3rem;
    line-height: 1.8rem;
}
 /* 프로젝트 마우스 오버 */
.main-project-container .moado, .ecoce {
    width: 534px;
    height: 393px;
    border-radius: 20px;
    position: relative;
    transition: transform 0.25s ease-in-out;
}
.main-project-container .moado {
    object-position: 5rem 1rem;
    background-image: url('./img/toco-img1/main-moaDo-back.svg');
}

.main-project-container .project-img1:hover .ecoce{
    transition: 0.25s;
    transform: scale(1.2);
    filter: brightness(50%);
 }
 .main-project-container .project-img1:hover .text-show {
    color: white;
    display: block;
    opacity: 1;
    cursor:alias ;
 }
.main-project-container .moado:hover {
    transform: scale(1.2);
    filter: brightness(50%);
 }
 .main-project-container .moado:hover +.text-show {
    color: white;
    opacity: 1;
 }
/* 프로젝트 섹션 - 오른쪽 */
.main-project-container .project-right-wrap{
    width: 534px; /*임시*/
    height: 840px;
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    align-content: flex-end;
}
.main-project-container .project-img2 {
    width: 680px; /*sample*/
    height: 680px;
}
/* 서비스 섹션 */
.main-service-container {
    width: 100%;
    height: 100%;
}
.main-service-container .service {
    display: flex;
}
/* 서비스 섹션 - 왼쪽 */
.main-service-container .service-left-wrap  {
    width: 50%;
    height: 100%;
}
.main-service-container .sub-text{
    margin-bottom: 3.5rem;
}
.main-service-container .service-img1 {
    width: 680px;
    height: 680px;
}
/* 서비스 섹션 - 오른쪽 */
.main-service-container .service-right-wrap{
    width: 50%;
    height: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    align-content: flex-start;
}
.main-service-container .service-img-wrap2 {
    margin-top: 150px;
}
.main-service-container .service-card {
    /* position: relative; */
    width: 300px;
    height: 375px;
    text-align: center;
    margin-bottom: 3rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: solid 1px #AAA;
}
.main-service-container .service-card:last-child{
    margin-bottom: 0rem;
} 
.main-service-container .service-card h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    line-height: 3.5rem;
}
.main-service-container .service-card p {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 300;
}
.main-service-container .service-card .card-hide p {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 3rem;
    /* background:  rgba(0,0,0,0.7); */
}
.main-service-container .card-show, .card-hide {
    /* display:none; */
    transition: transform 0.35s ease-in-out;
}
.main-service-container .card-hide {
    /* display:none; */
    opacity: 0;
    position: absolute;
    /* border: 1px solid yellow; */
    transform: translate(70px, 100px);
}
/* 서비스 섹션 - 카드 APP */
.main-service-container .APP {
    background: url('./img/toco-img1/main-card-APP.png');
    position: relative;
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
}
/* 서비스 섹션 - 카드 AI */
.main-service-container .AI {
    background: url('./img/toco-img1/main-card-AI.png');
    position: relative;
}    
/* 서비스 섹션 - 카드 WEB */
.main-service-container .WEB {
    background: url('./img/toco-img1/main-card-WEB.png');
    position: relative;
    display: flex;
    flex-direction: column;
}
/* 서비스 섹션 - 카드 XR */
.main-service-container .XR {
    background: url('./img/toco-img1/main-card-XR.png');
    position: relative;
}

/* 서비스 섹션 - 마우스 오버 간단 동작 */

/*-----------------------
서비스 섹션 - 카드 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;
}
----------- */

/* 레퍼런스 섹션 */
.main-reference-container {
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}
.main-reference-container .ref-logo-wrap {
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.main-reference-container .ref-logo{
    border: solid 1px #DBDBDB;
    background-color: #fff;
    width: 220px;
    height: 100px;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}   
/* 푸터 */
.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;
} 
.footer-text p{    
    color:#9e9e9e;
}      
.footer .copyright{
    color:#9E9E9E;
    font-weight:600;
}      
.footer-left,.footer-right{
    line-height:1.5rem;
    flex:1;
}

/* 미디어 쿼리 1280 */

어려운 점

엄슴

해결 방법

소감

요즘 생활패턴이 어긋나서 운동 끊고 작업 집중 시간을 만들어야겠다