✿∘˚˳°∘°

20230208 1. [실습]슬라이딩메뉴 1 - 1 ) 슬라이딩메뉴 기본 : 화살표를 클릭하면 다음이미지를 보여주는 메뉴(단, 처음 or 마지막이미지에 도달하면 끝) 이미지 슬라이드 기본 arrow_back_ios arrow_forward_ios .slide-wrap{ width: 1200px; margin: 0 auto; overflow: hidden; position: relative; } .slide-wrap>ul{ margin: 0; padding: 0; list-style-type: none; overflow: hidden; /*width: 3600px;*/ /*이미지하나넓이*갯수 이기때문에 지정하면 지정된 갯수만 사용가능하므로 자바스크립트에서 작성해서 여러이미지를 사용할 수 있게 해줄 것*/ ..

20230207 1. [실습] 스텝메뉴만들기 : 메뉴바를 클릭하면 이동가능(단, 바로 다음단계만 이동가능 step1에서 step3/4는 불가) step2가되면(첫메뉴에서 넘어가면) BACK 버튼 활성화 setp4이되면(마지막메뉴가 되면) NEXT버튼이 DONE버튼으로 변경됨 step1 HTML5 step2 CSS step3 JavaScript step4 jQuery HTML5 설명설명설명 CSS 설명설명설명 JavaScript 설명설명설명 jQuery 설명설명설명 *{ margin: 0; padding: 0; outline: none; } .wrap{ width: 900px; margin: 0 auto; background-color: #f8f8f8; border: 1px sol..

20230206 1. 이벤트 1 - 1 ) 이벤트 연결 ( 인라인, 고전, 표준 ) 이벤트를 연결하는 방법 1. inline이벤트 : 자바스크립트와 동일 onclick = "func1();" 2. 고전이벤트모델 : 요소.이벤트이름(function(){}) 예 : $("btn1").click(function(){}) 3. 표준이벤트모델 : 요소.on("이벤트이름", function(){}) test-1 test-2 test-3 //인라인이벤트모델 function func1(){ console.log("인라인 이벤트 모델!"); } //고전이벤트모델 /* $(".d1").click(function(){ console.log($(this).text()); }); */ //표준이벤트모델 /* $(".d1").o..

20230203 1. 객체조작 - css 1 - 1 ) each(), is() 1. each(), is() each() : 배열을 관리하는 함수로, 선택된 객체들을 모두 순회 is("선택자") : 선택된 요소에 매개변수로 전달된 속성이 있는지 확인하여 true/false 리턴 test-1 test-2 test-3 test-4 test-5 each/is 테스트 function func1(){ const divs = $("#test1>div"); /* for(let i=0; i $(item)을 통해서 jQuery객체로 변환해야 jQuery에서 사용가능 console.log($(item).text()); //그냥 item으로하면 javascript객체이기때문에 innerText로 확인해야함 //is() if(..