13.2

화면 만들고 카드 생성하기

카드 짝 맞추기 게임을 위한 concentration.html 파일을 만들고 다음과 같이 코드를 작성합니다.

카드 뒤집기를 어떻게 구현할지 감이 잡히지 않을 텐데 이 부분은 자바스크립트가 아닌 CSS로 구현합니다. flipped 클래스를 추가하면 카드가 앞면으로 뒤집히고, flipped 클래스를 제거하면 카드가 뒷면으로 뒤집히는 효과를 낼 수 있습니다.

물론 자바스크립트로도 카드 뒤집기 효과를 구현할 수 있습니다. 하지만 CSS가 디자인을 담당하므로 CSS로 표현 가능한 영역은 최대한 CSS만 사용해서 구현하는 것이 편합니다.