유정잉

[ 웹 프로그래밍이란 ] - 인터넷 쇼핑 -> 브라우저에 주소 입력 -> 브라우저에 요청함 ​ - 요청을 받아 웹 페이지 찾아 주는 것 : 웹 서버​ - 요청된 페이지를 받아보는 브라우저 : 클라이언트 - Html은 정적인 페이지기 때문에 시시각각 변경되는 새로운 정보를 제공해주지 못한다. - 하지만 인터넷은 바로바로 새로운 내용을 제공해주어야 하기 때문에 html만으로는 웹 프로그래밍하는데 한계가 있다. => 그래서 동적인 페이지가 등장함했다 - 동적인 페이지에서 새로운 정보를 제공해주기 위해서는 방대한 정보를 관리할 데이터베이스가 필요 하다 !! Ex) 게시판 -> 디비에 저장되었다가 보여주는 것. 다양한 정보를 데이터베이스에서 얻거나 저장하기 위해 등장한 언어=> php, asp, 서블릿/jsp [..

[ Tomcat 다운로드 & eclipse 연동 ] 1) Google에 톰캣 다운로드 검색 후 버전에 맞게 선택 후 다운로드 ( -> C드라이브에서 압축 풀기 ) 2) [IntelliJ] 인텔리제이 톰캣(Tomcat) 연동 (tistory.com) [IntelliJ] 인텔리제이 톰캣(Tomcat) 연동 Intellij 톰캣(Tomcat) 연동 로컬에 톰캣이 있다는 가정하에 진행하려고 한다. 만일 톰캣이 설치되어 있지 않다면 아래 사이트에서 톰캣을 다운받으면 된다. 나의 경우 9 버전으로 다운받았는데 원하 computer-science-student.tistory.com 3) eclipse -> File -> New -> New Project 3) Web -> Dynamic Web Project 4) Pr..

[ jQuery 응용 해보기 - File Upload 파일 업로드 함수 ] DOCTYPE html> .di{ background-color: rgb(230, 230, 230); padding:30px; } .di .di2{ display: flex; } .di h2{ text-align: center; } .di3{ background-color: whitesmoke; width: 300px; padding: 10px; margin-right: 10px; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; } .di4{ display: flex; align-items: center; } .di4 label{..

[ 제이쿼리 ] 1. css() : 스타일 변경 메서드 $('선택자').css('속성','값'); $('선택자').css('속성':'값', '속성':'값'); ​ 2. children(): 선택자를 기준으로 자식요소 선택하는 메서드 $('선택자').children('선택자'); ​ find(): 선택자를 기준으로 자손요소 선택하는 메서드 $('선택자').find('선택자'); ​ 3. siblings() : 선택자를 기준으로 형제요소 선택하는 메서드 $('선택자').siblings('선택자'); ​ parent() : 선택자를 기준으로 부모요소 선택하는 메서드 $('선택자').parent('선택자'); ​ 4. next(), prev(), nextAll(), prevAll(), nextUntil(), p..

Maven Repository: Search/Browse/Explore (mvnrepository.com) Maven Repository: com.google.code.gson » gson (mvnrepository.com) Gson 사용하는 이유 !!! 나중에 프로젝트 할때 네이버지도, 구글지도등 api 데이터를 가져올 때 필요함 !!! api데이터를 java로 가져오는 법 [ eclipse와 Gson 연결하기 ] 1) Google에 mvn 검색 2) mvn 사이트에서 Gson 검색 3) 클릭 후 최신버전 클릭 -> jar 파일 다운로드 4) 이클립스 -> Build Path -> Configure Build Path -> Class Path 클릭 후 -> Gson 파일 추가 -> Referenced ..

this 있을 때 변수명 obj로 많이 줌 [ DOM 문서 객체 이벤트 ] 1) 문서객체.on이벤트타입명 = 이벤트핸들러; ex) n.onclick=function(); n.onclick=ch; 2) 문서객체.addEventListener("이벤트타입",콜백함수); ex) n.addEventListener('click',function(){}); 3) 문서객체.removeEventListener('이벤트타입',콜백함수); [ JavaScript 이벤트 종류 ] 1) 마우스 이벤트 (click, dbclick, mouseover, mouseout, mousemove...) 2) 키 이벤트 (keydown, keyup, keypress...) 3) 로드 이벤트 (load, resize, scroll...) ..

[ JavaScript DOM 함수 순서 - onload ] - 문서가 준비되었다. window.onload=function() { let n=document.getElementsByTagName("h1"); n[0].style.color='red'; } 자바스크립트 [ JavaScript DOM 접근 함수 - 1 ] - getElementById(); getElementsByClassName(); getElementsByTagName(); => 배열로 접근 가능 자바스크립트1 자바스크립트2 자바스크립트3 let m=document.getElementsByClassName('a'); m[0].style.color='red'; // 배열 형태로 접근 해야지 오류 X / 배열이 길때는 반복문 사용 m[1]...

1. 객체 만들 때 var 객체명 = { 프로퍼티 : 데이터, 프로퍼티 : 데이터, ... 함수 : function } 2. 객체 반환 함수 (생성자 함수) [ 내장 객체 = 코어 객체 ] - String - Number - Math - Array - Date [ JavaScript 객체 프로퍼티와 메서드 ] - 객체 만드는 방법 var car={ // var 객체명 // undefined 는 함수호출 때문 name:'소나타', color:['black','white','gray'], fuel:'가솔린', company:'삼성', show: function(e) { if(e=='on') { alert('시동 켜짐'); } else if(e=='off') { alert('시동 꺼짐'); } } } cons..

[ JavaScript 주석 처리 ] // script 주석 처리 /* 여러행 주석 처리 */ [ JavaScript 종류 ] - 내부 자바스크립트 (파일 안에 쓰는 작업) - 외부 자바스크립트 alert('안녕하세요') [ JavaScript 출력 방법 3가지 ] 1. alert('출력내용'); : 알림창 형태 2. document.write('출력내용'); : 브라우저 안에 body에서 출력 (실무에서 제일 많이 사용 多) 3. console.log('출력내용'); : 오류 체크하기 위해 콘솔창에 출력 (f12 개발자도구 -> 콘솔) alert('안녕하세요'); document.write('안녕하세요'); console.log('안녕하세요'); [ JavaScript 변수 선언 3가지 ] 1. var..

[ CSS 배치 ] - display​ - position​ - left, right, top, bottom​ - float ※ display div{ display: inline-block; /* inline-block은 크기 조절 가능 */ width: 200px; height: 50px; text-align: center; margin: 20px; } #d1{ border: 5px solid black; } #d2{ border: 5px dotted black; } #d3{ border: 5px dashed black; } 실선 점선 점선테두리 ※ display + list-style ul{ list-style: none; } ul li{ display: inline-block; padding: 2..