<백틱 문자열>
- 여러개 문자열을 +를 쓰지 않고 나타낼 수 있음
- 백틱(``): 키보드 ~ 위에 표시된 것
- `$(변수명)`
-
const num = 0; const str = `내 순서는 ${num} 입니다.`;
<sortable>
- drag를 통해 자식 순서를 바꿀 수 있는 list
1) html <head>에 <script> 삽입
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
2) sortable을 적용하고 싶은 리스트 태그(div, ul 등등) id를 위에서 설정한 것과 동일하게 설정
- 여기서는 sortable(다른 이름으로 하고싶다면 바꾸어도 상관X)
- script function id = 리스트 태그 id
-
<ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul>
[참고] sortable jquery
https://jqueryui.com/sortable/
Sortable | jQuery UI
Sortable Reorder elements in a list or grid using the mouse. Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable prope
jqueryui.com
<File API>
- onchange 이벤트 핸들러를 붙여, 파일을 선택할 때마다 콜백 함수가 호출
[참고] 코드 참고
JavaScript - 이미지 업로드 미리보기 만들기
input 태그에서 선택한 이미지를 화면에 바로 출력하도록 해보자. 코드 썸네일 만들기 input 태그에서 onchange 속성에 실행될 메소드를 정해줍니다. 메소드 내에서 FileReader 객체를 생성
sinna94.tistory.com
[참고]
https://www.zerocho.com/category/HTML&DOM/post/592827558653d6001804a0a5
(HTML&DOM) File API - 이미지 미리보기
안녕하세요. 이번 시간에는 HTML5와 자바스크립트로 파일을 읽는 File API에 대해 알아보겠습니다! 파일을 읽는 김에 쓰기도 하지, 왜 읽기만 하냐고요? 브라우저가 사용자의 컴퓨터에 파일을 쓰게
www.zerocho.com
https://greatps1215.tistory.com/5
[Part2] Jquery 다중 파일 업로드 미리보기 제공하기, 삭제, POST업로드
JQuery 다중 파일 업로드시 미리 보기 제공하기. JQuery 다중 파일 업로드시 미리보기 삭제하기. JQuery 다중 파일 업로드시 POST 전송. JQuery 다중 파일 업로드시 서버에 파일 전송. 완성 코드 버전입니
greatps1215.tistory.com
'주간 학습 > 주간 학습' 카테고리의 다른 글
| 5주차_210726 (0) | 2021.07.27 |
|---|---|
| 4주차_210723 (0) | 2021.07.23 |
| 4주차_210721 (0) | 2021.07.22 |
| 4주차_210720 (0) | 2021.07.22 |
| html 유용한 단축키 (0) | 2021.07.16 |
