반응형
청기 백기 I
“청기 내려. 백기 올려. 청기 내리지 말고 백기 올려!”
'청기 백기' 게임 아시죠? 참가자들이 한 손에는 청기를, 다른 손에는 백기를 들고 있다가 사회자가 말하는 대로 동작을 해야 하는 게임입니다. 예를 들어, 사회자가 "청기 내리지 말고 백기 들어!"라고 외치면 그대로 따라해야 합니다. 만약 실수로 청기를 내린다거나 백기를 들지 않으면 탈락하게 됩니다.
이 게임을 한 번 만들어봅시다.
주어진 코드를 실행해보시면 총 6개의 깃발과, 3개의 버튼이 있습니다. HTML 코드와 CSS 코드를 분석한 후, 앞서 배운 jQuery 선택자와 메소드(함수)를 이용해, 각 버튼이 제대로 동작하도록 스크립트를 작성해보세요.
깃발이 다시 올라오는 기능은 청기 백기 II 과제에서 구현할 테니, 일단은 내려간 깃발은 내려간 상태로 유지되도록 해주세요.
<!DOCTYPE html>
<html>
<head>
<title>청기 백기</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="flags">
<img class="flag blue dot" src="blue_dot.png" width="100">
<img class="flag red" src="red_solid.png" width="100">
<img class="flag blue" src="blue_solid.png" width="100">
<img class="flag blue dot" src="blue_dot.png" width="100">
<img class="flag white dot" src="white_dot.png" width="100">
<img class="flag blue" src="blue_solid.png" width="100">
</div>
<div class="buttons">
<button id="btn1">청기 내려</button>
<button id="btn2">청기 내리지 말고 백기 내려</button>
<button id="btn3">점선 청기 내려</button>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>* {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans KR', sans-serif;
text-align: center;
margin: 0;
background: url('../images/background.jpg') center center/cover no-repeat;
min-width: 768px;
height: 100vh;
}
/* 깃발과 버튼 세로 가운데 정렬*/
body::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.container {
display: inline-block;
vertical-align: middle;
}
/* 깃발 */
.flags {
text-align: center;
}
.flags .flag {
margin: 0 10px;
}
.flags .flag.down {
/* 깃발 내렸을 때 30도 회전 */
transform: rotate(30deg);
}
/* 버튼 */
.buttons {
text-align: center;
margin-top: 160px;
}
.buttons button {
width: 222px;
height: 38px;
border-radius: 9px;
border: none;
background-color: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
margin: 0 4px;
font-size: 14px;
}
$('#btn1').on('click', blueDown);
$('#btn2').on('click', whiteDown);
$('#btn3').on('click', blueDotDown);
function blueDown() {
$('.blue').addClass('down')
}
function whiteDown() {
$('.white').addClass('down')
}
function blueDotDown() {
$('.blue.dot').addClass('down')
}본 내용은 Codeit의 'jQuery' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > jQuery' 카테고리의 다른 글
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |
|---|---|
| [jQuery 활용하기] 01. jQuery 1 (0) | 2021.02.19 |
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |