타자 연습 게임 만들기(3)

 

일단 css를 이용하여 좀더 꾸며보았다.

 

css가 어렵지는 않은데 시간은 오래 걸리고 만들어 놓고 보면 뭔가 부족한거같다... 나중에 다시 갈아 엎어야 할 것 같다.

 

추가할 기능들이 여러개 생각이 나서 일단 버튼으로만 구현을 해 놓았다.

 

점수 기능

점수 기능 같은 경우는 간단하게 변수하나를 만들어서 단어 제거에 성공했을 때 단어길이에 비례해서 점수가 올라가도록 만들었다.

점수 기능이 있으니까 시작할 때 username을 적고 랭킹으로 나타내면 어떨까 싶어서 랭킹 보기 버튼도 일단 만들어 놓았다.

 

규칙 보기 기능

타자연습게임 만들면서 git 관리와 GitHub 사용 관련 연습도 같이 하고 있는데, ReadMe를 꾸미면서 처음 보는 사람이 어떻게 하는지 알 수 있게 규칙 같은 것도 있으면 좋을거 같아서 규칙 보기 버튼도 만들었다.

 

일단 규칙 보기 버튼에 mouseover 했을 때 규칙이 나타나도록 해봤다.

javascript로 해도 되지만, 이번에는 css의 display 속성을 사용해서 구현해보았다.

 

기본적으로 규칙이 나오는 div 박스를 display: none으로 해두고

규칙 보기 버튼에 hover 했을 때 display를 block으로 바꿔줘서 화면에 나타나도록 만들었다.

규칙이 나오는 div박스는 규칙보기버튼의 형제 요소이므로 ~ 선택자를 사용한다.

 

이렇게 설정하면 다음처럼 mouseover하면 규칙 박스가 나타난다.