<head>
<title>Step07_example</title>
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: yellow;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="one"></div>
</body>문제
박스를 클릭할때마다 오른쪽으로 움직이게 해보세요.
1. top, right, bottom, left는 CSS의 position 속성으로 현재 좌표를 알려줘야 javascript로 움직일 수 있음.
(margin,padding, border, contents 등은 알려주지 않아도 됨.)
답
<head>
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: yellow;
cursor: pointer;
/* 1. box의 원래 배치된 위치를 표기해줌 */
position: relative;
}
</style>
</head>
<body>
<div class="box" id="one"></div>
<script>
//2. left값을 초기화해줌
var left=0;
//3. 클릭했을때 이벤트가 일어날 수 있도록 코드 작성
document.querySelector("#one").addEventListener("click",function(){
//4. left값이 100씩 증가하도록 코드 작성
left+=100;
//5. div요소의 inline으로 style 속성을 넣어줌
document.querySelector("#one").style.left=left+"px";
});
</script>
</body>'CSS' 카테고리의 다른 글
| 메뉴만들기 연습2 (0) | 2019.11.20 |
|---|---|
| 메뉴만들기 연습1 (0) | 2019.11.19 |
| 이미 만들어져 있는 css요소를 div에 적용해보기 (0) | 2019.11.19 |
| p 요소 변경하기 (0) | 2019.11.19 |
| 가상클래스 PseudoClass / 가상요소 PseudoElement (0) | 2019.11.19 |
