5주차_210726

<font 적용하기>

1. google fonts 검색

• 원하는 글꼴을 찾고 'select this style'을 눌러 원하는 글꼴을 선택함
• https://fonts.google.com/

Google Fonts

 

2. import 하기

1) import 방식

• @import url(' ') 부분을 복사하여 css파일 복붙

3. css에 font-family 추가

• 해당 코드를 복붙하여 css body{}에 추가

[참고]

https://velog.io/@jehjong/CSS%EC%97%90-%ED%8F%B0%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%9B%B9%ED%8F%B0%ED%8A%B8-%ED%8F%B0%ED%8A%B8-%ED%8C%8C%EC%9D%BC

CSS에 폰트 적용하기 (웹폰트 & 폰트 파일)

 

<input file type 검사하기>

// file 타입 검사(이미지 파일만 선택 가능)
function validFileType(file) {
  // 이미지 파일이면
  if (file.type.match("image.*")) {
    return true;
  } else {
    alert("이미지 파일을 선택해주세요.");
    return false;
  }
}

 

[참고] 코드 참고

https://hianna.tistory.com/345

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

[참고] 코드

https://greatps1215.tistory.com/5

[Part2] Jquery 다중 파일 업로드 미리보기 제공하기, 삭제, POST업로드

 

<drag and drop event>

drag	dragstart	drag 시작
	drag	drag 중
	dragend	drag 종료
	dragenter	drag 요소가 drop 영역에 들어감
	dragover	drag 요소가 drop 영역에서 drag 중
	dragleave	drag 요소가 drop 영역에서 나감
	drop	drag하던 대상을 놓는 장소에 위치한 객체에서 발생

[참고]

http://tcpschool.com/html/html5_api_dragAndDrop

코딩교육 티씨피스쿨

[참고]

https://heeestorys.tistory.com/808

[jQuery] 드래그 & 드랍 구현 - on()[이벤트리스너]

 

<drag and drop>

1. dragover event

• dragover 기본 동작 막기

function dragOverHandler(ev) {
  console.log("File(s) in drop zone");

  // 다른 요소 위에 위치할 수 있도록 놓일 장소에 있는 요소의 기본 동작 막기
  ev.preventDefault();
}

 

2. drop event

• drop 기본 동작 막기
• drop한 객체가 파일일 때만 코드 실행
• getAsFile(): 파일 객체 반환

function dropHandler(ev) {
  console.log('File(s) dropped');

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
      // If dropped items aren't files, reject them
      if (ev.dataTransfer.items[i].kind === 'file') {
        var file = ev.dataTransfer.items[i].getAsFile();
        console.log('... file[' + i + '].name = ' + file.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
    }
  }
}

 

 

[참고] mdn 예제

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

File drag and drop - Web APIs | MDN