실습문제 7-8

WEB/TRAINNING 2017. 11. 29. 19:05 |

8. 다음 브라우저 화면과 같이, document.write()를 이용하여 16개의 <div> 태그를 출력하고

<div> 태그에 출력하는 배경색을 랜덤한 색으로 칠하는 웹 페이지를 작성하라.

웹 페이지를 로드할때마다 색이 랜덤하게 바뀐다.

1
2
3
4
5
6
7
div 
{
    display: inline-block;
    width: 150px;
    padding: 10px;
 
}
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
div 
{
    display: inline-block;
    width: 150px;
    padding: 10px;
}
</style>
</head>
<body>
<script>
 
document.write("<h3>16개의 랜덤한 색 만들기</h3><hr>");
var colorNames = [];
 
for(var i=0; i<16; i++)
{   
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    colorNames[i] = ["rgb("+ r + "," + g + "," + b +")"];
}
for(var i=0; i<16; i++)
{
 
    document.write("<div style='background-color:"+colorNames[i]+"'>"+colorNames[i]+"</div>");
}
 
 
</script>
</body>
</html>
cs


'WEB > TRAINNING' 카테고리의 다른 글

실습문제 7-10  (0) 2017.12.04
실습문제 7-9  (0) 2017.12.04
실습문제 7-7  (0) 2017.11.29
실습문제 7-6  (0) 2017.11.29
실습문제 8-1  (0) 2017.11.24
Posted by 너래쟁이
: