*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%);
}
X
X
이미지 박스하는부분은 전 프로젝트에서 한번해봐서 무난하게 끝낸거같다.