head
는 html문서의 meta정보를 담는다.
body
는 화면에 보여지기 위한 정보이다.
의미에 맞는 태그를 사용하자.
header, section, nav, footer, aside, main
attribute
id
고유한 정보를 표현한다. ( 페이지에서 유닉 )
class
css 입히고 select의 키가 된다.
data-*
HTML에 데이터를 저장할 수 있다.
<div class="item" data-index="1">...</div>
const item = document.querySelector(".item")
const targetIndex = +item.dataset.index; // dataset은 string으로 값을 가져온다.
const items = document.querySelectorAll('[data-index]');
style
태그안에서 style을 inline으로 적용할 수 있다. ( vanilla에서 애니메이션 제어할 때 많이 활용된다 )
CSS의 가장 중요한 부분은 레이아웃 배치이다.
display, position, float가 전부라고 해도 과언이 아니다.
display: block;
display: inline; /* 높이와 넓이 지정해도 반영이 되지 않는다.*/
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* grid-template-columns: repeat(3, 1fr); */
grid-template-rows: 200px 200px 500px;
gap: 10px 20px;
position: static;
position: relative;
position: absolute; /* 상위 relative한 element이 기준 */
position: fixed;
float: left;
float: right;
css의 우선순위 ( Cascading )
!important
> HTML inline style
> #id
> .class
> tagName
> 상속
짜잘한 스타일링코드
z-index: 1000
box-sizing: border-box;
visibility: hide
width: 100%
( 부모 크기가 기준 )
css 앞에 1을 넣으면 주석이 된다는 사실! css는 에러가 나지 않기에
.green {
1float:left
}
console.log()해도 되지만 debugger를 활용해도 좋다.
JS
라고 쓰고DOM API
라고 읽는다. DOM API는 굉장히 방대하다.
Node 와 Element의 차이
자식찾기 childNodes
firstChild
firstElementChild
부모찾기 parentNode
parentElement
형제찾기 previousSibling
nextSibling
nextElementSibling
closest()
부모로 올라가면서 타겟 엘리먼트 찾기, 없다면 null
유용한 유틸
/**
*
* @param {string} selector
* @param {HTMLElement} element
* @returns {HTMLElement}
*/
export const $ = (selector, element = document) => {
return element.querySelector(selector);
};
appendChild(), removeChild(), insertBefore(), replaceChild()
/**
* @param {string} html
* @return {HTMLElement}
*/
export const htmlToElement = (html) => {
var template = document.createElement('template');
html = html.trim();
template.innerHTML = html;
return template.content.firstChild;
};
innerText, innerHTML, outerHTML, insertAdjacentHTML()
이론상 innerHTML보다 createElement가 더 빠르다. innterHTML은 string을 파싱해서 dom으로 만든다. 하지만 고려할 만큼 성능상 이슈가 없어서 편리한 것을 사용하면 된다.
다양한 이벤트와 등록 방식이 있다.
window.addEventListener("DOMContentLoaded", ()=>{});
this.$target.addEventListener("click", this.onclick.bind(this))
this.$target.onclick = (e) => { console.log(e.target.className) }
this.$target.onmouseenter = this.onhover.bind(this);
this.$target.onmouseleave = this.onleave.bind(this);
keydown, keyup, keypress
✨ 이벤트 위임
<div class="root">
<div class="target1">target1</div>
<div class="target2 btn">target2</div>
</div>
const root = document.querySelector('.root')
root.addEventListener("click", ({target}) => {
if(target.className === "target1"){ // target2와 같은 경우 이렇게 하면 안된다.
console.log("target1")
} else if (target.classList.contains("target2")){
console.log("target2")
}
})
각 타겟에다가 이벤트를 달아두는 것이 아니라 root에 하나의 이벤트를 달아두고 target의 className 기반으로 작업을 수행하면 된다.
이는 DOM Event가 위임되기 때문이다.
실재로 React에서는 각 컴포넌트에서 탑재한 onclick를 #app eventListener에 달아 두고 위임시킨다고 한다.
test https://shorturl.at/uBITY