<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 100px;
height: 70px;
text-align: center;
line-height: 70px;
}
</style>
</head>
<body>
<script type="text/javascript">
var colorList=['red','yellow','lightgreen','lightblue','pink','gray'];
for(var i=0;i<colorList.length;i++){
var box='<div style="background-color:'+colorList[i]+'">'+colorList[i]+'</div>';
document.write(box); // 여기서 document는 line1의 DOC, 바디에 쓰여짐
}
</script>
</body>
</html>원래라면 box를 body에 <div> 태그들을 사용해서 box를 여러개 만들어야했지만,
JS (자바스크립트) 를 사용하여 박스생성을 함수로 만들어 사용하게 되면 for문 만으로 여러개의 박스들을 만들 수 있음
이 때 colorList라는 항목을 추가해 background-color도 지정하여 박스마다 다른 색들이 적용될 수 있도록 하였다
수행결과
'개발자노트 > 웹' 카테고리의 다른 글
| HTML - 선택자와 콜백함수를 이용한 이벤트 예제 ( 주사위 게임 ) (0) | 2022.07.26 |
|---|---|
| HTML 업다운게임 예제 ( HTML형변환 예제 ) (0) | 2022.07.25 |
| HTML 배열과 관련 배열함수 (0) | 2022.07.25 |
| HTML 제어문 (0) | 2022.07.25 |
| HTML 자료형 확인하기 (0) | 2022.07.25 |
