카드뒤집기
-
JavaScript 입문 : 카드맞추기 게임 - 카드뒤집기(setTimeout( )이용), 클릭이벤트 (onclickCard 함수) 만들기 (1)컴퓨터 알아가기/JavaScript 2022. 10. 5. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 공부하고 있습니다. 이제부터는 일정시간을 두고 카드를 뒤집는 자바스크립트를 만들어 볼 예정이고 에러없이 작동한다면 각각 카드를 클릭할 수 있는 클릭이벤트 기능을 넣을 차례입니다. 1. 카드 뒷면 보여주기 일정 시간 동안 카드의 뒷면을 보여주는 script를 작성합니다. 한꺼번에 뒤집을 수 있지만 시각적 효과를 위해서 1초후 첫 카드가 뒤집히면서 이후 0.1초 간격으로 전체 12장의 카드를 뒤집도록 하겠습니다. 시간이 들어간다는 이야기는 setTimeout( ) 함수를 활용합니다. startGame( ) 함수내에 작성해야 되겠죠. 4개의 태그 중 전체 프레임을 나타내는 container 클래스명을 기준으로 움직이며 지난시간 공부했던 add( ) 메소드를 ..
-
<HTML/CSS> Animation : 카드 뒤집기컴퓨터 알아가기/HTML CSS 2022. 9. 25. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 오늘 배울 내용은 마우스를 올렸을때 카드가 뒤집히는 Animation을 공부하고자 합니다. 이 효과를 공부하기 위해 지금까지 CSS의 Animation 효과의 기본을 여러가지로 공부해 보았습니다. 카드가 뒤집혀지는 효과를 통하여 자바스크립트 카드뒤집기 게임을 만들기 위한 기본과정을 살펴본 겁니다. ▒ 카드 뒤집기 CSS에서 카드를 뒤집는 효과는 그동안 배웠던 Animation 속성중 Transition, Transform, Rotation을 전부 응용하는 작업입니다. 이를 위해서 아무 그림이나 사용할 수 있게 작업하는 폴더에 그림파일을 저장합니다. 저는 첫화면은 다음과 같은 그림을 올리고 마우스를 올리면 뒷면의 글..