코딩 슬라임 공방

Display와 visibility의 차이점 display:none;은 요소 자체가 사라지게된다. 그래서 요소가 레이아웃에 영향을 미치지 않게 된다.(none이 되면 요소가 사라지고 그 자리를 다른 요소들이 차지함) 하지만 visibility: hidden은 렌더링은 하지않지만 요소가 사라진게 아니라 레이아웃에 영향을 미치게 된다.(hidden이 되어도 그자리는 그대로 차지함) opacity로 안보이게 조절하는 것과는 다르게 요소가 클릭조차 되지 않게된다. 클래스 생성과 제거 -제이쿼리 $('선택자').addClass('클래스선택자') - 클래스 생성 $('선택자').removeClass('클래스선택자') - 클래스 제거 event 버블링 이란? 이벤트가 연속하여 발생하는 버블 현상을 의미한다. stop..

객체 데이터와 데이터와 관련된 동작(기능)을 모두 포함할 수 있는 개념적 존재입니다. 객체는 property와 function으로 이루어져있습니다. 데이터 : 이름과 값을 가지는 속성(property) 동작 : 일련의 관련된 동작을 정의한 함수(function) 간단한 예로 설명하면 고양이는 하나의 객체입니다 그리고 객체의 안에는 이런 내용들이 들어 갈 수 있습니다. 이름: 나비 종류: 스포티쉬폴드 먹이: 참치캔 객체의 필요성 관련있는 정보들을 모아놓기 위해서 코드의 관리가 쉬워집니다. 객체안에 존재하는 메서드나 데이터들을 사용해서 작성하면 나중에 객체 안에 존재하는 메서드나 데이터를 수정하면 작성된 모든 내용을 바꿀 수 있기 때문입니다. 객체의 구조 var cat = { name: "나비", speci..

콜백함수의 정의 콜백함수란 다른 함수의 인자로서 이용되는 함수 어떤 이벤트에 의해 호출되는 함수 callback은 쉽게 말하자면 어떤 일을 다른 객체에게 시키고, 그 일이 끝나는 것은 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것을 말합니다. 콜백함수의 예제 function plus(x, y, callback) { sum = x + y; callback(sum) } function print(result) { console.log(result); } plus( 1, 2, print); plus함수가 실행된다. plus함수의 매개변수인 1과 2의 연산값이 sum으로 들어간다. 매개변수인 callback에 들어간 콜백함수인 print가 callback에 들어간다. print함수가 실행된다. print..

함수는 입력과 출력으로 이루어져 있는데 입력에 해당하는 것이 Parameter(매개변수), Argument(인자)이다. 출력에 해당되는 것이 Return이다. function plus(x , y) { document.write(x + y); } plus( 1 , 2 ); 이런 함수를 사용 했을 때 함수를 정의할때 사용 한 x, y를 Parameter(매개변수)라고 하고 이 매개변수에 들어가게 되는 값 1 , 2를 인자 라고 합니다. 출력은 return인데 함수가 내보내는 값이 return 값이 된다. return의 아래의 값들은 무시된다. function helloWorld() { return "Hello World" return "bye-bye" } document.write(helloWorld); 이..

offsetWidth,clientWidth,scrollWidth 자바스크립트로 특정 요소의 width,height 값을 구하고 싶을 때 사용 할 수 있는 방법이 있다. offsetWidth offsetWidth는 요소의 마진을 제외한 border까지의 사이즈를 계산한다. clientWidth clientWidth는 요소의 border를 제외한 padding까지의 사이즈를 계산한다. scrollWidth scrollWidth는 요소의 보이는것과 상관 없이 실제 컨텐츠 영역이 얼마의 크기를 갖는지 계산한다. 이 요소는 스크롤 바로 인해 숨겨진 영역까지 포함한 크기를 계산한다. var width = document.jquerySelector(".classname").clientWidth; console.log..

예를 들어 xxxx라는 이름을 가지고 있는 요소의 padding이나 margin 값을 변경할 때에는 이렇게 한다. ex) document.querySelector(".xxxx").style.paddingTop = "10px"; document.querySelector(".xxxx").style.paddingBottom = "10px"; document.querySelector(".xxxx").style.paddingRight = "10px"; document.querySelector(".xxxx").style.paddingLeft = "10px"; document.querySelector(".xxxx").style.marginTop = "10px"; document.querySelector(".xxxx"..

onmouseover/mouseout body 안에 넣지 않고 자바스크립트안에 넣는 방법의 문법은 아래와 같다 no.onmouseover = function () { no.classList.add("test"); }; no에는 변수 값을 넣었다. mouseover는 마우스가 올라왔을 때이고 mouseout는 마우스가 떠났을 때 이다. classList 클래스 리스트를 사용해서 클래스에 대해서 여러가지를 제어할 수 있다. 아래와 같이 사용하며 ()안에들어갈 클래스의 이름은 ""로 적는다. .classList.add("test"); .classList.remove("test"); add는 클래스를 추가하고 remove는 클래스를 제거한다.