1.global.css에 body태그 정의

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  max-width:2560px;
  min-width: 400px;
  overflow: scroll;
  margin: 0 auto;
}

• body 태그에 최대크기와 최소크기를 정하여 어느 화면에도 깨지지 않게 정의해 줬다.

• 이렇게 안하면 뒷 배경에 정의한 즉, 바디 tag에 정의한 css요소가 계속 줄어들게 된다.

2.next의 동적 라우팅

• 동적 라우팅은 같은 depth에서 두개를 선언할 수 없다.
• depth다르게 하여 세팅을 하여야 정상적으로 컴파일 되어 작동한다.

3. tailwindCSS 반응형 룰

• sm,md,lg별로 css 작업을 해야하므로 앞에서부터 동적 className,공통 attribute,sm,md,lg 순으로 작업해야 직관성이 올라간다.

4. width,height를 percent로 줄 때 주의점

• 항상 min,max 를 정하도록 하자 그렇지 않으면 요소드리 겹치거나 깨진다..
• 부모를 퍼센트로 주고 자식은 px로 고정시키는 것도 방법이다. overflow를 활용하여 나머지요소를 scroll로 볼 수 있다.
• 아예 body태그를 고정시켜 원하는 px범위내에서 반응형으로 만들 수도 있다.

5.overflow 와 flex

 <div className=" max-w-[90%] overflow-x-scroll m-auto  ">
      <div className="flex w-[500px]  h-20 items-center justify-center">{children}</div>
    </div>

• 항상 생각해야하지만 단순하게 flex를 준 tag에서 width와 overflow를 주면 적용이 안된다...
• 때문에 상위 태그를 만들어 width를 정한 후 overflow를 주어 원하는 곳 안에서 element를 조정할 수 있다.
• 부모가 너무 상위일 경우 화면 전체가 overflow 판정을 받아 움직인다... 바로 상위에 부모태그를 만들어 하는게 가장 나을 것 같다.

6. 깃 대소문자 구별

git config core.ignorecase false

• 이거 써주면 깃이 구별을 해준다 ㅠㅠ