개발_자
2024. 6. 10. 23:28
숫자 기억 게임 만들기(HTML + CSS)
만들다 하루가 다 간...
h1위치 조절이며..
input이랑 버튼 사이 간격이며..
왜 난리들이야..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>숫자 기억 게임</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap");
* {
font-family: "Noto Sans KR", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
body {
background-color: #f0f0f0;
}
.card {
background-color: white;
width: 370px;
height: 180px;
margin: 100px auto;
padding: 35px 20px 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border: 2px solid white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.box {
display: flex;
gap: 10px;
height: 30px;
width: 85%;
justify-content: space-between;
margin-bottom: 45px;
}
.box button {
width: 50px;
margin-left: 4px;
height: 30px;
}
</style>
</head>
<body>
<div class="card">
<h1>숫자 기억 게임</h1>
<div class="box">
<input type="text" placeholder="숫자를 입력하세요" />
<div>
<button>시작</button>
<button>제출</button>
</div>
</div>
</div>
</body>
</html>
나만 그런거 아니라 해줘...
내일은 자바스크립트 넣도록...
덕분에 ChatGPT와 친해졌다