[아임웹 코드] 이미지 블록 형식의 메뉴 구성하기

시연 동영상 보기

<div style="width: 90%; margin: 0 auto;">

<div class="wrapper">

  <!--각 a href 태그에 이동을 원하는 페이지의 url 주소를 입력하세요-->

  <div class="grid01">

    <a href="https://naver.com"><div class="item1"></div></a>

    <a href="https://naver.com"><div class="item2"></div></a>

    <a href="https://naver.com"><div class="item3"></div></a>

  </div>

  <div class="grid02">

    <div class="grid03">

      <a href="https://naver.com"><div class="item4"></div></a>

      <a href="https://naver.com"><div class="item5"></div></a>

    </div>

          <a href="https://naver.com"><div class="item6"></div></a>

    </div>

  </div>

</div>

<style>

  .wrapper{

    width:100%;

    display:flex;

    flex-wrap : wrap;

    grid-gap:20px;    

    margin-top:150px;

    margin-bottom:150px;

 margin-left: auto; /* 가운데 정렬을 위한 추가 */

    margin-right: auto; /* 가운데 정렬을 위한 추가 */

  }

  .grid01 {

    display:flex;

    grid-gap:20px;

  }

   .grid02 {

    display:flex;

    grid-gap:20px;

  }

   .grid03 {

    display:flex;

    flex-direction:column;

    grid-gap:20px;

  }

   <!--각 background-image:url 태그에 디자인한 메뉴 사이즈에 맞는 이미지를 추가하세요. 사이즈는 기존 이미지 참고-->

  .item1 {

    width:560px;

    height:320px;

    background-image:url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/fc1f66047b354.png');

    background-size:cover;

    transition: all 0.2s linear;

  }

  .item1:hover{

    transform: scale(1.05);

  }

    .item2 {

    width:240px;

    height:320px;

    background-image:url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/26457743ab114.png');

    background-size:cover;

    transition: all 0.2s linear;

  }

   .item2:hover{

    transform: scale(1.05);

  }

    .item3 {

    width:390px;

    height:320px;

    background-image:url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/0999717db2868.png');

    background-size:cover;

    transition: all 0.2s linear;

  }

   .item3:hover{

    transform: scale(1.05);

  }

    .item4 {

    width:500px;

    height:210px;

    background-image:url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/9d3a6d734a050.png');

    background-size:cover;

    transition: all 0.2s linear;

  }

    .item4:hover{

    transform: scale(1.05);

  }

    .item5 {

     width:500px;

    height:210px;

    background-image:url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/4f6336b980797.png');

    background-size:cover;

    transition: all 0.2s linear;

  }

   .item5:hover{

    transform: scale(1.05);

  }

    .item6 {

    width:710px;

    height:440px;

    background-image:url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/50a4289c921bb.png');

    background-size:cover;

    transition: all 0.2s linear;

  }

    .item6:hover{

    transform: scale(1.05);

  }

  <!--블록형 이미지 메뉴에 배경 이미지를 삽입하고 싶으시다면, 이 코드가 들어갈 섹션의 id값을 복사하여 위와 동일한 방법으로 수정해보세요 -->

#s20240503a970250004e4a {

background-image : url('https://cdn.imweb.me/upload/S20230302b384618453109/ea0647845e6a5.png');

  width:100%;

  background-size:cover;

}

<style>