뒤집는 카드에 이미지 넣기

조회수 163회

유튜브에 제로초님이 하셨던 카드뒤집기 예제입니다 저는 색깔이 아니라 이미지를 넣고 싶은데 도저히 찾다가 어떻게 해야할지 모르겠어서 질문드려요

cardBack.style.backgroundColor처럼 cardBack.style.backgroundImage로 이미지를 넣으려 했는데 안되네요 싹 갈아엎고 카드한장당 이미지 넣는 방법 밖엔 없을까요?

<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
    <title>짝 맞추기</title>
    <style>
      .card{
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 20px;
        width: 100px;
        height: 150px;
      }
      .card-inner{
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.5s;/*카드를 뒤집는 효과 시간*/
        transform-style:preserve-3d;
      }
      .card.flipped .card-inner{/*뛰어쓰기 중요*/
        transform:rotateY(180deg);
      }
      .card-front{
        background-image: url("C:/Users/user/Desktop/web/이미지/f.jpg");
      }
      .card-front, .card-back{/*콤마는 오타가 아님*/
        position:absolute;/*카드 앞뒤를 겹칠수있게하는코드*/
        width:100%;
        height:100%;
        border: 1px solid black;
        backface-visibility:hidden;
      }
      .card-back{
        transform:rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <script >
    var 가로=4;
var 세로=3;
var 이미지후보=new Array();
var 이미지=[];
  for(var i=0;색깔후보.length>0;i+=1){
    색깔 = 색깔.concat(색깔후보.splice(Math.floor(Math.random()*색깔후보.length), 1));
  }
console.log(색깔);

function 카드세팅(이미지후보){
  for (var i = 0; i<이미지후보.length;i+=1){
    var card=document.createElement('div');
    card.className='card';
    var cardInner=document.createElement('div');
    cardInner.className ='card-inner';
    var cardFront=document.createElement('div');
    cardFront.className='card-front';
    var cardBack=document.createElement('div');
    cardBack.className='card-back';
    cardBack.style.backgroundColor=색깔[i];
    cardInner.appendChild(cardFront);
    cardInner.appendChild(cardBack);
    card.appendChild(cardInner);
    (function (c){
      card.addEventListener('click', function(){
        c.classList.toggle('flipped');
      });
    })(card);
    document.body.appendChild(card);
  }
}

카드세팅(이미지후보);
    </script>
  </body>
</html>
  • 답변자가 직접 실행해볼 수 있게 https://codepen.io/ 같은 사이트에 작성하고 공유하시면 더욱 좋습니다. 편집요청빌런 2020.2.12 14:06
  • 요정님 저는 요정님이 자동으로 이런 글 써주신 줄 알았는데... 컴퓨터가아니라 인간이셨군요! pavk96 2020.2.12 22:40
  • 다 사람이에요 서로 돕고 살면 좋을것 같습니다. 엽토군 2020.2.13 09:06
  • 띠요옹... 편집요청빌런 2020.2.13 09:17

1 답변

  • 좋아요

    2

    싫어요
    채택 취소하기

    테스트는 안해봤습니다만...

    var 이미지후보 = [
        '이미지경로1', '이미지경로1', // 같은걸 2번 써주는 이유는 이게 카드맞추기이기 때문입니다. 아마 제로초인지 누군지가 만든 코드도 이렇게 돼있을것으로 예상되는데 어떤지 모르겠네요.
        '이미지경로2', '이미지경로2', // 중간 생략...
        '이미지경로6', '이미지경로6' // 가로 4 세로 3이니까 총 12장이겠죠
    ];
    var 이미지= [];
    
    // 이미지후보 배열에서 랜덤하게 하나 뽑아서 이미지 배열에 꽂는 작업
    for (var i = 0; i < 이미지후보.length; i++) {
        이미지 = 이미지.concat(이미지후보.splice(Math.floor(Math.random()*이미지후보.length), 1));
    }
    
    // https://www.w3schools.com/jsref/prop_style_backgroundimage.asp
    cardBack.style.backgroundImage = "url('" + 이미지[i] + "')";
    cardBack.style.backgroundSize = 'cover';
    
    • 답변 정말정말 감사합니다 미쳐서 펄쩍펄쩍 뛰었어요 pavk96 2020.2.12 16:10

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.