<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- 부트스트랩 사용할 cdn -->
</head>
<body class="bg-dark text-info">
<header class="bg-secondary text-center p-3 mb-5" >
<h1>Typing Master</h1>
</header>
<div class="container text-center">
<div class="row">
<div class="col-md-6 mx-auto">
<p class="lead">
주어진 단어를 <span class="text-danger">5</span> 초 안에 타이핑하기
</p>
<h2 class="display-2 mb 5" id="current-word">Start</h2>
<!-- display-2 로 크기를 키우고 mb를 5를 주어서 아래의 외부여백을 준다. -->
<input type="text" class="form-control-lg" placeholder="start typing" id="word-input">
<!-- class에 form-control을 주면 입력창이 뜬다. -->
<!-- 입력창에 클래스를 form-control-lg를 주면 입력창이 커진다. -->
<h4 class="mt-3" id="message"></h4>
<div class="row">
<div class="col-12 col-xl-6">
<h3>
Time Left : <span id="time">0</span>
</h3>
</div>
<div class="col-12 col-xl-6">
<!-- 평소에는 한칸 다 차지해서 12
한 행에 한개=>
가로로 한칸 다차지
md사이즈에서 6으로 줄여져서
한칸에 두개가 정렬 -->
<h2>
score: <span id="score">0</span>
</h2>
</div>
<div class="row mt-5">
<div class="col">
<div class="card card-body bg-secondary text-white">
<h5>안내방법</h5>
<p>각 단어를 주어진 시간에 타이핑하고. 다시시작하려면 주어진 단어를 입력하세요</p>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<button class="col-12 col-md-3 btn btn-primary">초급</button>
<button class="col-12 col-md-3 btn btn-secondary">중급</button>
<button class="col-12 col-md-3 btn btn-success">상급</button>
<!-- 가장 작은 사이즈에서는 3줄로 나타내고
md사이즈 이상에서는 한줄에 3개를 나타낸다.
-->
</div>
</div>
</div>
</div>
<!-- mx-auto 마진 우측을 자동으로 가질 수 있도록 -->
</div>
<!-- 하나의 줄 생성 -->
</div>
<script src="main.js"></script>
</body>
</html>
'웹 실습' 카테고리의 다른 글
| typing Game with bootstrap and async-wait grammar (0) | 2022.04.08 |
|---|---|
| 부트스트랩을 이용한 타이핑게임 js (0) | 2022.04.08 |
| 부트스트랩 사용하기 (0) | 2022.04.08 |
| full하트클릭->빈하트 빈하트클릭=>full 하트 (0) | 2022.04.08 |
| 아무것도 입력하지않으면 아무일도 일어나지 않는다.+입력제한 (0) | 2022.04.08 |