0727

벨로그용·2022년 7월 27일
0

ai스쿨

목록 보기
43/60

1)학습한 내용

*html작성

<section id="section4">

    <div class="box">

    <div class="box_text">
        <h1>레페런스</h1><br><h3>REFERENCE</h3>
    </div>

    <div class="ico_box">
        
        <div class="ico_wrap">
            <img src="../img/1page/logo_daegukeonchook.png">
        </div>
        
        <div class="ico_wrap">
            <img src="../img/1page/logo_daegu.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_maeil.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_knu.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_daegumbc.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_daegusports.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_dcu.png">
        </div>
        
        <div class="ico_wrap">
            <img src="../img/1page/logo_songpa.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_kookhim.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_lionsclubs.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_hankookjungi.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_baremi.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_kmou.png">
        </div>
        
        <div class="ico_wrap">
            <img src="../img/1page/logo_daegusanggong.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_cak.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_jci.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_kmu.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_mmu.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_daegugongup.png">
        </div>
        
        <div class="ico_wrap">
            <img src="../img/1page/logo_daekyungict.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_koreamasterchef.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_kibwa.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_ksca.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_daegusinyong.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_dalseo.png">
        </div>
        
        <div class="ico_wrap">
            <img src="../img/1page/logo_dip.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_lotary.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_soosung.png">
        </div>

        <div class="ico_wrap">
            <img src="../img/1page/logo_tbn.png">
        </div>

    </div>
</div>

</section>

*css작성

#section4{
    width: 100%;
    height: 1000px;
    background-color: #FFFFFF;
}

.box{
    position: relative;
    top: 100px;
    height: 734px;
}
.box_text{
    position: absolute;
    left: 13%;
}
.box_text h1{
    text-align: left;
    font-size: 40px;
}
.box_text h3{
    text-align: left;
    color: #C8C8C8;
    font-size: 18px;
}

.ico_box>.ico_wrap{
    width: 220px;
    height: 100px;
    margin: 9px;
}
.ico_box{
    position: absolute;
    top: 7%;
    left: 13%;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    border-top: medium solid black;
    margin: 70px auto;
    width: calc(100% / 1.3);
}

.ico_wrap{
    position: relative;
    border: 3px solid #DBDBDB ;
    margin: 0;
}

.ico_wrap img{
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    background-color: #FFFFFF;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

X

3)해결방법

X

4)학습소감

이미지 박스하는부분은 전 프로젝트에서 한번해봐서 무난하게 끝낸거같다.

profile
안녕하세요

0개의 댓글