index.html

요즘 생활코딩 객체지향을 듣고있는데 너무 어려워서 블로그에 정리해보려고 한다.. 그래도 까먹고 잊어버릴것 같지만 안하는것보단 나을것 같으니.. var object = { name:"kim", first:10, second:30; } console.log(object.name)//"kim" 을 출력함. 오브젝트의 생성은 중괄호 안에 프로퍼티와 값을 넣어주고 호출할때는 객체의 이름.프로퍼티 로 작성해서 호출해 준다. 객체를 이용해서 뭔가를 하고 싶을때 작성하는 방법을 알아보자! var object = { name:"kim", first:20, second:30, sum:function score(){ return object.first+object.second } }; console.log(object.su..

이런 슬라이드를 만들고싶었다.... 내가 할수있는 내에서 바닐라자바스크립트로만 만들고 싶었는데 어떻게 해야하나 고민고민 하다가 일단 만들기 시작했는데 어쩌다보니 만들었다.. 다음으로 이전으로 이미지는 5개를 놓았고 버튼은 이전 다음버튼 두개를 놓았다. .container{position: relative; width: 400px; height: 300px; } .container div{width:400px; height: 300px; position: absolute;} .one{ background:url("../img/img_01.jpg"); transform:scale(0.5); left:80%; z-index:1;} .two{ background:url('../img/img_02.jpg'); t..

여기서 중요한점은 이미지 6번뒤에 다시 1번이 붙어있다는것. 자동으로 첫번째 이미지를 뒤에 붙이는 방법을 배운것같은데 까먹었다. .windowcon{ overflow: hidden; position: relative; } .container{ width: 100%; height: 100%; position:absolute; left:0%; } .container img{ display: block; position: absolute; } css는 특별할것 없다. 원래는 css에서 container에 직접 transition을 넣었었는데 마지막 슬라이드가 지나면 처음으로 돌아가는 모션이 보이는 문제가 있어서 이것도 스크립트로 넣어주기로했다. const windowcon = document.querySele..

body{ background:darksalmon; } .fill{ background-image:url('../img/img_01.jpg'); position: relative; height: 150px; width: 150px; top: 5px; left: 5px; cursor:pointer; } .empty{ display: inline-block; height: 160px; width: 160px; margin: 10px; border:3px solid salmon; background-color: #fff; } .hold{ border:solid #ccc 4px; } .hovered{ background: #f4f4f4; border-style: dashed; } .invisible{ displ..

var negative = -50; console.log(negative)//-50 Math.abs(negative) // 50 var number = 60; number * -1 //-60 출력 1. Math.abs 를 통해 음수를 양수로 바꿀 수 있다. 2. 반대의 경우라면 곱하기 -1을 해주면 된다.

$(function(){ //start $('.drag').draggable({ revert:true }); $('.drop').droppable({ drop : function(){ $(this).addClass('active'); $('.drag').css({ left:0 }); $('.drag').draggable({ revert:false, containment : '.drop' }) },//drop end classes: { "ui-droppable-active": "ui-state-active", "ui-droppable-hover": "ui-state-hover", } }); //end }); html 로 들어가서 소스코드 이안에 코드 작성후 작성완료하면 적용됨. https://galatia..