코딩 슬라임 공방

See the Pen 국립해양박물관 상단바 by Lee Hoyeon (@nixpluvia) on CodePen.

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

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

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는 클래스를 제거한다.

Refactoring리팩토링 re(다시)+factory(공장)의 합성어 공장으로 다시 돌려보내서 좀 더 개선한다 라는 느낌. 반복되는 코드들을 최소한으로 줄이는 일이라고 보면 된다. Array(배열) 배열은 음식들을 보관하고 있는 냉장고와 같다. 데이터가 많아지면서 그 모든 데이터들을 그냥 둘 수 없기 때문에 서로 연관된 데이터들을 묶어서 냉장고와 같은 보관상자에 넣는 것과 같다. 배열이라는 데이터 타입은 대괄호에 담아서 사용한다 그리고 배열 값과 값 사이는 콤마(,)로 구분한다. ["apple","pineapple","strawberry"]; 하지만 이상태로는 사용하기 불편하기 때문에 보통 변수(VAR)안에 넣는다. var fruit = ["apple","pineapple","strawberry"]; ..