Team project_02-12

news 영역 Html 및 테블릿 미디어 쿼리 수정

시안

<section class="resoft_news">
            <div class="section_wrap st-wrap">
                <div class="NewsTit_wrap Title_wrap">
                    <h2 class="main_title">리소프트의 새로운 소식</h2>
                    <p class="sub_title">RESOFT NEWS</p>
                </div>
                <div class="NewsCard_wrap margin50">
                    <div class="News_CardLists">
                        <div class="News_Cardlist">
                            <div class="NewsCard_img">
                                <img src="./img/new_01.png" alt="" srcset="">
                            </div>
                            <div class="NewsCard_txt">
                                <p>
                                    Lorem ipsum dolor sit amet <br/>
                                    consectetur adipisicing elit. 
                                    Sunt architecto!
                                </p>
                            </div>
                            <div class="NewsCard_date">
                                <p>2022.01.01</p>
                            </div>
                        </div>

                        <!-- boder 를 위한 div -->
                        <div class="boder_div"></div>

                        <div class="News_Cardlist">
                            <div class="NewsCard_img">
                                <img src="./img/new_01.png" alt="" srcset="">
                            </div>
                            <div class="NewsCard_txt">
                                <p>
                                    Lorem ipsum dolor sit amet <br/>
                                    consectetur adipisicing elit. 
                                    Sunt architecto!
                                </p>
                            </div>
                            <div class="NewsCard_date">
                                <p>2022.01.01</p>
                            </div>
                        </div>
                         
                        <!-- boder 를 위한 div -->
                        <div class="boder_div"></div>

                        <div class="News_Cardlist">
                            <div class="NewsCard_img">
                                <img src="./img/new_01.png" alt="" srcset="">
                            </div>
                            <div class="NewsCard_txt">
                                <p>
                                    Lorem ipsum dolor sit amet <br/>
                                    consectetur adipisicing elit. 
                                    Sunt architecto!
                                </p>
                            </div>
                            <div class="NewsCard_date">
                                <p>2022.01.01</p>
                            </div>
                        </div>

                        <!-- boder 를 위한 div -->
                        <div class="boder_div"></div>
                        
                        <div class="News_Cardlist">
                            <div class="NewsCard_img">
                                <img src="./img/new_01.png" alt="" srcset="">
                            </div>
                            <div class="NewsCard_txt">
                                <p>
                                    Lorem ipsum dolor sit amet <br/>
                                    consectetur adipisicing elit. 
                                    Sunt architecto!
                                </p>
                            </div>
                            <div class="NewsCard_date">
                                <p>2022.01.01</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

/* resoft news */
.resoft_news .News_CardLists{
    display: flex; justify-content: space-between;
}
.resoft_news .News_CardLists .News_Cardlist{
    max-width: 300px; 
}

.resoft_news .News_Cardlist .NewsCard_img{
    width: 300px; height: 200px; overflow: hidden;
    border-radius: 20px;
}

.resoft_news .News_Cardlist .NewsCard_img:hover img{
    transform: scale(1.2);
    transition: 1s;
    max-width: 300px;
    object-fit: cover;
    
}
.resoft_news .News_Cardlist .NewsCard_txt{
    font-size: 18px;
    font-weight: bold;
    color: var(--black-color-1E1E1E);
    height: 52px;
}
.resoft_news .News_Cardlist .NewsCard_txt > p{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

.resoft_news .News_Cardlist .NewsCard_date{
    color: var(--lightgray-color-C8C8C8);
    margin-top: 30px;
}
.boder_div{
    width: 2px;
    height: 300px;
    background-color: #f1f1f1;
}


/* resoft - news 반응형  */
/* 태블릿  */
@media (max-width : 1280px) {
    .resoft_news{
     max-width: 1000px;
     margin: 0 auto;
    }
    .News_CardLists{
     max-width: 800px;   
     flex-wrap: wrap;
     margin: 0 auto;
    }
    .News_Cardlist:nth-child(1),
    .News_Cardlist:nth-child(2)
    {
        margin-bottom: 50px;
    }
     .boder_div{
     display: none;
    }
 }
/* 모바일 */
@media (max-width : 768px) {
    .resoft_news{
        max-width: 704px;
        margin:0 auto ;
    }
    .NewsCard_List{
        flex-wrap: wrap;
        flex-basis: 50%;
        flex-grow: 0.5;
    }
    .boder_div{
        display: none;
    }
}

결과