고래씌

1. Webstroage ▶ browser에 사용자데이터를 저장하는 html5 표주 api 1) sessionStorage : 서버에 접속한 동안만 기록되고, 세션이 종료되면 데이터를 삭제 2) localStorage : 만료기간이 없이 삭제전까지 데이터가 기록됨 => Cookie나, Session과 달리 서버로 데이터가 전송되지 않는다. 1) 아이템 저장/수정하기 ▶ key, value를 한쌍으로 localStorage 객체에 저장하기 - localStorage.setItem(key, value) 함수 - obj[key] = value ☞ 무조건 문자열로 저장된다! 아이템 저장/수정하기 2) 아이템 가져오기 ☞ getItem(key) key값을 이용하여 값을 가져옴 아이템 가져오기 3) 아이템 삭제 ▶..

■ html파일에 style 태그 1. QnA 폼 만들기 * slideDown()와 slideUp() Q. 반품 언제까지 가능한가요? A. 확인후 답변드리겠습니다. Q. 상품 위치를 알고 싶습니다. A. 배송조회서비스를 이용하세요 Q. 300사이즈도 있나요? A. 네 있습니다 ^^ Q. 판매자와 연락이 안되면 어떡하나요? A. 경찰서에 신고하세요 ▶ $("div").click(function(e){ const $p = $(this).next() } ☞ jqeury 방식으로 선택된 요소를 변수에 담아둘때는 변수명 앞에 $를 붙이고는 한다. ☞ 현재 이벤트가 발생한 div요소 바로 뒤에 있는 요소 ☞ $(this) == $(window.event.target) == $(e.target) ▶if($p.css(..

1. 시각적인 효과 메소드(Effect메소드) : 페이지 내에 애니메이션 효과를 만들기 위해 사용되는 메소드 집합 1) show()와 hid(), toggle() : 선택된 요소가 점점 커지면서 보이고(show), 점점 작아지면서 사라지게(hide)하는 메소드 숨기기 보여주기 토글 2. fadeIn(), fadeOut(), fadeToggle() : 선택된 요소가 점점 투명해지면서 사라지고 점점 선명해지면서 보여지게하는 메소드 숨기기 보여주기 토글

1. 이벤트 핸들러 연결 방법 종류 1) 방법1. 이벤트 메소드를 통한 연결 $("선택자").이벤트메소드(function(){ // 실행내용 }) 클릭해보시오 2) 방법2. on 메소드를 이용한 방법 ▶ on메소드는 이벤트 연결시 하나의 요소에 다중으로 이벤트 부여가 가능하다. ex) $("#test2").on("click",function(){ $(this).css('background','orangered').text('클릭됨') }) 마우스 클릭 및 올려보세요. 3) 방법3 $("상위요소선택자").on("이벤트명","하위요소선택자",function(){ 선택된 상위요소안에 존재하는 하위요소에 이벤트 발생시 실행할 내용을 정의 }) h4 클릭해보시오. h5 클릭해보시오. 4) 동적으로 만들어진 요소에..

1. 부트스트랩 이용 환경 만들기 - 우리는 부트스랩 4.5버전을 이용하겠다. ① 사이트 접속 - 버전 4.5 선택 후, CSS와 Bundle를 복사하여 head태그에 붙여넣기 https://getbootstrap.com/docs/4.5/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com ② 11_종합응용예시.html 2. 게시판 리스트 글빈호 제목 작성자 조회수 작성일 3 세번째 글..

■ 모든 html파일에 아래와 같은 style 적용 1. each 메소드 - 배열의 모든 인덱스에 순차적으로 접근하고자 할 때, 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때, 사용하는 forEach함수와 유사하게 수행되는 메소드 [표현법] 1) $.each( 객체/배열 , function(){ // 수행내용 }) 2) $(객체/배열.each(function(){ // 수행내용 }) ☞ 순차적으로 객체/배열의 인덱스에 접근할 때마다 함수가 실행, 매개변수는 생략 가능 ▶ 만약 반복문의 매개변수로 객체를 제시했다면, - 콜백함수의 첫번째 매개변수로는 순차적으로 접근된 객체의 속성명(키)이 담김 - 두번째 매개변수로는 해당 속성값(밸류)이 담김 ▶ 만약 배열을 제시했다면, - 콜백함수의 첫번째..

■ 모든 html파일에 아래와 같은 style 적용 1. 동적으로 요소 생성 ▶ 버튼을 클릭하면 동적으로 요소가 생성되도록 적용시켜보겠다. script태그 안에 작동하는 구문을 추가해보도록 하겠다. 요소 생성 $(function(){ $("#btn").click(function(){ // 이 안에서 작성 }) }) ☞ id 가 "btn"인 button 태그 클릭시 동작하도록 설정 ① 문자열로 생성하는 방법 const el1 = "Create Element By Text"; ② DOM 메소드로 만드는 방법(createElement, create TextNode, ...) ☞ createElement : 지정한 tagName 의 HTML 요소를 만들어 반환 ☞ createTextNode : 텍스트 노드를 반..

1. Content 영역 관련 메소드들 1) html("문구") 메소드 : innerHTML 속성과 관련된 메소드 ▶ 선택된 요소의 content영역을 리턴해주거나 또는 변경해주는 메소드 - $("선택자").html() : 선택된 요소의 content영역의 값을 "반환"해줌 - $("선택자").html("문구") : 선택된 요소의 content 영역 값을 해당 문구로 변경해줌 네이버로 ☞ .html(); id 가 test1인 태그를 가져오는데 html 태그까지 다 포함하여 가져온다. ☞ $("#test2").children().attr("href","http://naver.com"); - 네이버로 이동하는 하이퍼링크를 삽입하고 싶다면 "attr" 함수 이용하면 된다. => 하이퍼링크가 추가된 것을 볼 수..

■ html 파일에 .wrap 클래스에 style적용 1. 탐색 (순회) 메소드 - 동위 메소드 : 같은 레벨에 있는 요소들을 선택할 수 있는 메소드 - $("선택자").siblings() 선택된 요소와 같은 레벨에 있는 모든 요소들 선택 - $("선택자").siblings("선택자") 선택된 요소와 같은 레벨에 있는 요소들 중 제시한 선택자와 일치하는 요소만 선택 - $("선택자").next() 선택된 요소와 같은 레벨에 있는 요소들 중에서 바로 다음 요소 딱 하나만 선택. + 선택자와 비슷 - $("선택자").nextAll() 선택된 요소와 같은 레벨에 있는 요소들 중에서 바로 다음 요소들 전부 선택. ~ 선택자와 비슷 - $("선택자").nextUntil("선택자") 선택자 요소와 같은 레벨에 있는..

▶ head 태그 => 모든 class wrap에 아래와 같은 style 부여 1. 탐색(순회) 메소드 - 자손 메소드 : 기준이 되는 요소의 하위요소들을 선택할 수 있는 메소드 - $("선택자").children() 선택된 요소의 모든 자손(바로 하위)요소들을 선택 - $("선택자").children("선택자") 선택된 요소의 모든 자손요소들 중에서 제시한 선택자와 일치하는 요소들만 선택 - $("선택자").find("선택자") 선택된 요소의 모든 후손요소들 중에서 제시한 값과 일치하는 요소들만 선택 ▶ $(".wrap").children().css(style1); ☞ 바로 wrap 클래스의 자손인 요소에 styel1 속성 적용 ▶ $(".wrap").children().children().css(st..