개발 시작하기 전에 플로우를 기록해 둔다.

html

1. 그룹을 잘 묶어서 짠다.
2. 하나의 기능이 들어간다고 하더라도 2중으로 그룹화 하는 것이 좋다.
3. 입력 단위는 업데이트 되는 단위로 묶어준다.

CSS

1. reset.css 파일 만들고 복사
2. 내가 사용한 css 파일에 import
3. 기본적으로 항상 css는 body 태그에 대해 설정을 하고 시작하는 것이 좋다. body 태그 안에서 설정해줘야 하는 것은 기본적으로 배경색과 폰트정도가 있다.
4. 집합구조를 잘 생각해서 짠다.
5. css에서 먹일 때도 명확하게 이 객체의 위치를 명시적으로 적은 후에 걸어준다.

JS

1. 여거개의 객체 tag에 대해 같은 이벤트를 얻고 싶을 떄는 id로 js#@%@%이렇게 저장하는 것이아니고 class로 저장한다. 그 이후에 ‘getElementByClassName’으로 불러오면, 자동으로 배열로 모든 class에 해당하는 녀석을 가져온다.

2. 이 때 불러와진 녀석은 배열이 아니다. 유사배열이다. JSON 파일과 같다고 보면 된다. 즉, a[0] 처럼 접근은 가능하나, Array의 메서드를 사용할 수 없다.

   for (let i = 0; i < colors.length; i++) {
     const element = colors[i];
     element.addEventListener("click", handleColorChanging);
   }
   

   Array.from(colors).forEach(item => {
     console.log(item);
     item.addEventListener("click", handleColorChanging);
   });
   

   따라서 이 두 코드는 같은 작동을 한다.

3. querySelector 사용처는 다음과 같다. 일반적으로 하나밖에 없는 이름을 갖고 있는 태그라면 querySelector를 쓰는게 좋아보인다.이 경우, 해당 객체에서 다시 querySelector를 사용할 수 있기 때문에, 사용하기 편리하다. 다만 가장 위에 있는 객체하나만을 들고 오기 때문에 여러개가 있을 경우 좋지 않다. 여러개를 들고 올 경우에는 getElementClassName을 사용하는 것이 좋아보인다. 이경우 HTMLCollenction이라는 객체로 들고오며, 이를 Array로 바꿔 사용하면 편리하다. getElementId 는 하나만 빠르게 들고올 떄 사용하면 편리하다.