0721

1)학습한 내용

*section 부분 작성
-html

<section id="section">

    <div class="news">

    <div class="news_text">
        <h1>리소프트의 새로운 소식</h1>
        <h5>Resoft news</h5>
    </div>
    
    <div class="news_img">

        <div class="news_tag_img">

        <div class="news_tag1">
            <a href="#"><div class="news_tag1_img"><img src="../img/common/news@2x.png"></div><h2>Lorem ipsum dolor sit amet,<br> consetetur sadipscing elit...</h2><h3>2022.01.01</h3></a>
        </div>

        <div class="news_tag2">
            <a href="#"><div class="news_tag2_img"><img src="../img/common/news@2x.png"></div><h2>Lorem ipsum dolor sit amet,<br> consetetur sadipscing elit...</h2><h3>2022.01.01</h3></a>
        </div>

        <div class="news_tag3">
            <a href="#"><div class="news_tag3_img"><img src="../img/common/news@2x.png"></div><h2>Lorem ipsum dolor sit amet,<br> consetetur sadipscing elit...</h2><h3>2022.01.01</h3></a>
        </div>
        
        <div class="news_tag4">
            <a href="#"><div class="news_tag4_img"><img src="../img/common/news@2x.png"></div><h2>Lorem ipsum dolor sit amet,<br> consetetur sadipscing elit...</h2><h3>2022.01.01</h3></a>
        </div>
    </div>
    </div>
</div>

</section>

-css

#section{
    width: 100%;
    background-color: #ffffff;
    position: relative;

}
.news_text{
    position: absolute;
}
.news_text h1{
    font-size: 40px;
    margin-top: 80px;
    margin-left: 240px;
}

.news_text h5{
    margin-left: 240px;
    font-size: 18px;
    color: #C8C8C8;
}

.news_img{
    left: 240px;
    top: 200px;
    position: absolute;
    
}

.news_tag_img{
    display: flex;  
    flex-wrap: wrap;
}

.news_tag1, .news_tag2 ,.news_tag3{
    margin:30px 100px 0 0;
    padding-right:100px;
    border-right: medium solid #AAAAAA;
}

.news_tag1_img{
    overflow: hidden;
    border-radius: 14px;
}

.news_tag2_img{
    overflow: hidden;
    border-radius: 14px;
}

.news_tag3_img{
    overflow: hidden;
    border-radius: 14px;
}

.news_tag4_img{
    overflow: hidden;
    border-radius: 14px;
}

.news_tag4{
    margin:30px 100px 0 0;
}


.news_tag_img img{
    width: 300px;
    height: 200px;
    margin: 0 auto;
    transition: all 0.2s linear;
    opacity: 1;
}

.news_tag_img a:hover img{
    transform: scale(1.2)
    
}

.news_tag_img a h2{
    color: #1E1E1E;
    font-size: 18px;
}

.news_tag_img a:hover h2{
    color: blue;
}

.news_tag_img a h3{
    color: #AAAAAA;
    font-size: 16px;
    margin-top: 30px;
}

2)학습내용 중 어려웠던점

X

3)해결방법

X

4)학습소감

원본 없이 코드를 작성해나갈려니깐 생각보다 너무 힘들지만 하루 해야하는 양은 다끝낼수있어 뿌듯하다