Light Purple Pointer
Dom 응용실습
·
FRONTEND/기타
jQuery Dom 사용 버튼 1 첫번째 문장입니다. 두번째 문장입니다. script 만약 p태그의 para1의 color와 background color을 바꾸자고 한다면 $("p.para1").css("color", "red"); $("p.para1").css("background", "yellowgreen"); 이렇게 작성했을 것이다. 위의 두 줄을 한줄로 줄여서 아래와 같이 사용가능하다. // css를 여러개 입력 시 객체형식으로 가능{키:'값',....} $("p.para1").css({ color: "red", background: "yellowgreean" }); 그리고 아예 css를 따로 만들어서 원하는 태그를 선택하여 클래스를 추가해 줄 수 있음. 예) .myclass 추가 .myclas..
jQuery - event
·
FRONTEND/기타
jQuery cdn head에 넣음 셀렉터 html 복사해서 수정 jQuery 이벤트 Mouse Events Button 1 Button 2 $("#btn1").click(function(){ alert('Button Clicked!"); }); = id btn1을 클릭하면 alert함수가 실행된다. 실행 결과 button1를 클릭하면 alert 창이 뜸 button2를 클릭하면 아무런 이벤트가 발생하지 않음. 원래 script 는 body태그 제일 하단에 쓰는데 , 아래와 같이 코드를 작성하면 script를 어디에 작성하던 HTML이 준비되면 해당 내용 실행함 button1을 누르면 해당 내용을 숨기고 button 2를 누르면 숨겨놓은 내용을 다시 보이게 만들어 보기 Mouse Events Button..
jQuery ?
·
FRONTEND/기타
jQuery는 자바스크립트 라이브러리임 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com /**사용방법 1. cdn 사용 2. 다운로드 받아서 파일주소 링크 **셀렉터(Selector) jQuery 시작하기 Heading One Lor..
id로 DB검색하여 결과 출력
·
FRONTEND/기타
MySQL 테이블 생성 ex1.html 복사해서 ex2.html 만들기 아이디 입력 시 DB검색해 결과 출력 아이디 입력 : ID중복체크 getDB.jsp 생성 dbconn.jsp ID 중복체크 버튼 클릭하지 않더라도 검색창에 입력만 하면 바로 검색되도록 만들기 ex2.html 수정 아이디 입력: input에 onkeyup ="sendServer()" 추가 아이디 입력 시 DB검색해 결과 출력 아이디 입력 : ID중복체크
AJAX로 구구단 출력
·
FRONTEND/기타
index.html 복사해서 ex1.html 생성 원하는 구구단의 숫자? 출력하기 gugu.jsp 생성
AJAX를 이용해 서버에서 계산하여 결과 출력하기
·
FRONTEND/기타
web.xml -> index.html 파일만 남기고 다 삭제 AJAX index.html index.html 생성 1부터 빈칸에 적은 숫자까지 총합은? 계산하기 sum.jsp 생성 1) 파라미터 전송받은 값 잘 출력되는지 확인 하기 화면은 바뀌지 않고 데이터만 왔다 갔다함 응답을 자바스크립트로 받아서 콘솔에 출력 index.html console.log(val) => output.textContent=val; 로 수정 화면출력 출처 : https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest. (request.readyState == 4 && request.status == 200) 에 대한 내용 readyState 4 = 데이터를 전부 받은 상태 ,..
JSON 란?
·
FRONTEND/기타
JSON 란? JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어짐 데이터 전송 시 많이 사용한다. 네트워크를 통해 데이터를 주고 받는데 자주 사용됨. 구조 및 특징 미디어타입(Media type) => application/json 파일 확장자 .json 중괄호로 시작 / 끝 { } 이름과 값의 쌍으로 이루어집니다. => "이름" : 값 여러개일때 쉼표(,)로 구분합니다. 예) - 자바스크립트 예시 // 앞의 키 값이 문자열이 아님 제이슨 배우기 JSON 과 Object 차이 JSON 문법 체크 사이트 https://jsonlint.com/ JSON Online Validator and Formatter - JSON Lint Loading... About the JSONLint Editor..
색상 코드 사이트
·
FRONTEND/기타
https://colorhunt.co/ Color Palettes for Designers and Artists - Color Hunt Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects. colorhunt.co 원하는 색상 코드 확인가능 원하는 색상 추출 ColorZilla https://www.colorzilla.com/ ColorZilla - Eyedropper, Color Picker, Gradient Generator and more Change language: Čeština Deutsch Ελληνικά English English (B..
무료 아이콘 및 무료 사진 다운로드 사이트
·
FRONTEND/기타
1. 무료 아이콘 박시콘 https://boxicons.com/ Boxicons : Premium web friendly icons for free Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines boxicons.com 폰트어썸 https://fontawesome.com/icons/instagram?f=brands&s=solid Instagram Icon | Font Awesome Instagram icon in the Solid style. Make a bold statement in small sizes.. ..