✿∘˚˳°∘°

20230209 1. modal, flex modal : 기존컨텐츠는 뒤에두고 이용할 컨텐츠를 강조해주는 것 flex : 정렬 시 이용 모달로그인 로그인 로그인 글씨글씨 옵션1 옵션2 옵션3 버튼 .body{ margin: 0; } .modal-wrap{ width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; display: none; justify-content: center; align-items: center; } .login-modal{ background-color: #fff; width: 40vw; min-width: 300px; max-width: 500px; h..

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..