자바스크립트 화면 축소시 자동으로 세로로 배열 관련 채택완료
출처 : https://sir.kr/g5_tip/18168#c_18224
기존에 도움주신 비타주리님 감사합니다.
해당 방식을 사용했습니다.
그러나 pc버전일 경우 설정한 숫자만큼 가로로 배열 됩니다.
다만 모바일이나 화면이 축소시 이미지가 그대로 가로로 배열되어서 크기가 매우 작게 변합니다.
이것을 자동으로 세로로 사이즈에 맞게 배열 되게 할수 있는 방법이 있을까요.
이미지는 가로 300 x 세로 100 사용 합니다.
출처 : https://sir.kr/g5_tip/18168#c_18224
Copy
<div id=imgDiv></div>
<script>
totalWidth = "100%"; // 전체 가로사이즈(px 이나 %)
xAlign = "center"; // "left" / "center" / "right"
xCut = 5; // 한줄에 위치하는 이미지숫자
gapPixel = 7; // 이미지간격 픽셀
imgRadius = "20px"; // 테두리라운드(px 이나 %)
linkTarget = "_blank" // "_self" / "_blank"
randomMode = 1; // 1은 랜덤, 0은 순번
imgLink_1 = ["https://blog.kakaocdn.net/dn/cMVe4H/btq5RuQIRfF/DkSPyZQhLMVpy26P86Sp40/img.jpg", "https://sir.kr/"];
imgLink_2 = ["https://blog.kakaocdn.net/dn/nU4Lk/btq5TtDAlDl/cGLKyjuxsDOHGJ1WxujAFk/img.jpg", "https://naver.com/"];
imgLink_3 = ["https://blog.kakaocdn.net/dn/b7j6gV/btq5Syd5zbE/keJ3abDzXi32bHzKduJCA1/img.jpg", "https://daum.net/"];
imgLink_4 = ["https://blog.kakaocdn.net/dn/bQy7RZ/btq5Y9jj9J7/BgHmKBQmpphNpYkfS0qO0k/img.jpg", "https://www.google.co.kr/"];
imgLink_5 = ["https://blog.kakaocdn.net/dn/y9wL8/btq5Yqr6Mfk/QkHrJyuJtTC41fBfWnMsZk/img.jpg", "https://www.youtube.com/"];
imgLink_6 = ["https://blog.kakaocdn.net/dn/PilbO/btq5TsScxQb/GVfvaGZqc4PLN25sgEKBLk/img.jpg", "https://sir.kr/"];
imgLink_7 = ["https://blog.kakaocdn.net/dn/cKhXce/btq5Ttp4eBk/ZADYMqqTmFkkuwX9Tt55AK/img.jpg", "https://naver.com/"];
imgLink_8 = ["https://blog.kakaocdn.net/dn/d5MZRr/btq5TrZ5wRz/uIGtc7icn0wmhVpBsa2KsK/img.jpg", "https://daum.net/"];
imgLink_9 = ["https://blog.kakaocdn.net/dn/bMaFXG/btq5TsScxSU/D6C1UMQ6e2fJezv0rlvmN1/img.jpg", "https://www.google.co.kr/"];
imgLink_10 = ["https://blog.kakaocdn.net/dn/9u24l/btq5TtwUlyZ/ao3o9xmnYWJ977KtV0irAk/img.jpg", "https://sir.kr/"];
imgLink_11 = ["https://blog.kakaocdn.net/dn/bLBwe9/btq5RvIYCwg/GJuD0y78AHG9qa4sEFornk/img.jpg", "https://sir.kr/"];
imgLink_12 = ["https://blog.kakaocdn.net/dn/bmoAru/btq5Y7lvPVC/7nkHZyrt3h8eDBvWjCcCT0/img.jpg", "https://naver.com/"];
imgLink_13 = ["https://blog.kakaocdn.net/dn/cohhuV/btq5SykVnIL/EXwGM77ss40KLTxvt3m6q1/img.jpg", "https://daum.net/"];
imgLink_14 = ["https://blog.kakaocdn.net/dn/cHsRIh/btq5Y8kpUBx/2DLWaYAtM1ldFckdP6ODP1/img.jpg", "https://www.google.co.kr/"];
imgLink_15 = ["https://blog.kakaocdn.net/dn/cXP9Wn/btq5Ruwrvsf/FXtbmllQUGsRZdVTO0BCu1/img.jpg", "https://www.youtube.com/"];
for (imgTotal = 0; this['imgLink_' + (imgTotal + 1)]; imgTotal++);
//*** 랜덤 시작 ***//
if (randomMode) {
for (imgArray = [], baseN = 1 ; baseN <= imgTotal ; baseN ++) imgArray.push(baseN);
for (randomN = imgTotal; randomN > 0 ; randomN--) imgArray.push(imgArray.splice(Math.floor(Math.random() * randomN), 1)[0]);
for (img = 1; img <= imgTotal; img++) this["imgLinkRandom_" + img] = this["imgLink_" + imgArray[img - 1]];
for (img = 1; img <= imgTotal; img++) this["imgLink_" + img] = this["imgLinkRandom_" + img];
}
//*** 랜덤 종료 ***//
for (imgLoop = "", img = 1; img <= imgTotal; img++) {
linkLocation = linkTarget == "_blank" ? " onclick=window.open('" + this['imgLink_' + img][1] + "')" : " onclick=location.href='" + this['imgLink_' + img][1] + "'";
if (img % xCut == 0) {
if (imgTotal <= xCut || img == imgTotal) imgLoop += "<td><img style=width:100%;display:block;cursor:pointer;border-radius:" + imgRadius + " src=" + this['imgLink_' + img][0] + linkLocation + "></td>";
else imgLoop += "<td><img style=width:100%;display:block;cursor:pointer;border-radius:" + imgRadius + " src=" + this['imgLink_' + img][0] + linkLocation + "></td></tr><tr><td style=height:" + gapPixel + "px></td></tr><tr>";
}
else imgLoop += "<td><img style=width:100%;display:block;cursor:pointer;border-radius:" + imgRadius + " src=" + this['imgLink_' + img][0] + linkLocation + "></td><td style=width:" + gapPixel + "px></td>";
}
imgDiv.innerHTML = "<table style=width:" + totalWidth + ";table-layout:fixed cellpadding=0 cellspacing=0 align=" + xAlign + "><tr>" + imgLoop + "</tr></table>";
</script>
답변 1개
채택된 답변
+20 포인트
3년 전
한마디로 제 코드를
반응형으로 사용하고 싶으신 거네요.
충분히 가능이야 하겠지만
오픈소스로 공유할 생각은 없습니다.^^
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인