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

OOMJ·2022년 8월 5일

project 개발일지

PROJECT

목록 보기

24/34

2022-08-05

오늘 진행 사항

1) 오전 10시 스크럼 회의

2) 개별 작업 진행

3) 체크아웃 회의 후 종료

2) 개별 작업 진행

현재 1280px쪽 미디어 쿼리 진행중
여백, 패딩, 구조 조정중

/* 미디어 쿼리 1280 - PC */
@media (max-width: 1280px) {
    /* 메인 전체 */
    section {
        margin: 0 auto; 
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .main-title, .sub-title{
        text-align: center;
    }
    
    /* 헤더 */
    .main-header .header-wrap {
        width: 768px;
    }
    .main-header .header-text-wrap, .main-header .slick-button-wrap {
        margin-left: 0rem;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 768px;
    }

    .main-news-container {
        
    }
    .main-news-container .news-wrap {
        margin: 0 auto;
        width: 768px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: center;
    }
    .main-news-container .news-contents {
        width: 300px;
    }
    .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;
    }   

}

/* 미디어 쿼리 1024 - 태블릿  */
@media (max-width: 1024px) {

}

/* 미디어 쿼리 768 - 태블릿 */
@media (max-width: 768px) {

    .main-header .header-wrap {
        max-width: 600px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
    .main-news-container, .project, .service, .reference  {
        max-width: 600px;
        margin-left: 3rem;
        margin-right: 3rem;
    }
    /* 헤더 */
    /* 헤더 텍스트 */
    .main-header .head-box img{
        height: 700px;
    }
    .main-header .slick-header-wrap{
        height: 700px;  
    }
    .main-header .header-text-wrap {
        top:300px;
    }
    .main-header h1 {
        max-width: 400px;
        font-weight: 600;
        font-size: 2.2em;
        line-height: 3.2rem;
    }
    .main-header p {
        max-width: 530px;
        font-weight: 300;
        font-size: 1.1rem;
        line-height: 2rem;
        bottom: 250px;
    }
    /* 헤더 슬릭 버튼 */
    .main-header .slick-button-wrap {
        top: 580px;
    }
}

/* 미디어 쿼리 430 - 모바일*/
@media (max-width: 430px) {

}