728x90
*** 스타일은 단위 명시!!***
속성에서는 명시 안 해줘도 됨
외부 스타일
페이지를 따로 만들어
내부스타일
<style>
#id_ball {
background-image: url('./images/222.jpg');
background-size: 100px 100px;
position: absolute;
width: 100px;
height: 100px;
/* left: 100px;
right: 100px;
top: 100px; */
right: 20px;
bottom: 30px;
border-radius: 50px 50px;
background-color: yellowgreen;
}
</style>
인라인 스타일 접근법
(-하이픈 들어간것)
하이픈빼고 대문자
권장 사용법
<div id="id_ball" style="left: 60px;top: 60px;
background-image: url('./images/222.jpg');
background-size: 100px 100px;">
</div>
<script>
alert("배경: "+v_ball.style.backgroundImage+" 사이즈: "+v_ball.style.backgroundSize);
</script>
배열접근법
<div id="id_ball" style="left: 60px;top: 60px;
background-image: url('./images/222.jpg');
background-size: 100px 100px;">
</div>
<script>
alert("배경: "+v_ball.style["backgroundImage"]+"\n사이즈: "+v_ball.style["backgroundSize"]);
</script>
>> 움직이며 이미지가 변경되게
더보기
이전코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id_ball {
position: absolute;
width: 100px;
height: 100px;
/* left: 100px;
right: 100px;
top: 100px; */
right: 20px;
bottom: 30px;
border-radius: 50px 50px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<input type="button" value="저절로 움직이기" onclick="f_proxy()">
<div id="id_ball" style="left: 60px;top: 60px;
background-image: url('./images/222.jpg');
background-size: 100px 100px;">
</div>
<script>
// 새로운 키워드 javascript 브라우져를 참조하는 식별자 window
var v_ball = document.getElementById("id_ball");
// alert("배경: "+v_ball.style.backgroundImage+"\n사이즈: "+v_ball.style.backgroundSize);
//alert("배경: "+v_ball.style["backgroundImage"]+"\n사이즈: "+v_ball.style["backgroundSize"]);
var v_wWidth = window.innerWidth;
var v_hHeight = window.innerHeight;
var v_mvW = 10; // 좌우 방향 컨트롤
var v_mvH = 10; // 상하 방향 컨트롤
var isRun = false; //아직 실행되고 있지 않은 상황
function f_proxy() { // proxy는 대리인이라는 뜻
if (!isRun) {
f_mv1();
isRun = true;
}
}
function f_mv1() {
var v_left = parseInt(v_ball.style.left);
var v_top = parseInt(v_ball.style.top);
v_ball.style.left = v_left + v_mvW + "px"; // 단위를 빼먹으면 동작 안함!
v_ball.style.top = v_top + v_mvH + "px"; // 단위를 빼먹으면 동작 안함!
v_left = parseInt(v_ball.style.left);
v_top = parseInt(v_ball.style.top);
// 오른쪽 벽에 닿거나 넘어선다면
if ((v_left + 100) >= v_wWidth || v_left <= 0) {
v_mvW = -v_mvW; // +10 을 -10으로 바꾸어 줌!
}
// 위아래 부딪혔을 때
if ((v_top + 100) >= v_hHeight || v_top <= 0) {
v_mvH = -v_mvH; // +10 을 -10으로 바꾸어 줌!
}
setTimeout(f_mv1, 3);
}
</script>
</body>
</html>1) 틀잡기
v_ball.style.backgroundImage="url("+경로+")";2) 경로만들기
<script>
var v_number = 0;
function f_mv1(){
if(v_number>7){
v_number=0;
}
var v_path = "./images/all"+(v_number++)+".jpg";
v_ball.style.backgroundImage="url("+v_path+")";
setTimeout(f_mv1, 300);
}
</script>
3) 전체는?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id_ball {
position: absolute;
width: 100px;
height: 100px;
/* left: 100px;
right: 100px;
top: 100px; */
right: 20px;
bottom: 30px;
border-radius: 50px 50px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<input type="button" value="저절로 움직이기" onclick="f_proxy()">
<div id="id_ball" style="left: 60px;top: 60px;
background-image: url('./images/222.jpg');
background-size: 100px 100px;">
</div>
<script>
// 새로운 키워드 javascript 브라우져를 참조하는 식별자 window
var v_ball = document.getElementById("id_ball");
// alert("배경: "+v_ball.style.backgroundImage+"\n사이즈: "+v_ball.style.backgroundSize);
// alert("배경: "+v_ball.style["backgroundImage"]+"\n사이즈: "+v_ball.style["backgroundSize"]);
var v_wWidth = window.innerWidth;
var v_hHeight = window.innerHeight;
var v_mvW = 10; // 좌우 방향 컨트롤
var v_mvH = 10; // 상하 방향 컨트롤
var isRun = false; //아직 실행되고 있지 않은 상황
function f_proxy() { // proxy는 대리인이라는 뜻
if (!isRun) {
f_mv1();
isRun = true;
}
}
var v_number=0;
function f_mv1() {
var v_left = parseInt(v_ball.style.left);
var v_top = parseInt(v_ball.style.top);
v_ball.style.left = v_left + v_mvW + "px"; // 단위를 빼먹으면 동작 안함!
v_ball.style.top = v_top + v_mvH + "px"; // 단위를 빼먹으면 동작 안함!
v_left = parseInt(v_ball.style.left);
v_top = parseInt(v_ball.style.top);
// 오른쪽 벽에 닿거나 넘어선다면
if ((v_left + 100) >= v_wWidth || v_left <= 0) {
v_mvW = -v_mvW; // +10 을 -10으로 바꾸어 줌!
}
// 위아래 부딪혔을 때
if ((v_top + 100) >= v_hHeight || v_top <= 0) {
v_mvH = -v_mvH; // +10 을 -10으로 바꾸어 줌!
}
if(v_number>7){
v_number=0;
}
var v_path = "./images/all"+(v_number++)+".jpg";
v_ball.style.backgroundImage="url("+v_path+")";
setTimeout(f_mv1, 300);
}
</script>
</body>
</html>
transform
v_ball.style.transform="rotate("+각도+"deg)";
<script>
var v_gak=0;
function f_mv1(){
v_gak=v_gak+10;
v_ball.style.transform="rotate("+v_gak+"deg)";
}
</script>360 넘어가면 값이 너무 커져! 필요없는 값들이 생성이된다
v_gak=(v_gak+10)%360;>> 전체
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id_ball {
position: absolute;
width: 100px;
height: 100px;
/* left: 100px;
right: 100px;
top: 100px; */
right: 20px;
bottom: 30px;
border-radius: 50px 50px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<input type="button" value="저절로 움직이기" onclick="f_proxy()">
<div id="id_ball" style="left: 60px;top: 60px;
background-image: url('./images/222.jpg');
background-size: 100px 100px;">
</div>
<script>
// 새로운 키워드 javascript 브라우져를 참조하는 식별자 window
var v_ball = document.getElementById("id_ball");
// alert("배경: "+v_ball.style.backgroundImage+"\n사이즈: "+v_ball.style.backgroundSize);
// alert("배경: "+v_ball.style["backgroundImage"]+"\n사이즈: "+v_ball.style["backgroundSize"]);
var v_wWidth = window.innerWidth;
var v_hHeight = window.innerHeight;
var v_mvW = 10; // 좌우 방향 컨트롤
var v_mvH = 10; // 상하 방향 컨트롤
var isRun = false; //아직 실행되고 있지 않은 상황
function f_proxy() { // proxy는 대리인이라는 뜻
if (!isRun) {
f_mv1();
isRun = true;
}
}
var v_number=0;
var v_gak = 0;
function f_mv1() {
var v_left = parseInt(v_ball.style.left);
var v_top = parseInt(v_ball.style.top);
v_ball.style.left = v_left + v_mvW + "px"; // 단위를 빼먹으면 동작 안함!
v_ball.style.top = v_top + v_mvH + "px"; // 단위를 빼먹으면 동작 안함!
v_left = parseInt(v_ball.style.left);
v_top = parseInt(v_ball.style.top);
// 오른쪽 벽에 닿거나 넘어선다면
if ((v_left + 100) >= v_wWidth || v_left <= 0) {
v_mvW = -v_mvW; // +10 을 -10으로 바꾸어 줌!
}
// 위아래 부딪혔을 때
if ((v_top + 100) >= v_hHeight || v_top <= 0) {
v_mvH = -v_mvH; // +10 을 -10으로 바꾸어 줌!
}
if(v_number>7){
v_number=0;
}
var v_path = "./images/all"+(v_number++)+".jpg";
v_ball.style.backgroundImage="url("+v_path+")";
v_gak=(v_gak+10)%360;
v_ball.style.transform="rotate("+v_gak+"deg)";
setTimeout(f_mv1, 300);
}
</script>
</body>
</html>
transform에 대해 자세히 알아보자
1) 사진 넣기
<body>
<img src="images/all0.jpg" width="200" height="200">
<img src="images/all1.jpg" width="200" height="200">
<img src="images/all2.jpg" width="200" height="200">
</body>
2) 버튼생성
<body>
<input type="button" value="눌러봐" onclick="f_rot()"><br><br>
<img id="all0" src="images/all0.jpg" width="200" height="200">
<img id="all1" src="images/all1.jpg" width="200" height="200">
<img id="all2" src="images/all2.jpg" width="200" height="200">
</body>
3) onclick함수 구현
<script>
var v_mon0 = document.getElementById("all0");
var v_mon1 = document.getElementById("all1");
var v_mon2 = document.getElementById("all2");
var v_gak = 0;
function f_rot() {
v_gak = (v_gak + 15) % 360;
v_mon0.style.transform = "rotateX(" + v_gak + "deg)";
v_mon1.style.transform = "rotateY(" + v_gak + "deg)";
v_mon2.style.transform = "rotateZ(" + v_gak + "deg)";
}
</script>>> z축으로 도는 것이 default값!!
4) setTimeout
setTimeout(f_rot, 50);더보기
>> 전체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="눌러봐" onclick="f_rot()"><br><br>
<img id="all0" src="images/all0.jpg" width="200" height="200">
<img id="all1" src="images/all1.jpg" width="200" height="200">
<img id="all2" src="images/all2.jpg" width="200" height="200">
<script>
var v_mon0 = document.getElementById("all0");
var v_mon1 = document.getElementById("all1");
var v_mon2 = document.getElementById("all2");
var v_gak = 0;
function f_rot() {
v_gak = (v_gak + 15) % 360;
v_mon0.style.transform = "rotateX(" + v_gak + "deg)";
v_mon1.style.transform = "rotateY(" + v_gak + "deg)";
v_mon2.style.transform = "rotateZ(" + v_gak + "deg)";
setTimeout(f_rot, 50);
}
</script>
</body>
</html>