6일차: 세션2: HTML, CSS, JavaScript를 사용한 가위바위보 게임 개발
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발 초보자, HTML/CSS/JavaScript 기초 학습자
핵심 요약
- HTML 구조로 게임 요소(버튼, 결과 표시) 생성
- CSS 스타일링을 통해 UI 디자인 및 반응형 레이아웃 적용
- JavaScript 로직으로 사용자 입력 처리 및 게임 규칙 구현 (예:
document.querySelector
,eventListener
활용)
섹션별 세부 요약
1. HTML 구조 설계
요소로 게임 영역 구성 (예:
#game-container
)- 사용자 입력을 위한
요소 3개 추가 (가위, 바위, 보)
- 결과 표시를 위한
요소 포함
2. CSS 스타일링 적용
- 버튼에
flexbox
레이아웃 적용하여 중앙 정렬 - 버튼에 호버 효과 및 활성화 상태 스타일링 (예:
:active
,transition
) - 반응형 디자인을 위한
media query
사용
3. JavaScript 로직 구현
addEventListener
로 버튼 클릭 이벤트 처리- 사용자 선택값과 컴퓨터 선택값 비교 (예:
Math.random()
활용) - 결과 판단 로직 구현 (가위-보, 바위-가위, 보-바위)
- 결과 표시 업데이트 및 승패 카운터 관리
결론
- 기본 구조 완성 후 테스트하여 버그 확인
- 추가 기능으로 점수 카운터, 재시도 버튼 구현 권장
- ES6 모듈 사용으로 코드 분리 및 확장성 강화 가능