JavaScript & JQuery 썸네일형 리스트형 HTML 5 저장소(세션스토리지,로컬스토리지) 및 쿠키 웹 개발을 하다보면 데이터베이스에는 저장하지 않지만, 사용자가 설정한 값을 어딘가에 저장해야할 경우가 생깁니다. (자동로그인, 아이디 저장 기능 사용 여부 등) 오늘 소개해드리려고 하는 내용은 쿠키 및 HTML5에서 제공하는 세션스토리지 및 로컬 스토리지에 대한 내용입니다. 1. 쿠키 1-1. 쿠키의 특징 - 키 - 벨류 형태로 저장되며, 클라이언트에서 서버측으로 요청 시 마다 전달된다. - 4kb 의 용량 제한이 있다. - 같은 도메인간에는 쿠키값이 공유된다. 1-2. 쿠키의 장점 - 웹 요청 시 자동으로 쿠키가 전달된다. 1-3. 쿠키의 단점 - 웹 요청 시 마다 쿠키가 전달되므로, 불필요한 요청값이 포함 될 수 있다. - 클라이언트에서 쿠키 값 설정/조회 시 별도의 함수를 만들어 호출하여야 한다. .. 더보기 자주사용하는 JQuery 속성(CSS), 추출 함수 # 자주사용하는 JQuery 속성(CSS), 추출 함수 $(" ").addClass() 지정한 요소에 class값을 추가 $(" ").hasClass() 지정한 요소에 class 유무를 확인 $(" ").removeClass() 지정한 요소에 class값을 제거 $(" ").attr() 지정한 요소의 속성값을 입력 or 변경 $(" ").removeAttr() 지정한 요소의 속성값을 제거 $(" ").css() 지정한 요소의 css값을 삽입 or 변경 , 지정한 요소의 속성값을 가져옴 $(" ").width() 선택한 요소의 현재의 계산된 넓이를 얻거나 넓이 값을 설정 $(" ").innerWidth() 선택한 요소의 패딩을 포함한 넓이를 반환 $(" ").outerWidth() 선택한 요소의 패딩, 보.. 더보기 자주사용하는 JQuery 확장 함수 # 자주사용하는 JQuery 확장 함수 $.noop() 비어있는 함수(function){} $.noConflict() 다른 자바크스립트 라이브러리와 함께 사용할 때 $의 충돌을 막기 위해 사용 $.sub() 새로운 제이쿼리 함수를 정의할때 , 네임스페이스의 충돌로 다른 개발자의 함수에 영향을 주지 않도록 캡슐화된 플러그인을 만들때 $.sub()로 복사하여 사용 더보기 자주사용하는 JQuery 변경/변환 함수 # 자주사용하는 JQuery 변경/변환 함수 $(" ").text() 해당 요소에 text요소를 삽입 또는 변경 $(" ").html() 해당 요소에 html요소를 삽입 또는 변경 $(" ").val() 해당 요소의 value값을 삽입 또는 변경 $(" ").replaceAll() 해당 요소들로 인자 요소를 대체 $(" ").replaceWith() 해당 요소들을 인자의 요소로 바꿈 $(" ").toArray() 선택한 요소 DOM 집합을 자바스크립트 배열로 만듬 $.merge() 두개의 배열을 첫번째 배열에 합침 $.trim() 문자열 앞뒤에 있는 공백 문자를 제거하고 결과 반환 $.unique() element 배열의 중복된 모든 element를 제거, string,number 배열에서는 동작 안함 .. 더보기 자주사용하는 JQuery 삭제 함수 # 자주사용하는 JQuery 삭제 함수 $(" ").detach() 지정한 요소를 포함 하위 요소 모두 제거 $(" ").empty() 지정한 요소의 하위 요소를 제거 $(" ").remove() 지정한 요소를 포함 하위 요소 모두 제거, + 관련된 이벤트 데이터 모두 제거 더보기 자주사용하는 JQuery 삽입 함수 # 자주사용하는 JQuery 삽입 함수 $(" ").after() 지정한 요소 뒤에 새로운 요소 삽입 $(" ").insertAfter() 지정한 요소 뒤에 새로운 요소를 삽입 $(" ").append() 지정한 요소 뒤에 내용 삽입 $(" ").appendTo() 지정한 요소 뒤에 내용 삽입 $(" ").before() 지정한 요소의 앞에 요소를 삽입 $(" ").insertBefore() 지정한 요소 앞에 요소를 삽입 $(" ").prepend() 지정한 요소 앞에 내용 삽입 $(" ").prependTo() 지정한 내용을 요소 앞에 삽입 $(" ").wrap() 선택한 요소 각각을 문자열 또는 객체로 감싼다. $(" ").unwrap() 선택한 요소 집합의 부모를 제거한다. $(" ").wrapAl.. 더보기 자주사용하는 JQuery 함수 제어 함수 # 자주 사용하는 JQuery 제어 함수 $(document).ready(function(){ }); 웹 페이지 문서가 준비되면 다음 내용을 실행함 $(" ").click(function(){ }); 클릭 시 다음 내용을 실행함 $(" ").hide("slow"); 해당 요소가 페이지에서 천천히 사라짐 $(" ").show("fast"); 해당 요소가 페이지에서 빠르게 나타남 $(" ").slideUp(); 해당 요소가 위로 슬라이드해서 사라짐 $(" ").add(" ") 요소를 추가 선택 $(" ").not(" ") 선택된 확장 집합에서 해당하는 요소를 제거 $(" ").children() 요소의 고유한 자식으로 구성된 확장 집합을 반환함 $(" ").contents() 선택한 요소의 고유한 자식으로 .. 더보기 인코딩 관련 함수 웹 개발을 하다보면 클라이언트 서버 간 데이터를 주고받을때 데이터가 깨지거나, 원하는 값을 제대로 전달받지 못하는 경우가 발생합니다. 클라이언트서버간 데이터를 주고받을 때 XML, URL 파라메터, 한글, 특수문자등의 데이터를 인코딩/디코딩 함수를 통하여 변환을 적절하게 해주어야 합니다. 1. Javascript 인코딩 관련 함수 escape()A~Z, a~z, 1~0 , @*-_+./ 등이 아스키문자가 아니라면 모두 유니코드 형식으로 변환 encodeURI()escape()와 비슷하지만 인터넷 주소 표시에 쓰이는 특수문자들 (:;/=?&)등의 특수문자는 인코딩이 되지 않음 . 보통 파라미터를 전달하는 인터넷주소(URL) 전체를 인코딩 할 때 사용 encodeURIComponent()encodeURI().. 더보기 이전 1 다음