문제1. 버튼 클릭시 그림을 위,아래, 양 옆으로 움직여 보세요.
CSS transition, transform 속성을 사용해보세요.
그림은 kim1.png를 사용하세요.
문제2. 버튼 클릭시 그림이 회전 되게 해보세요.
문제3. 그림을 원래 상태로 리셋해보세요.
목적1. css의 transition 속성과 transform 속성을 사용할 수 있다.
목적2. img요소에 src 속성을 사용할 수 있다.
목적3. 문자열과 숫자열을 합칠 수 있다.
목적4. margin과 padding의 차이점을 안다.
답
<body>
<!--
1. button을 만들고 이미지를 불러온다.
2. javascipt를 실행할 수 있도록 버튼에 onclick 속성을 넣어 준다.
3. 실행한 javascript img에서 출력할 수 있도록한다.
-->
<button onclick="moveRight();" >오른쪽</button>
<button onclick="moveLeft();" >왼쪽</button>
<button onclick="moveUp();" >위</button>
<button onclick="moveDown();" >아래</button>
<button onclick="turn();" >회전</button>
<button onclick="reset();" >리셋</button>
<br/>
<img src="./images/kim1.png" id="gura">
<script>
// 문제1
/*
1. img를 옮기기 위해서는 margin에 값을 늘려주는 것이 좋다.
(padding의 값을 늘려주는 것은 입고 있는 옷의 크기를 늘리는 것과 비슷함으로 별로 좋지 않음)
2. HTML 문서 객체에 inline으로 style을 입력하는 방법
style.css속성
css 속성 작성시에는 camelCase방법으로 작성해준다.
*/
/*
1. img#gura에 style 속성과 값을 주는 코드를 작성한다.
2. button을 클릭할때마다 margin값을 추가해야 하므로
산술연산자 필요.
*/
var rightLeft=0;
var moveRight=function(){
rightLeft=rightLeft+100;
document.querySelector("#gura").style.marginLeft=rightLeft+"px";
};
var moveLeft=function(){
rightLeft=rightLeft-100;
document.querySelector("#gura").style.marginLeft=rightLeft+"px";
};
var upDown=0;
var moveUp=function(){
upDown=upDown-100;
document.querySelector("#gura").style.marginTop=upDown+"px";
};
var moveDown=function(){
upDown=upDown+100;
document.querySelector("#gura").style.marginTop=upDown+"px";
};
//문제2
var imgDegree=0;
var turn=function(){
imgDegree=imgDegree+10;
document.querySelector("#gura").style.transform="rotate("+imgDegree+"deg)";
};
//문제3 리셋하기
//풀어봐야함.
</script>
</body>
'Javascript' 카테고리의 다른 글
| IF 구문 (0) | 2019.11.06 |
|---|---|
| 달리는 캐릭터 만들기 (0) | 2019.11.05 |
| 버튼 클릭시 자동 계산 되도록하기 (0) | 2019.11.05 |
| 입력된 내용 출력하기 (0) | 2019.11.05 |
| 카운트 올리기, 줄이기, 리셋 (0) | 2019.11.05 |
