뒤집는 카드에 이미지 넣기
조회수 761회
유튜브에 제로초님이 하셨던 카드뒤집기 예제입니다 저는 색깔이 아니라 이미지를 넣고 싶은데 도저히 찾다가 어떻게 해야할지 모르겠어서 질문드려요
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>
1 답변
-
테스트는 안해봤습니다만...
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';
댓글 입력