고정 헤더 영역
상세 컨텐츠
본문
사진누르면 배치되기
<!DOCTYPE html>
<html lang="en">
<!--//배치 누르면 사진들 배치되는거-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배너 배치하기</title>
<style>
#btnStart {
padding: 5px;
margin-bottom: 5px;
}
.image-container {
position: relative;
}
.image-container img {
position: absolute;
left: 0;
top: 0;
width: 120px;
}
</style>
</head>
<body>
<button type="button" id="btnStart" >배치 시작하기</button>
<div class="image-container">
<img src="banners/1.png" alt="배너" class="banner">
<img src="banners/2.png" alt="배너" class="banner">
<img src="banners/3.png" alt="배너" class="banner">
<img src="banners/4.png" alt="배너" class="banner">
<img src="banners/5.png" alt="배너" class="banner">
<img src="banners/6.png" alt="배너" class="banner">
<img src="banners/7.png" alt="배너" class="banner">
<img src="banners/8.png" alt="배너" class="banner">
</div>
<script>
const btn = document.getElementById("btnStart");
//btnStart 버튼 클릭시 동작
btn.addEventListener('click', function() {
const images = document.getElementsByClassName("banner");
for(let i = 0; i < images.length; i++) {
//200씩 증가
let left = ((i%3)+1)*200;
let top = Math.floor(i/3)*200;
images[i].style.left = left + 'px';
images[i].style.top = top + 'px';
}
});
</script>
</body>
</html>
프롬프트로 누를때마다 총합 나오게
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 총합구하기-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
</style>
</head>
<body>
<script>
//prompot로 사용자 입력값 받기
//end면 종료
//아니면 parseint 로 숫자형으로 변경해서 합산
//합산값을 계속 출력
//document.write + br 출력
//end 입력되면 종료
let total = 0;
while(true) {
const month = prompt("숫자를 입력하세오");
if(month=="end"){
break;
}
total +=Number(month);
;
}
document.write(`총합은${total}`)
</script>
</body>
</html>
랜덤으로 사각형 색깔 사각형다섯개
∇
<!DOCTYPE html>
<html lang="en">
<!--//랜덤으로 사각형 5개 색 만든다-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
.box {
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
let i = 0;
const colorArr = ['black', 'red', 'green','blue','yellow'];
let strDiv = "";
const container = document.getElementsByClassName("container")[0];
while(i<5){
let randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
strDiv += `<div class = "box" id = "box${i}" style = "background :${randomColor};"></div>`;
// strDiv += `<div class = "box" id = "box${i}" style = "background : ${colorArr[i]};"></div>`;
//
//
i++;
}
container.innerHTML = strDiv;
</script>
</body>
</html>
2와 3의 공배수 출력
<!DOCTYPE html>
<html lang="en">
<!--//2,3 공배수 모두 출력-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
</style>
</head>
<body>
<script>
//1~100까지 2와 3의 공배수 모두 출력
//document.write로 화면에 출력
//br태그로 하나 찍고 엔터값 입력
let i = 1;
while(i <= 100){
if(i%2===0&&i%3===0){
document.write(`${i}<br>`);
console.log();
}
i++;
}
</script>
</body>
</html>
구구단 출력
<!DOCTYPE html>
<html lang="en">
<!--구구단출력-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
</style>
</head>
<body>
<script>
for(let i = 2; i<=9; i++){
document.write(`<h1>${i} 단 </h1>`);
for(let j = 1; j<=9;j++){
document.write(`${i}*${j}=${i*j}<br>`);
}
}
</script>
</body>
</html>
사각형 다섯개 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 사각형다섯개만들기-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
.container{
width: 1000px;
height: 1000px;
}
.box{
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
const container = document.getElementsByClassName("container")[0];
let strdiv = "";
//for문은 태그의 유일한 아이디를 만들 때 자주 사용
for(let i=0;i<5;i++){
strdiv += `<div class = 'box' id = 'box${i}'/></div>`;
}
container.innerHTML = strdiv;
</script>
</body>
</html>사각형 이동시키기
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 사각형 이동시키기-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
.box{
position: absolute;
width: 100px;
height: 100px;
left: 0;
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.getElementsByClassName("box")[0];
const length = prompt("이동시킬 거리");
box.style.left = length + "px";
</script>
</body>
</html>
댓글 영역