그누보드 QA - 자바스크립트 화면 축소시 자동으로 세로로 배열 관련

자바스크립트 화면 축소시 자동으로 세로로 배열 관련

킹스맨 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022.04.03 23:37:20 2641 (1.♡.♡.179)

답변 1

본문

출처 : https://sir.kr/g5_tip/18168#c_18224

기존에 도움주신 비타주리님 감사합니다.

해당 방식을 사용했습니다.

그러나 pc버전일 경우 설정한 숫자만큼 가로로 배열 됩니다.

다만 모바일이나 화면이 축소시 이미지가 그대로 가로로 배열되어서 크기가 매우 작게 변합니다.

이것을 자동으로 세로로 사이즈에 맞게 배열 되게 할수 있는 방법이 있을까요.

이미지는 가로 300 x 세로 100 사용 합니다.

출처 : https://sir.kr/g5_tip/18168#c_18224



<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>