인터렉티브 웹 공부 중 ~(개인 메모장)

display:absolute를 쓰려면

부모 요소에 display:relateively로 되어 있어야함 (부모가 body 일 경우는 제외)

 

부모 요소에

overflow:hiedden; 하면 자식요소가 부모 요소 벗어난건 숨김처리함

 

transform: translateX, Y 보다 translate3d 가 (하드웨어 가속을 쓰기때문에) 더 빠르다. 애플이 translate3d 쓴다고 함

 

transform: translate3d(100%, 0, 0); 해당 객체의 width, height 를 기준으로 %로 쓰는게 편함

 

 

perspective 를 줘야 rotate등 할 때, 3D 효과가 남 

perspective:800px;

부모요소에 넣으면 시점에 차이가 있고,
회전체 자체에 transform:perspective(800px) rotateY~~ 로 주면 시점차이가 안남

hover일 때 동작시킴
.door:hover .door-body {
	transform: perspective(800px) rotateY(-110deg);
}

transition-duration: 0.5s; (0.5초동안 움직임)

transition-delay: 0.5s; (0.5s 지나고 시작)

 

transition: 0.5s 0.5s; (위랑 같은 개념)

transform-origin:0% (origin은 기본 50%임)

함수를 전역 스코프에서 실행하지 않고, 함수 내부에서만 사용할 수 있도록 함 
이러한 패턴은 전통적으로 모듈 패턴이라고 불리며, 자바스크립트에서 모듈을 구현하는 데 자주 사용
(function() {
	console.log("이런식으로 function 작성")
}) ()

 

특정 클래스가 붙었을 때 transform 을 줘서, 클래스를 붙이는 걸로 동작을 하게 만듬!!!

 

함수가 이벤트 리느서로서 실행 됬을 때, 자동으로 첫번째 파라미터에는 이벤트 객체가 들어옴

이벤트 객체는 타겟속성으로 지금 내가 클릭한 객체가 어떤건지 잡아낼 수 있음

 

const target= e.target;

 

classList에는 4가지 메소드가 있음 add, remove, toggle, contains (불리언값 리턴)

 

target.classList.add('class이름'), target.parentNode.classList.add('class이름')

 

document.querySelector 처럼 dom에 접근하는거는 느림!

현재 활성화된 아이템을 저장할 변수를 만들어 놓는 것이 중요!

 

(function)() {
	const stageElem = document.querySelector('.stage');
    
    //현재 활성화된 아이템 저장
    let currentItem;
    
    function doorHandler(e) {
    	const targetElem = e.target;
        
        if(currentItem) {
        	currentItem.classList.remove('door-opened');
        }
        
        if(targetElem.classList.contains('door-body')) {
        	targetElem.parentNode.classList.add('door-opened');
            currentItem = targetElem.parnetNode;
        }
    }
    
    stageElem.addEventLister('click', doorHandler);
}()

리팩토링은 하지않음(이벤트리스너 함수를 더 쪼개야함)

==

 

자바스크립트 함수에 new 를 붙여 호출하면 생성자로서 호출하게됨

다른점은 this.nickname = nickname; 등 하면 this임에도 window가 아닌 객체에 nickname 속성 값으로 적용

 

function Person(nickname,name) {~~~~}

 

Person.prototype.introduce = function() {};

prototype은 인스턴스에 종속되지 않고 동일한 function이 필요할 때 사용한다.