0804

1)학습한 내용

*html작성

<!-- section4 -->
    <section id="section4">
        <div class="pat_text">
            <h1>특허 & 인증</h1><br>
            <h2>CERTIFICATION & PATENT</h2>
        </div>

        <div class="pat_img">
            <div class="pat_img1"><img src="../img/2page/bg_white.png"></div>
            <div class="pat_img2"><img src="../img/2page/certificate.png"></div>
            <div class="pat_img3"><img src="../img/2page/bg_white.png"></div>
            <div class="pat_img4"><img src="../img/2page/bg_white.png"></div>
            <div class="pat_img5"><img src="../img/2page/bg_white.png"></div>
            <div class="pat_img6"><img src="../img/2page/bg_white.png"></div>
            <div class="pat_img7"><img src="../img/2page/bg_white.png"></div>
            <div class="pat_img8"><img src="../img/2page/bg_white.png"></div>
            <div class="pat_img9"><img src="../img/2page/bg_white.png"></div>

    </section>

*css작성

/* section4 */
#section4{
    position: relative;
    width: 100%;
    height: 1454px;
    background-color: #F9F9F9;
}
.pat_text{
    position: absolute;
    left: 13%;
    top: 10%;
}

.pat_text h1{
    font-size: 40px;
}
.pat_text h2{
    font-size: 18px;
    color: #C8C8C8;
}

.pat_img{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    left: 8%;
    top: 20%;
    width: calc(100%/1.5);
    height: 1150px;
}
.pat_img1{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 10%;
    top: 0;
}
.pat_img1 img{
    max-width: initial;
    margin-left: -3%;
    margin-top: -9px;
}
.pat_img2{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 40%;
    top: 0;
}
.pat_img2 img{
    max-width: initial;
    margin-left: -44%;
    margin-top: -43px;
}
.pat_img3{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 70%;
    top: 0;
}
.pat_img3 img{
    max-width: initial;
    margin-left: -3%;
     margin-top: -9px;
}
.pat_img4{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 10%;
    top: 35%;
}
.pat_img4 img{
    max-width: initial;
    margin-left: -3%;
     margin-top: -9px;
}
.pat_img5{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 40%;
    top: 35%;
}
.pat_img5 img{
    max-width: initial;
    margin-left: -3%;
     margin-top: -9px;
}
.pat_img6{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 70%;
    top: 35%;
}
.pat_img6 img{
    max-width: initial;
    margin-left: -3%;
     margin-top: -9px;
}
.pat_img7{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 10%;
    top: 70%;
}
.pat_img7 img{
    max-width: initial;
    margin-left: -3%;
     margin-top: -9px;
}
.pat_img8{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 40%;
    top: 70%;
}
.pat_img8 img{
    max-width: initial;
    margin-left: -3%;
     margin-top: -9px;
}
.pat_img9{
    max-width: 220px;
    max-height: 310px;
    overflow: hidden;
    border: 1px solid #184B9F;
    position: absolute;
    left: 70%;
    top: 70%;
}
.pat_img9 img{
    max-width: initial;
    margin-left: -3%;
     margin-top: -9px;
}

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

X

3)해결방법

X

4)학습소감

이번 파트는 이미지를 원하는 규격에 맞게 짤라서 나열하면 되는파트라 어렵지않게 성공해낸거같다.