[JavaScript_JQuery] 2021.01.27. DAY_65 css()함수의 사용_이미지위치변경, 바운스볼 만들기
2021. 1. 28. 00:00ㆍWeb_Front-end/JavaScript
※ css() 함수를 사용해서, 속성부여해보기
1. 이미지태그에 접근해서 css함수를 사용하여, 위치를 변경해보기
- id가 man인 이미지태그가 있다
- id로 이미지태그에 접근하여, 속성을 부여한다
- css함수에 매개변수가 2개인 경우와 1개인 경우는 다르다
- css("속성명", "속성값") : 속성을 부여한다
- css("속성명") : 속성값을 가져온다(읽어들인다)
2. 태그에 접근해서, css함수를 사용하여 바운스볼 만들기
- 이미지태그 대신, div태그를 사용하였다
- id가 ball인 div태그에 접근하여, 공모양으로 속성을 부여한다
- 위치를 이동시키기 위해 position 속성도 absolute로 부여한다
- setInterval함수를 사용해서, 입력한 시간마다 반복하여 공의위치가 바뀌게 할 수있다
- 결과적으로
- 화면의 크기가 달라져도, 바뀐 화면에 맞게 대각선 방향으로 튀겨지는 바운스볼을 만들어보자