한 번에 많은 코드를 추가했지만, 이제 이 정도는 위에서 아래로 순서대로 읽으며 파악할 수 있을 겁니다. 코드를 작성하고 concentration.html 파일을 실행하면 다음과 같이 화면에 카드 12장이 표시됩니다.

그림 13-2 카드 12장 생성

여기서는 카드가 3줄로 배치되는데, 웹 브라우저의 크기를 조정하면 카드 배치는 달라집니다. 카드마다 앞면 색을 지정했지만, 기본으로 뒷면이 보이게 CSS를 설정해서 처음에는 남색으로만 표시됩니다.