혁신을 이룹니다, 오딘박스(OdinBOX)

언제나 어디서나 오딘박스와 함께!

클라이언트사이드프로그래밍, 11-18

간지뽕빨리턴님 2019. 11. 25. 15:01
반응형
  클라이언트사이드

week12_01.html (했던 것들 한번씩 복습하기)

마우스핸들러 사용하는 법을 배움

[이번 시간 실습 예제]


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="ko" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!---------------------------------------!>
      <style media="screen">
        div {
          border : 1px solid blue;
          width : 100px;
          height : 100px;
          text-align : center;
          vertical-align : middle;
          line-height : 100px;
          left : 300px;
          top : 300px;
          position : absolute;
        }
        </style>
 
    <!---------------------------------------!>
      <script type="text/javascript">
        // 박스의 초기 위치
        let divLeft = 0;
        let divTop = 300;
        let handleGo = null;
 
        function moveDiv(left,top) {
          let aDiv = document.querySelector("div");
          aDiv.style.left = left + 'px';
          aDiv.style.top = top + 'px';
          aDiv.innerHTML = `(${divLeft}, ${divTop})`;
        }
        function goRight() {
          divLeft += 10;
          moveDiv(divLeft, divTop);
        }
        function moveStop() {
          clearInterval(handleGo);
        }
        window.onload = function () {
          // 박스 위치를 초기화 한다.
          moveDiv(divLeft, divTop);
          handleGo = setInterval(goRight, 100);
 
          // STOP 버튼의 click 이벤트 핸들러 등록한다.
          document.getElementById("moveStop").addEventListener("click", moveStop);
        }
 
      </script>
    <!---------------------------------------!>
 
  </head>
  <body>
    <h1>Div Moving Control</h1>
    <hr>
    <button type="button" id="moveLeft">Left</button>
    <button type="button" id="moveRight">Right</button>
    <button type="button" id="moveStop">Stop</button>
    <hr>
    <div>Javascript</div>
  </body>
 
 
 
 
</html>
 cs

 

[한번 해보라~]스탑 누르기 전까진 계속 움직이는데 오른쪽 벽에 부딪히면, 움직여야함

틱텍톡~

 

포지션(Position) - CSS의 위치를 결정하는 태그

 

static - 첫 상태는 모두 static [굳이 안적어도 됨]

relative - 태그 위치를 살짝 변경 가능

- top(위), right(오른쪽), bottom(아래), left(왼쪽)

absolute - static 속성을 가지고 있지 않은 '부모'기준 이동

부모 포지션 중 "relative, absolute, fixed" 없다면,

가장 위 태그(Body)가 기준

 

fixed -  상단 로그인바처럼 고정포지션, 스크롤을 하여도 그 자리에 있다.

 

참고 : ZeroCho (https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1)

 

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

“ 매주 목요일마다 당신이 항상 하던대로 신발끈을 묶으면 신발이 폭발한다고 생각해보라.
컴퓨터를 사용할 때는 이런 일이 항상 일어나는데도 아무도 불평할 생각을 안 한다. ”

- Jef Raskin
맥의 아버지 - 애플컴퓨터의 매킨토시 프로젝트를 주도

'DEVELOPMENT/Clientside'의 다른글

  • 현재글클라이언트사이드프로그래밍, 11-18

관련글

댓글

티스토리툴바