<![CDATA[
<p><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default" target="_blank" class="ke-link">https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default</a></b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이미지가 포함된 3D 큐브상자 CSS 애니메이션 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!-- divinectorweb.com --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8">  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta http-equiv="X-UA-Compatible" content="IE=edge"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Responsive Image Gallery</title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    * { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>box-sizing: border-box; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #ecf4fb; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 80%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 50px auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: grid; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>grid-gap: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transition: 1s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.wrapper img:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: scale(0.9); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>     </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div class="wrapper"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <img src="img/1.jpg" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <img src="img/2.jpg" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <img src="img/3.jpg" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <img src="img/4.jpg" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <img src="img/5.jpg" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <img src="img/6.jpg" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <img src="img/7.jpg" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <img src="img/8.jpg" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>홈피주소  <a href="https://www.pinterest.co.kr/news_hub/5337219939900112059/?utm_campaign=HOMEFEED_NEW_PINS&utm_medium=2902&utm_source=67&e_t=TZgN3MHii%3A147&tracking_id=4036a5e8291b4023b1be4defe719626b&scoring_id=4036a5e8291b4023b1be4defe719626b&snapshot_id=71b4f0e9dd4143a7a56e05c3f03a2499" target="_blank" class="ke-link">https://www.pinterest.co.kr/news_hub/5337219939900112059/?utm_campaign=HOMEFEED_NEW_PINS&utm_medium=2902&utm_source=67&e_t=TZgN3MHii%3A147&tracking_id=4036a5e8291b4023b1be4defe719626b&scoring_id=4036a5e8291b4023b1be4defe719626b&snapshot_id=71b4f0e9dd4143a7a56e05c3f03a2499</a></b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="https://www.divinectorweb.com/" target="_blank" class="ke-link">https://www.divinectorweb.com/</a></b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이미지가 포함된 3D 큐브 상자 CSS 애니메이션 귀하의 웹사이트를 더 </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="https://www.divinectorweb.com/" target="_blank" class="ke-link">https://www.divinectorweb.com/</a></b></span></p>
<!-- -->
]]>
카페 게시글
♥☞HTML 코드방◈▶
이미지가 포함된 3D 큐브상자 CSS 애니메이션
gyun님
추천 0
조회 2
23.12.19 18:25
댓글 1
다음검색
첫댓글 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default