<body>
<div class="card">
<div class="card-inner">
<div class="card-front">앞</div>
<div class="card-back">뒤</div>
</div>
</div>
<script src="cardgame.js"></script>
</body>html에서 이렇게 구현되게 하기 위해서
이를 javascript로
function cardSetting(row, column) {
for (var i = 0; i < row * column; i++) {
var card = document.createElement('div');
card.className = 'card';
var cardInner = document.createElement('div');
cardInner.className = 'cardInner';
var cardFront = document.createElement('div');
cardFront.className = 'card-front';
var cardBack = document.createElement('div');
cardBack.className = 'card-back';
cardInner.appendChild(cardFront);
cardInner.appendChild(cardBack);
card.appendChild(cardInner);
document.body.appendChild(card);
}
}이렇게 나타낼 수 있습니다.
부모자리.appendChild(그 안에 들어가는 자식자리); 로 감싸고 있는 div의 변수안에 div를 배치할 수 있습니다.
for 반복문으로 위의 코드를 반복한다면 row*column 의 수만큼의 card를 body 안에 생성할 수 있게 됩니다.
*for 반복문
for ( 시작점; 조건; 증감;) {
반복하게 될 문장;
}
'javascript' 카테고리의 다른 글
| TIL no.9 - let / const / var 차이 (0) | 2020.08.23 |
|---|---|
| TIL no.8 - forEach method :JavaScript (0) | 2020.08.23 |
| TIL no.5 - Javascript 기초 공부 정리[2] (0) | 2020.08.20 |
| TIL no.4 - Javascript 기초 공부 정리[1] (0) | 2020.08.19 |
| TIL no.2 - Element.scrollIntoView() (0) | 2020.08.13 |
