[21.09.07]

yed·2021년 9월 7일

web

마우스 이벤트

onmouseover: 마우스 커서가 영역 위로 올라왔을 때
onmousedown: 마우스를 누르고 아직 up이 안된 상태
onmouseup: 마우스를 눌렀다가 땠을 때(down -> up)
onmouseout: 마우스가 해당 영역을 벗어났을 때

이벤트 핸들러

이벤트 핸들러 등록 방법 1

element.event = function() {};

하나의 이벤트만 등록할 때 사용.

이벤트 핸들러 등록 방법 2

element.addEventListener(event, function, useCapture);

event : 이벤트 이름(click, mouseover, ...)
function : 이벤트 핸들러(리스너) -> 필수
useCapture : true / false -> 선택(기본값 false)

하나의 이벤트에 여러 개의 이벤트 핸들러를 등록할 수 있음

Window 객체

브라우저 창. HTML 객체의 최상위 객체

window.onload

자바스크립트는 html보다 뒤에 실행되야하는데 head에 선언할 경우 html 요소들이 생성되기 전이라 시점문제가 발생합니다.

window.onload=function(){}; 안에 스크립트코드를 작성해 HTML문서를 모두 로딩해서 화면(window)의 로딩이 끝났을 때 해당 함수가 생성되게끔 해주는 이벤트입니다.

모든 자바스크립트 코드는 window.onload 이벤트 리스너이며 함수 내부에서 작성하는게 좋음

장점

1) 모든 DOM 객체들이 생성된 후에 getElement를 실행하기 때문에 안심하고 사용할 수 있습니다.
2) 모든 변수가 이벤트 리스너의 지역변수가 되기 때문에 의도치않게 window 객체를 가지고있는 전역변수(프로퍼티)를 변경하는걸 방지합니다.

DOM(Document Object Model) : html, head, body, ...

BOM(Browser Object Model) : Window, Screen, Location, History,...

location 객체

window.location.href : 현재 브라우저 주소
window.location.protocol : http, https 등등 현재 프로토콜
window.location.hostname : 현재 ip
window.location.assign(url) : 현재 창에서 url로 페이지 이동
window.open(url) : 새 탭에서 url페이지 열기

history 객체

window.history.back : 뒤로가기
window.history.forward() : 앞으로가기

Bootstrap

<!-- 모바일 디바이스에서 터치/줌 등을 지원하기 위한 meta 태그 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

모바일 UI와 웹 UI 둘다 지원하는 반응형 웹 프레임워크입니다. 부트스트랩은 class로 접근해요

  <div class="container-fluid">
    <div class="row"> 
      <div class="col" style="background-color: red;">.col</div> 
      <div class="col" style="background-color: blue;">.col</div>
      <div class="col" style="background-color: green;">.col</div>
      <div class="col" style="background-color: orange;">.col</div>
    </div>
  </div>

같은 크기의 div가 col만큼 한행에 존재하게끔 영역을 나눈다.

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4" style="background-color: lavender">.col-sm-4</div>
      <div class="col-sm-8" style="background-color: lavenderblush">.col-sm-8</div>
    </div>
  </div>