[WIL] HTML, CSS, DOM API

bepyan·2022년 1월 14일

CSS DOM API html js

WIL

목록 보기

1/1

HTML

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

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
}

DOM API

console.log()해도 되지만 debugger를 활용해도 좋다.

해당 스코프에서 콘솔로 작업을 할 수 있다. ( 스코프의 this를 추적해서 상세한 데이터 확인하기 좋다 )

JS라고 쓰고 DOM API라고 읽는다. DOM API는 굉장히 방대하다.

Node 와 Element의 차이

Node는 텍스트 노드가 포함한다.
Element는 택스트 노드를 포함하지 않는다. ( 태그만 )
자식 노드 존재 확인할 때 이를 조심해야 한다.

DOM 탐색법

자식찾기 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);
};

DOM 조작법

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으로 만든다. 하지만 고려할 만큼 성능상 이슈가 없어서 편리한 것을 사용하면 된다.

Event

다양한 이벤트와 등록 방식이 있다.
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

키보드 누른다 → keydown → 글자 입력 됨 → keypress → 키보드 손을 뗀다 → keyup
keypress에서 Enter, Tab 등 특수키가 발생하지 않는다.
보통 keyup을 사용하면 된다.
keyCode 명세

✨ 이벤트 위임

<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에 달아 두고 위임시킨다고 한다.