[next.js] 홈페이지 css, tsx 정리

🌟 flex container 안의 두 요소 가운데 정렬하기

• 방법1) container에 margin: 0 auto
• 방법2) container에 justify-content: center
• 방법3) 왼쪽 ,오른쪽 -> 각 flex 요소에 flex-grow: 1

Onclick - > 서버컴포넌트에 있으면 에러발생 
client 로 변경해줘야함

 

기본 페이지 설정

export default function Home() {
  return (
    <main>
      게시글
    </main>
  )
}

 

 

다크모드 설정

홈탭 만들면서 Context API 적용해보기 -> 강의참조 (따로 설정해줘야함)

 

    backdrop-filter: blur(12px);

    /* 블러처리 실루엣보이게 하는거*/

 

서로 탭의 상태를 공유하는 방법 3개 

 

Context API 적용하기

 

 

import dayjs from 'dayjs'; /* 몇초전 ~ 몇분전 사용*/