[0724] 자바스크립트 DAY 08

캐러셀(carousel 디자인) (이미지 슬라이드)

- 핵심은 태그를 가져와서 스타일을 바꿔준다

- 태그 객체.style.css속성 = 'css값';

 

onload(자바스크리븥 코드는 html이 다 로딩이 되고 실행해라)

- script 가 아래쪽에 있으면 html이 만들어지고, javascript가 실행되기 때문에 웬만하면 오류가 나지 않지만

- 간혹 자바스크립트 속도가 더 빨라서 html이 만들어지기 전에 실행되는 경우가 있다.

- 그러면 querySelector() 를 통해서 태그 객체를 받아와도 html 요소가 없으니 null이 결과로 나오는 경우가 있다.

- 이를 방지하기 위해 javascript 코드 안쪽에서 바로 html을 받아오는 경우에는

window.onload = () => {

로딩이 다 되면 실행될 코드;

로딩이 다 되면 실행될 코드;

로딩이 다 되면 실행될 코드;

로딩이 다 되면 실행될 코드;

로딩이 다 되면 실행될 코드;

}

 

칸반

- 칸반차트(디자인은 css 역량)

- 드래그 앤드 드랍했을 때 정렬되는 방식

 

- html 속성 draggable

(기본으로 draggable인 요소)

텍스트, img

<div draggable></div>

- 해당 요소가 드래그가 가능하다.

 

이벤트

dragstart

-> 드래그가 시작되면 발생하는 이벤트

drag

-> 드래그 되고 있다면 발생하는 이벤트

dragenter

-> 드래그 되는 요소가 특정 요소 안으로 들어갔을 때 발생하는 이벤트

drop

-> 드래그 요소가 손을 떼었을 때 특정 영역 안에 있다면 발생하는 이벤트

 

<div draggable = "true" ondragstart="f()" ondrag = "f2()">