목록웹개발 (17)
꿈 많은 사람의 이야기
완성된 코드는 아래 github 주소에 있습니다! 도움이 되셨다면 좋아요와 깃허브 스타를 눌러주세요! 저에게 있어 큰 힘이 됩니다 ㅠㅠhttps://github.com/lsjsj92/django_todo_app 지난번 포스팅에서 django와 REST API를 연동해서 개발을 진행해봤습니다. 생각보다 어렵지 않은 작업이었죠? 이제 이 작업을 기반으로 detail view를 만들어봅니다. 지난번 포스팅이 list view였다고 생각하시면 됩니다. 하지만 이번 과정에서 조금 수정을 해주겠습니다. 만약, REST API를 활용해 웹 개발을 하시면 이것은 기존에 웹 게시판을 개발한 것과는 다릅니다. 기존 게시판은 단순히 웹과 DB가 연동해서 진행되었지만 이제는 REST API 서버가 DB를 바라보고 웹은 RES..
완성된 코드는 아래 github 주소에 있습니다! 도움이 되셨다면 좋아요와 깃허브 스타를 눌러주세요! 저에게 있어 큰 힘이 됩니다 ㅠㅠhttps://github.com/lsjsj92/django_todo_app 파이썬 장고(django)로 웹 개발하는 시리즈를 오랜만에 올립니다. 이미 내용은 다 있지만 블로그에 올릴 시간이 없었네요 ㅎㅎ 지난번 내용은 장고와 Ajax를 연동시켜서 웹 개발을 하는 것까지 진행했습니다. (https://lsjsj92.tistory.com/490) 이번 포스팅부터는 django와 REST API를 연동하는 작업을 진행하려고 합니다. REST API는 굉장히 많이 들어보셨을겁니다. RESTful API 라고도 하죠. REST API는 HTTP의 기능도 지원해줘서 HTTP의 장점..
자바스크립트로 폰트 변경 등의 효과를 넣어보자! 아래 사진 처럼말이다 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 Title var zoom = function(demo){ //함수 호출 -> 인자값으로 아이디를 받는다. demo.style.color = 'red'; demo.style.fontSize = '34pt'; }; window.onload = function () { var h = document.getElementById('hideBtn'); var op = document.getElement..
지난 글까진 펄 설치와 이클립스 연동에 대해서 알아봤습니다. 이제 펄과 아파치를 연동하는 방법을 작성해볼까 합니다.웹 프로그래밍을 위해서!!먼저 아파치를 설치해야겠죠? http://www.apachelounge.com/download/ Apache VC15 binaries and modules download Apache 2.4 VC15 Windows Binaries and Modules Apache Lounge has provided up-to-date Windows binaries and popular third-party modules for more than 10 years. We have hundreds of thousands of satisfied users: small and big comp..
자바스크립트의 배열은 객체이다. 무늬만 배열이다. 자바스크립트 배열은 2가지가 있다. 1. 일반적 배열 리터럴인 var a = ["aa", 123]; 2. var points = new Array(40, 100) 2가지의 방법이 있고 내부적으로 동일하다. 근데 2번 방법에는 조심해야할 문법이 있다. 위에 써져 있는 2번과 같은 형태는 40, 100이라는 값이 배열에 들어가있다. 하지만 만약 var points = new Array(40); 을 하면 배열 크기가 40인 객체를 생성하는 것이다. 이것을 조금 조심해야 한다! 그리고 자바스크립트에서 배열은 좀 특이한게 자바에서 배열은 String이면 String, int면 int만 가능했다. 하지만 자바스크립트에선 배열 요소가 달라도 상관없다. 문자열, 숫자,..
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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 12..
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 Document var index = 0; //이미지에 접근하는 인덱스 window.onload = function(){ slideShow(); } function slideShow() { var i; var x = document.getElementsByClassName("slide1"); //slide1에 대한 dom 참조 for (i = 0; i x.length) { index = 1; //인덱스가 초과되면 1로 변경 } x[index-1].style.display = "block"; //해당..
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 Document div#area{ font-size: 30px; } 시작단: 종료단: 구구단 출력 var area = document.getElementById("area"); //아이디가 area인 DOM(document object model, 문서 객체 모델) 생성(참조) var gugudan = ""; var btn = document.getElementById("sBtn"); btn.onclick = function(){ var start = Numbe..
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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 Document #topMenu ul{ overflow: hidden; } #topMenu li{ width: 200px; height: 40px; border: 1px solid red; floa..
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 68 69 70 이미지갤러리 #imgGallery{ border: 3px solid orange; width: 300px; overflow: hidden } #imgGallery img{ width: 300px; } #smallImgs img{ float:left; width: 100px; } hr{ margin: 0; padding: 0; size:5px; } wi..