요구 사항
- 랜덤한 Hex color code를 생성하는 함수 작성하기
- 버튼 클릭 시, 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code 텍스트 수정하기
실행 화면
.gif)
Code
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js" type="text/javascript" defer></script>
<title>Background Changer</title>
</head>
<body>
<p>HEX COLOR :#FFFFFF</p>
<br><button style = "color: white;" onclick="changer()">CLICK ME</button>
</body>
</html>CSS
body {
margin: 0;
}
p {
width: 100%;
margin: 200px 0px 300px 0px;
text-align: center;
font-size: 60px;
font-weight: bold;
}
button {
width: 140px;
height: 57px;
display: block;
margin: auto;
position: relative;
top: -300px;
text-align: center;
font-size: 22px;
background-color: grey;
border-radius: 7px;
border: 0;
outline: 0;
}JavaScript
function changer(){
let color = '#';
for(let i = 0; i < 6; i++){
color += Math.floor(Math.random()*16).toString(16).toUpperCase();
}
document.body.style.backgroundColor = color;
document.querySelector('p').textContent = 'HEX COLOR :' + color;
}P.S.
0~9까지의 숫자와 A~F까지의 알파벳으로 구성되는 Hex Code의 특징을 보고, 16진수를 랜덤으로 6번 생성하여 기능을 구현했다.
자바스크립트로 코드를 작성하는 것은 어렵지 않았지만, 이렇게 HTML, CSS와 함께 화면을 구현해 본 것이 처음이라 헤매는 부분이 있었다😅 역시 만만하게 생각할 게 아니었다.. 그래도 처음으로 자바스크립트를 활용해 화면을 만들어보니 뿌듯한 마음이 든다😊
