16.2

화면 만들고 애니메이션 처리하기

whack-a-mole.html 파일을 만들고 다음과 같이 코드를 작성합니다. 코드가 길어서 어떤 역할을 하는지 간단히 설명하겠습니다.

두더지 잡기도 언뜻 보면 3 × 3 크기의 표 구조를 띄고 있습니다. 하지만 코드에서는 table 태그 대신 div 태그를 사용합니다. 화면이 복잡해질수록 table 태그보다는 div 태그로 화면을 구성하는 것이 좋습니다. table 태그는 원래 표를 그리는 용도라서 다양한 화면을 표시하는 데는 제약이 있습니다.

두더지 잡기에서는 두더지나 폭탄이 움직이는 동작이 많은데, 이런 효과를 애니메이션(animation)이라고 합니다. 애니메이션을 자바스크립트로 처리하면 복잡할 뿐만 아니라 성능도 좋지 않습니다. 그래서 HTML과 CSS로 처리하다 보니 코드가 길어졌습니다. CSS에서 transition이 애니메이션을 처리합니다.