타이핑 게임 사이트 만들기
1. 사용언어
HTML, CSS, JavaScript
HTML : 웹사이트 형식 구성 (뼈대 담당)
CSS : to-do list 디자인 담당 (미모 담당)
JavaScript : 작동 기능 담당 (내용물 담당)
2. 웹사이트 기능요약
1) 주요기능
ㆍBootstrap v5.1.3 활용.
ㆍ시작 버튼을 클릭하면 타이핑 할 단어가 생성된다.
ㆍ단어생성과 동시에 5초 카운트 다운이 시작된다.
ㆍ제한 시간 내에 인풋박스에 타이핑 할 단어를 정확히 입력하면 다음단어가 생성된다.
2) 세부기능
ㆍ대문자, 소문자 구분 없이 철자가 맞으면 정답으로 인정하고 점수 부여
3) 자율학습 추가기능
ㆍheader 문구에 strong을 적용하고 “시작”단어에 em태그를 추가.
ㆍ방법안내 card에 Breakpoint를 부여해 기본상태일 때와 xl상태일 때 크기를 조정.
ㆍ방법안내 card와 남은시간 문구 앞에 Bootstrap의 info icon을 cdn방식으로 추가 및 색 부여.
3. 코드 및 시현 이미지
1) header 문구에 strong을 적용하고 “시작”단어에 em태그를 입혔다.
대상파일: index.html
강의내용: 별도 설정 없음.
자율학습: 시작 단어를 강조하기 위해 em태그 적용
<추가 코드>
<h2 class="display-2 mb-5" id="current-word"><em>시작</em></h2>
2) 안내문구 상자에 Breakpoint를 부여해 기본상태일 때와 xl상태일 때 크기를 조정했다.
대상파일: index.html
강의내용: 안내문구 card에 별도 설정 없음.
자율학습: Breakpoint를 이용해 웹 페이지 창 크기에 따른 card 크기 조정.
<추가 코드>
<div class="card card-body text-dark bg-light border-dark col-12 col-xl-6 mx-auto">
3) 방법안내 card와 남은시간 앞에 Bootstrap의 info icon을 cdn방식으로 추가 및 색 부여.
대상파일: index.html
강의내용: 안내문구 card와 남은시간 문구 앞에 별도 설정 없음.
자율학습: 안내문구 card 강조하기 위해 Bootstrap icon을 cdn방식으로 추가 후 warning색 부여.
<추가 코드>
<h3><i class="bi bi-alarm-fill fs-2 text-secondary"></i> 남은 시간: <span id="time">0</span></h3>
<h5><i class="bi bi-info-circle-fill text-warning"></i> 방법안내 </h5>
4. 기타
1) 전반적인 내용 조정
강의 내용이 좋지만, 강의 결과물과의 차별화를 위해서 늘 색상과 text 내용은 내가 원하는 것들로 수정한다.
2)Bootstrap에 재미있는 기능이 많다. html과 css를 한 방에 사용할 수 있어서 신기하다. 부트스트랩으로 다양한 기능을 구현할 수 있어서 앞으로 더 많이 공부해야할 듯하다.
참고자료
ㆍSeSAC 바닐라 Javascript + Vue.js 과정
ㆍBootstrap 공식문서