인터렉티브 웹 공부 중 ~(개인 메모장)
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이 필요할 때 사용한다.